Upgrade from 4.0.0 to 5.0.3 angular using Angular Client 1.5.5 fails

[mkharibalaji]

Application not loading in production mode after upgrade from 4.0.0 to 5.0.3
Deployed successfully in DevMode using "ng serve" but fails in "ng serve --prod --aot"

Versions

"dependencies": {
"@angular/animations": "5.0.3",
"@angular/cdk": "5.0.0-rc.2",
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/material": "5.0.0-rc.2",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@angular/platform-server": "5.0.3",
"@angular/router": "5.0.3",
"@ngx-translate/core": "9.0.1",
"@ngx-translate/http-loader": "2.0.0",
"@toverux/ngx-sweetalert2": "^3.0.1",
"angular2-busy": "^2.0.4",
"angular2-datatable": "^0.6.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"jquery-ui": "^1.12.1",
"ng2-file-upload": "^1.2.1",
"ng2-img-fallback": "^0.2.3",
"ngx-chips": "1.5.10",
"ngx-dropzone-wrapper": "5.0.0",
"ngx-perfect-scrollbar": "5.0.5",
"rxjs": "5.5.2",
"sweetalert2": "^7.0.3",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "^1.5.5",
"@angular/compiler-cli": "^5.0.3",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"json-server": "^0.10.1",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}

Repro steps

ng serve --prod --aot

Date: 2017-12-03T04:55:50.754Z
Hash: be365cc6424488473cde
Time: 277149ms
chunk {0} 0.6b23aeaf9397a3b18640.chunk.js (common) 50.9 kB [rendered]
chunk {1} 1.e9a3e9dea7834a9353b7.chunk.js () 734 kB [rendered]
chunk {2} 2.28772ee6009ba08626d0.chunk.js () 27.2 kB [rendered]
chunk {3} 3.9517faf8ef8ef031ead9.chunk.js () 13 kB [rendered]
chunk {4} 4.f37f80b1bf7782a0022b.chunk.js () 10.5 kB [rendered]
chunk {5} 5.dc46979d9567f2fef7a2.chunk.js () 12.8 kB [rendered]
chunk {6} 6.b919a605dd53b8e7decf.chunk.js () 12.7 kB [rendered]
chunk {7} 7.cd3f3b525f9d3594f864.chunk.js () 10.5 kB [rendered]
chunk {8} 8.0099ca7e362b96a74c0b.chunk.js () 10.9 kB [rendered]
chunk {9} 9.abb150c522ba90e58ccb.chunk.js () 18.4 kB [rendered]
chunk {10} 10.74fd8b3c347d76c9d34c.chunk.js () 3.56 kB [rendered]
chunk {11} 11.c90a2c818168cfb7ba87.chunk.js () 10.9 kB [rendered]
chunk {12} 12.8d39ce76f5e30822141f.chunk.js () 25.4 kB [rendered]
chunk {13} 13.b1b835e1b72ba1bebb5a.chunk.js () 11.5 kB [rendered]
chunk {14} main.e7cf6d213dff3a4d4f0c.bundle.js (main) 1.71 MB [initial] [rendered]
chunk {15} polyfills.bf4f304671ab0d8a7624.bundle.js (polyfills) 65.7 kB [initial] [rendered]
chunk {16} styles.d61e927be5050341aa40.bundle.css (styles) 610 kB [initial] [rendered]
chunk {17} inline.e0bf1e389647f69e0195.bundle.js (inline) 1.8 kB [entry] [rendered]

webpack: Compiled successfully.
Loading failed for the <script> with source “http://localhost:4200/scripts.dcc5c21a3d00537bab92.bundle.js”.
TypeError: t is undefined
LMZF/</mo</t.prototype.bootstrapModuleFactory/<
http://localhost:4200/main.e7cf6d213dff3a4d4f0c.bundle.js:1:372505
eFQL/</</</f</e.prototype.invoke
http://localhost:4200/polyfills.bf4f304671ab0d8a7624.bundle.js:1:34456
onInvoke
http://localhost:4200/main.e7cf6d213dff3a4d4f0c.bundle.js:1:368420
eFQL/</</</f</e.prototype.invoke
http://localhost:4200/polyfills.bf4f304671ab0d8a7624.bundle.js:1:34383
eFQL/</</</u</r.prototype.run
http://localhost:4200/polyfills.bf4f304671ab0d8a7624.bundle.js:1:29610
LMZF/</io</t.prototype.run
http://localhost:4200/main.e7cf6d213dff3a4d4f0c.bundle.js:1:369132
LMZF/</mo</t.prototype.bootstrapModuleFactory
http://localhost:4200/main.e7cf6d213dff3a4d4f0c.bundle.js:1:372434
cDNt
http://localhost:4200/main.e7cf6d213dff3a4d4f0c.bundle.js:1:777989
n
http://localhost:4200/inline.e0bf1e389647f69e0195.bundle.js:1:96
[0]
http://localhost:4200/main.e7cf6d213dff3a4d4f0c.bundle.js:1:4920
n
http://localhost:4200/inline.e0bf1e389647f69e0195.bundle.js:1:96
window.webpackJsonp
http://localhost:4200/inline.e0bf1e389647f69e0195.bundle.js:1:416

http://localhost:4200/main.e7cf6d213dff3a4d4f0c.bundle.js:1:1

Observed behavior

Getting the error in Browser

Desired behavior

The application login page would be visible

Mention any other details that might be useful (optional)

[sheldonbazzell]

Even though you'll get a warning that suggests running npm install typescript@'>=2.4.2 <2.5.0', I worked around a very similar error by updating TypeScript to 2.6.1.

[mkharibalaji]

Thanks @sheldonbazzell

I updated to Typescript 2.6.2 and still the issue persists.

"devDependencies": {
"@angular/cli": "^1.5.5",
"@angular/compiler-cli": "^5.0.3",
"": "2.5.38",
"": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"json-server": "^0.10.1",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "2.6.2"
}

[dinerotah]

check all dependencies to have released an angular 5 compatible version. For example "angular2-busy" has no compatible version yet:
devyumao/angular2-busy#87
devyumao/angular2-busy#67

That means that u r problem is not in Angular/Cli.

[mkharibalaji]

@Taha-Di-Nero - The below warnings from the libraries are creating the issue - is that Correct ?

npm WARN @angular/compiler-cli@5.0.3 requires a peer of typescript@>=2.4.2 <2.5 but none was installed.
npm WARN @toverux/ngx-sweetalert2@3.0.1 requires a peer of @angular/core@^4.0.0 but none was installed.
npm WARN @toverux/ngx-sweetalert2@3.0.1 requires a peer of @angular/common@^4.0.0 but none was installed.
npm WARN angular2-datatable@0.6.0 requires a peer of @angular/core@^2.0.0 but none was installed.
npm WARN angular2-datatable@0.6.0 requires a peer of @angular/common@^2.0.0 but none was installed.
npm WARN angular2-datatable@0.6.0 requires a peer of @angular/platform-browser@^2.0.0 but none was installed.
npm WARN tsickle@0.24.1 requires a peer of typescript@2.4.2 but none was installed.
npm WARN angular2-busy@2.0.4 requires a peer of @angular/animations@^4.0.0 but none was installed.
npm WARN angular2-busy@2.0.4 requires a peer of @angular/common@^4.0.0 but none was installed.
npm WARN angular2-busy@2.0.4 requires a peer of @angular/core@^4.0.0 but none was installed.
npm WARN angular2-busy@2.0.4 requires a peer of @angular/platform-browser@^4.0.0 but none was installed.

[mkharibalaji]

I removed all the dependencies and still the Error Persists

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[ariklu]

facing same or similar issue: "Angular CLi" not installed (worked fine just week ago , don't remember which version it was)

** Windows 10**
** $ node -v**
v8.9.4
** $ npm -v**
5.6.0
** ( from project folder) npm install**
...
...
Binary found at C:\Users\XXX\angular\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\f sevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevent s@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x 64"})
added 1069 packages in 708.822s

** npm install g @angular/cli -dd**

npm WARN @angular/animations@5.1.3 requires a peer of @angular/core@5.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@5.0.3 requires a peer of @angular/core@~5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@5.0.3 requires a peer of @angular/common@~5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@5.0.3 requires a peer of @angular/core@~5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@5.0.3 requires a peer of @angular/common@~5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-carousel@1.3.5 requires a peer of @angular/core@^2.4.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-carousel@1.3.5 requires a peer of @angular/common@^2.4.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm verb notsup SKIPPING OPTIONAL DEPENDENCY: Valid OS: darwin
npm verb notsup SKIPPING OPTIONAL DEPENDENCY: Valid Arch: any
npm verb notsup SKIPPING OPTIONAL DEPENDENCY: Actual OS: win32
npm verb notsup SKIPPING OPTIONAL DEPENDENCY: Actual Arch: x64

• g@2.0.1
• @angular/cli@1.6.3
  removed 8 packages, updated 3 packages and moved 1 package in 93.455s
  npm verb exit [ 0, true ]
  npm info ok

ng -v
bash: ng: command not found

==================================================
**tryied to remove node_modules and to re-install - NOT HELPED
tried to re-install npm - NOT HELPED

any help will be appreciated**

[rohit0217]

I have the same issue and resolved by command "npm i typescript@2.4.2".

[alan-agius4]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}