Ionic-framework: Angular 5 Support

[NgYueHong]

Angular 5 is out now. As Ionic 4 will still take some time (several months) to release, hope Ionic 3 will be upgraded to support Angular 5.

[dfa1234]

Ionic will not be focused on Angular (ionic doesnt abandon angular but thats kind of)

I will test today to make the upgrade on on ionic 3 project... That could be working.

Please do not hesitate to keep us update if anybody give it a try.

[sandangel]

I got ionic worked with angular 5rc9. I haven't test with angular 5 yet but it seem to be working fine.

[mugavri]

ionic 3.8.0 with angular 5.0.0 not work for my.
(For example: users in an object OpaqueToken from @angular/core instead of the new object InjectionToken )

see more : angular 5.0.0 CHANGELOG.

[danielsogl]

@mugavri I fixed the deprecated Object last week: https://github.com/ionic-team/ionic/pull/11916
I will talk with the Core Team about Angular 5 and if its worth to upgrade before we release Ionic 4.

[kensodemann]

@danbucholtz has been working on getting things working properly with Angular 5. Whether that will be part of an Ionic v3 release or will wait until Ionic v4 is yet to be determined. I am going to close this issue but feel free to keep talking if you wish.

[ericis]

Is it ready yet @danbucholtz? 🙃

[NgYueHong]

It's great to hear that Ionic team has been working on Angular 5. Anyway, I really hope that it will be supported into Ionic 3 because it will still take several months to go before Ionic 4 will be released. If Ionic 3 can be upgraded to support Angular 5, then all current app developed with Ionic can be benefit from it.
Without Angular 5 support now, we might completely missed it (given that Ionic 4 will be release early 2018 + possible 1 or 2 months delay in release / adoption, it will be Angular 6 era already).

[AndreaFranceschini]

Upgrading "@ionic/storage": "^2.1.1" that has InjectionToken instead OpaqueToken works with Ionic 3.8.0 and Angular 5.0.0

[AndreaFranceschini]

Upgrading ionic/storage to 2.1.1" that has InjectionToken instead OpaqueToken works with Ionic 3.8.0 and Angular 5.0.0

[petrot]

I got this error when I run ios build:

Error: Please update @angular/cli. Angular 5+ requires at least Angular CLI 1.5+

This contains a possible solution, but not for ionic: https://long2know.com/2017/11/angular-5-0-released/

[ivarkallejarv]

ionic-angular 3.8 and Angular 5
When running my project on Android, it has a lot of font issues that are impacting performance, for example:

[gregd]

@kensodemann If the new build optimizer can reduce an Ionic app startup time then it is definitely worth to upgrade to Angular 5 now. Changes in Ionic 4 internals are so big that it will be rather 6 months to Ionic 4 stable version.

[jaufgang]

@kensodemann, why would you close this issue when it hasn't been resolved or even determined whether the work @danbucholtz is doing will be integrated into Ionic 3? Closing the issue just makes it harder to find.

[ericis]

For those looking to upgrade, check out this person's post to at least get started:
https://www.djamware.com/post/59fc9da680aca7739224ee20/ionic-3-and-angular-5-mobile-app-example

[petrot]

@ericis this guy uses "@ionic/storage": "2.0.1". It will fail, isn't it?

[Sampath-Lokuge]

Yes, We need Angular 5 with Ionic 3. We'll never upgrade our apps to Ionic 4 until it'll be fully stable.Hope it'll take another 6 months for that. Angular 5 has a lot of performance improvement which is very vital to our current apps.Please open this issue @kensodemann

[didinj]

I have tried it and it works, except for --prod. The tutorial is here.

[danielsogl]

Dan told me that he can already run Angular 5 locally. He also updated ionic app scripts to support Angular 5.0.
Wait a few more days.

[Sampath-Lokuge]

Thanks for the positive feedback @danielsogl

[adamduren]

I was able to get the build working with AOT and thought I'd share for anyone that really needs it now. Basically we just need to get the latest unreleased master for @ionic/app-scripts.

• First follow the tutorial @didinj posted above and then
• In a directory that's not your project directory clone ionic app scripts [email protected]:ionic-team/ionic-app-scripts.git
• cd ionic-app-scripts
• npm install
• npm link
• cd back to your project directory
• npm link @ionic/app-scripts
• Run the build command ionic build --prod

[adamduren]

I discovered when doing the above that it only works for AOT prod builds. I have to revert back to the npm version of @ionic/app-scripts when I want to develop with ionic serve.

[YamanSehzade]

Hi @danielsogl, How many days will it take ?

[qasimraza1979]

I am trying to upgrade my application from Angular 4 to Angular5
I am getting following warnings with npm install. Could any one suggest. what could be wrong. I am playing different ways both right and wrong. Not sure how to fix these. Please advice.

warning "@angular/[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning "@angular/[email protected]" has unmet peer dependency "rxjs@^5.5.0".
warning "@angular/[email protected]" has unmet peer dependency "rxjs@^5.5.0".
warning "@angular/[email protected]" has unmet peer dependency "rxjs@^5.5.0".
warning "[email protected]" has incorrect peer dependency "@angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0".
warning "[email protected]" has incorrect peer dependency "@angular/core@^2.3.1 || >=4.0.0-beta <5.0.0".
warning "[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning "[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning "[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning "[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning "[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning "[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning "[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning "[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning "[email protected]" has unmet peer dependency "[email protected]".
warning "@angular/[email protected]" has unmet peer dependency "rxjs@^5.5.0".

here is my package.json

"peerDependencies": {
    "@angular/common": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "platform-browser-dynamic": "4.4.4",
    "ionic-angular": "3.8.0",
    "ionicons": "3.0.0",
    "rxjs": "~5.0 5.4.3 < 6",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/animations": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/compiler-cli": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/platform-server": "5.0.0",
    "karma-edge-launcher": "^0.4.2",
    "karma-firefox-launcher": "^1.0.1",
    "karma-ie-launcher": "^1.0.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-safari-launcher": "^1.0.0",
    "ionic-angular": "3.8.0",
    "ionicons": "3.0.0",
    "rollup": "^0.50.0",
    "rollup-plugin-commonjs": "^8.2.1",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-uglify": "^2.0.1",
    "source-map-explorer": "^1.5.0"
  },
  "dependencies": {
    "base64url":"2.0.0",
    "@angular/common": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "html-webpack-plugin": "^2.28.0",
    "@compodoc/compodoc": "^1.0.0-beta.9",
    "@types/jasmine": "^2.5.47",
    "@types/karma": "^0.13.35",
    "@types/node": "^7.0.18",
    "@types/webpack": "^2.2.15",
    "@types/webpack-env": "^1.13.0",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.3",
    "codecov": "^2.2.0",
    "codelyzer": "^3.0.1",
    "concurrently": "^3.4.0",
    "extract-text-webpack-plugin": "3.0.0",   
    "ionic": "3.9.2",
    "ionic-angular": "3.8.0",
    "ionicons": "3.0.0",
    "jasmine-core": "^2.6.1",
    "json-loader": "^0.5.4",
    "karma": "^1.7.0",
    "karma-chrome-launcher": "^2.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-mocha-reporter": "^2.2.3",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.0",
    "node-sass": "^4.5.2",
    "raw-loader": "^0.5.1",
    "rimraf": "2.6.1",
    "rxjs": "^5.4.3",
    "sass-lint": "^1.11.1",
    "sass-loader": "^6.0.5",
    "source-map-explorer": "^1.5.0",
    "style-loader": "^0.18.2",
    "to-string-loader": "^1.1.5",
    "ts-node": "^3.0.4",
    "tslint": "^5.2.0",
    "typescript": "2.4.2",
    "webpack": "3.6.0",
    "webpack-angular-externals": "^1.0.2",
    "webpack-rxjs-externals": "^1.0.0",
    "zone.js": "0.8.18",
    "copyfiles": "^1.2.0"

[danielsogl]

Whats the point rushing to Angular 5? Just wait a few more days. We already merged all Angular 5 relevant changes into the ionic-angular and ionic-angular-appscripts repositories.

[ivarkallejarv]

If there's a way to track the progress on this, then that would be appreciated.
Is there a thread or something of the sort?

[olivermuc]

Is this supposed to work already with -prod now?
Even with ionic/app-scripts 3.0.1 I am seeing the dreaded
"Please update @angular/cli. Angular 5+ requires at least Angular CLI 1.5+"
error.
Same as other reported, this doesn't happen for ionic serve.

[kensodemann]

@olivermuc - not yet... I suggest waiting for the next release, which should be very soon as it is in final testing now, which will allow for using Angular 5 in your project.

[Sampath-Lokuge]

This is the best news of the day. Thanks @kensodemann

[olivermuc]

Thanks @kensodemann, appreciate the quick turn around.
I take it, by next release you are referring to app-scripts, not ionic... :-)

[kensodemann]

Both @ionic/app-scripts and ionic-angular

[aces-tm]

@kensodemann Are we waiting for release of@ionic/app-scripts and ionic-angular for --prod issue to be solved?

[ngfk]

It already works for me with the current version.

@ionic/app-scripts : 3.1.0
Ionic Framework    : ionic-angular 3.9.2

They have upgrade instructions in the changelog:
https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

[adamduren]

My issues were only before they released official support. No problems after following the upgrade instructions above. I believe this issue should be closed.

[jaufgang]

@adamduren: Dude, this issue has been closed since the day after it was opened for some reason I don't understand. :confused:

[adamduren]

Whoops, good point.

[aces-tm]

This didn't work for me... I am still able to build the app, but not with --prod
Error: ./src/app/main.ts Module not found: Error: Can't resolve './app.module.ngfactory' in '/Users/nikola/www/aces-ionic/src/app' resolve './app.module.ngfactory' in '/Users/nikola/www/aces-ionic/src/app' using description file: /Users/nikola/www/aces-ionic/package.json (relative path: ./src/app) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/nikola/www/aces-ionic/package.json (relative path: ./src/app) using description file: /Users/nikola/www/aces-ionic/package.json (relative path: ./src/app/app.module.ngfactory) no extension Field 'browser' doesn't contain a valid alias configuration /Users/nikola/www/aces-ionic/src/app/app.module.ngfactory doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration /Users/nikola/www/aces-ionic/src/app/app.module.ngfactory.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/nikola/www/aces-ionic/src/app/app.module.ngfactory.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration /Users/nikola/www/aces-ionic/src/app/app.module.ngfactory.json doesn't exist as directory /Users/nikola/www/aces-ionic/src/app/app.module.ngfactory doesn't exist [/Users/nikola/www/aces-ionic/src/app/app.module.ngfactory] [/Users/nikola/www/aces-ionic/src/app/app.module.ngfactory.ts] [/Users/nikola/www/aces-ionic/src/app/app.module.ngfactory.js] [/Users/nikola/www/aces-ionic/src/app/app.module.ngfactory.json] [/Users/nikola/www/aces-ionic/src/app/app.module.ngfactory] @ ./src/app/main.ts 2:0-60 at BuildError.Error (native) at new BuildError (/Users/nikola/www/aces-ionic/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28) at callback (/Users/nikola/www/aces-ionic/node_modules/@ionic/app-scripts/dist/webpack.js:121:28) at emitRecords.err (/Users/nikola/www/aces-ionic/node_modules/webpack/lib/Compiler.js:269:13) at Compiler.emitRecords (/Users/nikola/www/aces-ionic/node_modules/webpack/lib/Compiler.js:375:38) at emitAssets.err (/Users/nikola/www/aces-ionic/node_modules/webpack/lib/Compiler.js:262:10) at applyPluginsAsyncSeries1.err (/Users/nikola/www/aces-ionic/node_modules/webpack/lib/Compiler.js:368:12) at next (/Users/nikola/www/aces-ionic/node_modules/tapable/lib/Tapable.js:218:11) at Compiler.compiler.plugin (/Users/nikola/www/aces-ionic/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4) at Compiler.applyPluginsAsyncSeries1 (/Users/nikola/www/aces-ionic/node_modules/tapable/lib/Tapable.js:222:13)

[olivermuc]

Also not working for me, I'm at:
[email protected]
ionic/[email protected]
and followed the CHANGELOG instructions re: angular 5 support.

Still getting errors when running: npm run build --prod

[12:50:16]  ionic-app-script task: "build" 
[12:50:16]  Error: Entry module not found: Error: Can't resolve '@angular-devkit/build-optimizer/webpack-loader' in 
            '/Users/Me/Ionic/project' resolve 
            '@angular-devkit/build-optimizer/webpack-loader' in...

[kensodemann]

@olivermuc - this issue here was really more of a question and not actually an issue (i.e. bug), and it was answered and closed here: https://github.com/ionic-team/ionic/issues/13310#issuecomment-341384639 since that answered the OP's question.

I think you would be better off following issue #13356 plus a handful of other issues across the Angular and rxjs repos. At this time, this _looks_ like a "you need to clean up your code" kind of thing, but I don't know that anyone has gotten that fully worked out yet, though some people have found solutions that work for them.

[olivermuc]

Got it. Thanks @kensodemann , 'will follow the issue mentioned.

[ChromaticMind]

@AndreaFranceschini those using ngx-translate need to upgrade to the latest version (npm i @ngx-translate/core@latest) and all works fine with Angular 5

[Zolomon]

What is the status of this issue?

[tgensol]

solved

[kensodemann]

Locking conversation on this as using Angular 5 with Ionic has been supported for a while now.