angular2 i18n Cannot read property 'create' of undefined

Question

I am using angular2.
I used this project for start application.

To implement multi-language support followed this documentation

Steps : 1) Execute command

npm install @angular/compiler-cli @angular/platform-server --save

Output:

+-- UNMET PEER DEPENDENCY [email protected] `-- UNMET PEER DEPENDENCY [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch" :"any"} (current: {"os":"win32","arch":"x64"}) npm WARN @angular/[email protected] requires a peer of [email protected] but none was installed. npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. npm WARN @angular/[email protected] requires a peer of [email protected] but none was installed. npm WARN @angular/[email protected] requires a peer of [email protected] but none was installed. npm WARN [email protected] requires a peer of tslint@^3.9.0 but none was installed. npm WARN [email protected] requires a peer of @angular/compiler@~2.2.0 but none was installed. npm WARN [email protected] requires a peer of @angular/core@~2.2.0 but none was installed. npm WARN [email protected] requires a peer of tslint@^3.0.0 but none was installed. npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.

2) Execute command "./node_modules/.bin/ng-xi18n" It gives me below error

C:\Projects\temp\PathTrak3\PathTrak>"./node_modules/.bin/ng-xi18n" TypeError: Cannot read property 'create' of undefined at Function.Extractor.create (C:\Projects\temp\PathTrak3\PathTrak\node_modules\@angular\compiler-cli\src\extractor .js:69:45) at extract (C:\Projects\temp\PathTrak3\PathTrak\node_modules\@angular\compiler-cli\src\extract_i18n.js:7:34) at Object.main (C:\Projects\temp\PathTrak3\PathTrak\node_modules\@angular\tsc-wrapped\src\main.js:47:16) at Object. (C:\Projects\temp\PathTrak3\PathTrak\node_modules\@angular\compiler-cli\src\extract_i18n.js: 14:9) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.runMain (module.js:604:10) Extraction failed

I am not able to implkement i18n due to this error. Please find below dependancies in package.json file

 "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "^2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "^2.1.1",
    "@angular/router": "3.1.1",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.0",
    "@angularclass/hmr-loader": "~3.0.2",
    "angular2-highcharts": "^0.4.0",
    "assets-webpack-plugin": "^3.4.0",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "rxjs": "^5.0.0-rc.1",
    "zone.js": "~0.6.17"
  }

Is it version issue in package.json file? Kindly help

Thanks, Sardar Nale

-------------------------------------Modification--------------------

I removed node_modules folder and tried to update package.json as follows , UNMET dpendancy problem resolved but while running it gives error as Error

C:\Projects\temp\PathTrak12\PathTrak>npm start

> [email protected] start C:\Projects\temp\PathTrak12\PathTrak
> npm run server:dev


> [email protected] server:dev C:\Projects\temp\PathTrak12\PathTrak
> webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/

keywords if/then/else require v5 option

C:\Projects\temp\PathTrak12\PathTrak\config\webpack.common.js:178
      new ForkCheckerPlugin(),
      ^
TypeError: ForkCheckerPlugin is not a constructor
    at module.exports (C:\Projects\temp\PathTrak12\PathTrak\config\webpack.common.js:178:7)
    at Object.<anonymous> (C:\Projects\temp\PathTrak12\PathTrak\config\webpack.dev.js:23:31)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at requireConfig (C:\Projects\temp\PathTrak12\PathTrak\node_modules\webpack\bin\convert-argv.js:98:18)
    at C:\Projects\temp\PathTrak12\PathTrak\node_modules\webpack\bin\convert-argv.js:111:17
    at Array.forEach (native)
    at module.exports (C:\Projects\temp\PathTrak12\PathTrak\node_modules\webpack\bin\convert-argv.js:109:15)
    at Object.<anonymous> (C:\Projects\temp\PathTrak12\PathTrak\node_modules\webpack-dev-server\bin\webpack-dev-server.js:190:48)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "server:de
v"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] server:dev: `webpack-dev-server --config config/webpack.dev.js --progress --profile --watch
--content-base src/`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] server:dev script 'webpack-dev-server --config config/webpack.dev.js --progres
s --profile --watch --content-base src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2-webpack-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Projects\temp\PathTrak12\PathTrak\npm-debug.log

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `npm run server:dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'npm run server:dev'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run server:dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2-webpack-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Projects\temp\PathTrak12\PathTrak\npm-debug.log   

package.json file

"dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "~2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/platform-server": "~2.4.1",
    "@angular/router": "~3.4.1",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "angular2-highcharts": "^0.4.0",
    "assets-webpack-plugin": "^3.4.0",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "rxjs": "~5.0.2",
    "zone.js": "~0.7.4"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.34",
    "@types/node": "^6.0.38",
    "@types/protractor": "^1.5.20",
    "@types/selenium-webdriver": "2.53.38",
    "@types/source-map": "^0.5.0",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^2.0.0",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "~3.0.0-beta.17",
    "codelyzer": "~2.0.0-beta.4",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.26.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.9.0",
    "gh-pages": "^0.12.0",
    "html-webpack-plugin": "^2.21.0",
    "imports-loader": "^0.7.0",
    "istanbul-instrumenter-loader": "1.2.0",
    "json-loader": "^0.5.4",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.8.1",
    "node-sass": "^4.1.1",
    "parse5": "^2.2.1",
    "protractor": "^4.0.10",
    "raw-loader": "0.5.1",
    "rimraf": "~2.5.4",
    "sass-loader": "^4.1.1",
    "script-ext-html-webpack-plugin": "1.3.2",
    "source-map-loader": "^0.1.5",
   "string-replace-loader": "1.0.5",
    "style-loader": "^0.13.1",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.2",
    "ts-node": "^2.0.0",
    "tslint": "^4.0.0-dev.0",
    "tslint-loader": "^3.3.0",
    "typedoc": "^0.5.3",
    "typescript": "2.0.10",
    "url-loader": "^0.5.7",
    "webpack": "^2.1.0-beta",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "2.2.0-rc.0",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "~2.0.0"
  }

Answer 1

I guess it's just a mismatch in your angular versions. You should stick with the same version for every @angular package (except the router, it will be 1 major version higher until angular 4 is released).

With your...

npm install @angular/compiler-cli @angular/platform-server --save

... it seems you've got at least @angular/compiler-cli at 2.4.1 and probably and @angular/platform-server at 2.4.1. Since you've set the other @angular packages to a fixed version of 2.1.1 there will be some conflicts.

Note: The docs will always assume that you are on the latest (stable) angular version.

So how to fix it...

---

1. installing the old packages

You can just install the old packages by adding @angular/compiler-cli & @angular/platform-server to fixed 2.1.1 in your package.json (don't forget to remove the caret (^) here). Then remove your node_modules folder and run npm install again.

---

2. ...or updating the other packages

The other option is that you update your other@angular packages also to the most recent 2.4.1 version. Here you'll have to replace your 2.1.1 with the 2.4.1 in your package.json (except the router that would be 3.4.1). Then remove your node_modules folder and run npm install again.

Here you will might run into some other issues depending on your app... You might want to check the Changelog first.

---

FYI: when you are installing a new @angular package to your project try always to stick with the version you are using right now. To install a specific version in your case it would have been (note the @2.1.1):

npm install @angular/[email protected] @angular/[email protected] --save

...or updating all to the new version ;-)