feat: Angular 10 support

[hatsantos]

Feature Request

Update Ionic framework to support Angular 10 and typescript 3.9.

Ionic version:
[x] 5.x

Describe the Feature Request
The new version of Angular came out (Angular 10).
Update Ionic Angular dependencies to support the new version of Angular.
Angular 10 also pushes Typescript to version 3.9.

Describe Preferred Solution
Update Ionic Angular dependencies to support the new version of Angular.

Additional Context
Blog post about release: https://blog.angular.io/version-10-of-angular-now-available-78960babd41
Change Log v10: https://github.com/angular/angular/blob/master/CHANGELOG.md

[mhartington]

Our testing hasn't really shown any major blockers from having end users just update apps. Are you seeing anything different though?

As far as updating the deps that we use to build with, we have a different process for that we follow for that (listed here)

[andrewbrey]

I did have an issue using the latest angular, ionic, and ionic-cli. I'm not certain if this is an issue that should be in the ionic-cli project or not as it appears to have to do with ionic's usage of angular schematics (let me know if this should become an issue in another repo):

$ ionic g page home
> ng generate page home --project=app
An unhandled exception occurred: Cannot find module '@schematics/angular/utility/project'
Require stack:
- /redacted/path/to/app/node_modules/@ionic/angular-toolkit/schematics/page/index.js
- /redacted/path/to/app/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /redacted/path/to/app/node_modules/@angular-devkit/schematics/tools/index.js
- /redacted/path/to/app/node_modules/@angular/cli/utilities/json-schema.js
- /redacted/path/to/app/node_modules/@angular/cli/models/command-runner.js
- /redacted/path/to/app/node_modules/@angular/cli/lib/cli/index.js
- /redacted/path/to/app/node_modules/@angular/cli/lib/init.js
- /redacted/path/to/app/node_modules/@angular/cli/bin/ng
See "/tmp/ng-8qbJHz/angular-errors.log" for further details.
[ERROR] Could not generate page.

And here's the output of ionic info:

Ionic:

   Ionic CLI                     : 6.10.1 (/redacted/path/to/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.2
   @angular-devkit/build-angular : 0.1000.0
   @angular-devkit/schematics    : 10.0.0
   @angular/cli                  : 10.0.0
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   Android SDK Tools : 26.1.1 (/redacted/path/to/.android/sdk)
   NodeJS            : v12.18.1 (/usr/bin/node)
   npm               : 6.14.5
   OS                : Linux 5.4

[liamdebeasi]

Can you provide a full repo we can use to reproduce the issue? I am not getting this in my Ionic + Angular 10 application.

[andrewbrey]

Can you provide a full repo we can use to reproduce the issue? I am not getting this in my Ionic + Angular 10 application.

@liamdebeasi Sure, https://github.com/andrewbrey/angular-10-ionic-issue-demo

[liamdebeasi]

Thanks! Looks like https://github.com/ionic-team/angular-toolkit needs an update. The exports for @schematics/angular seem to have moved with ng10. I will look into this some more.

[andrewbrey]

Thanks! Looks like https://github.com/ionic-team/angular-toolkit needs an update. The exports for @schematics/angular seem to have moved with ng10. I will look into this some more.

Thank you very much, and yea that's my read on it too 👍

Let me know if there's any further info I can provide to help triage, cheers!

[liamdebeasi]

I'm going to move this over to the @ionic/angular-toolkit repo so we can track progress there. This seems to be the only blocker for using Ionic with Angular 10. Thanks!

[liamdebeasi]

For context, Angular removed some code in the latest version of @schematics/angular that is causing @ionic/angular-toolkit to break when using a component generator.

Affected code:

angular-toolkit/schematics/component/index.ts

Line 5 in 9f279e1

import { buildDefaultPath, getProject } from '@schematics/angular/utility/project';

angular-toolkit/schematics/page/index.ts

Line 5 in 9f279e1

import { buildDefaultPath, getProject } from '@schematics/angular/utility/project';

Here is the PR that removed the code on Angular's side: angular/angular-cli#17597

One thought is to maybe move to using the getWorkspace function and query the result for the user's project. cc @mhartington

[KevinKelchen]

FWIW, while I haven't had an issue with Ionic on Angular 10, I did see the Angular Update Guide say, "Stop using styleext or spec in your Angular schematics. ng update will migrate you automatically."

For us, ng update made no changes although the angular.json has the following:

  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }

Not sure if that Angular CLI migration is targeted towards schematic authors or end users.

Using the Ionic CLI I'm able to successfully generate Pages and Components including their .scss files.

Update: Upon closer inspection, although my project's Angular runtime dependencies and the Angular CLI itself were on v10, other tooling packages such as @schematics/angular, @angular-devkit/core, and @angular-devkit/schematics were still on v9.1.8. I noticed this after running npx ng v.

The issue was my package-lock.json file had those packages resolved to the older version. To update them to v10 I ran npm i -D @schematics/angular@10.0.0. That updated all 3 packages to v10 in the lockfile. Since that's not a normal direct dependency, I then manually removed it from package.json and ran npm i to potentially update the lockfile to reflect that removal. After doing this the result of running npx ng v again looked good--everything on v10.

I then tried generating a Page with the Ionic CLI and got the same error as others: Cannot find module '@schematics/angular/utility/project'.

[bondseid]

I did have an issue using the latest angular, ionic, and ionic-cli. I'm not certain if this is an issue that should be in the ionic-cli project or not as it appears to have to do with ionic's usage of angular schematics (let me know if this should become an issue in another repo):

$ ionic g page home
> ng generate page home --project=app
An unhandled exception occurred: Cannot find module '@schematics/angular/utility/project'
Require stack:
- /redacted/path/to/app/node_modules/@ionic/angular-toolkit/schematics/page/index.js
- /redacted/path/to/app/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /redacted/path/to/app/node_modules/@angular-devkit/schematics/tools/index.js
- /redacted/path/to/app/node_modules/@angular/cli/utilities/json-schema.js
- /redacted/path/to/app/node_modules/@angular/cli/models/command-runner.js
- /redacted/path/to/app/node_modules/@angular/cli/lib/cli/index.js
- /redacted/path/to/app/node_modules/@angular/cli/lib/init.js
- /redacted/path/to/app/node_modules/@angular/cli/bin/ng
See "/tmp/ng-8qbJHz/angular-errors.log" for further details.
[ERROR] Could not generate page.

And here's the output of ionic info:

Ionic:

   Ionic CLI                     : 6.10.1 (/redacted/path/to/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.2
   @angular-devkit/build-angular : 0.1000.0
   @angular-devkit/schematics    : 10.0.0
   @angular/cli                  : 10.0.0
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   Android SDK Tools : 26.1.1 (/redacted/path/to/.android/sdk)
   NodeJS            : v12.18.1 (/usr/bin/node)
   npm               : 6.14.5
   OS                : Linux 5.4

I am facing the same issue after upgrading from ionic 4 and angular 8.

[qliqdev]

Hello!

Catching error while running command ng g component example

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: Working well

🔬 Minimal Reproduction

After updating to "@schematics/angular": "^10.0.3" command ng g component example breaks
in "@schematics/angular": "^9.1.11" everything is OK.

🔥 Exception or Error

An unhandled exception occurred: Cannot find module '@schematics/angular/utility/project'
Require stack:
- .../node_modules/@ionic/angular-toolkit/schematics/component/index.js
- .../node_modules/@angular-devkit/schematics/tools/export-ref.js
- .../node_modules/@angular-devkit/schematics/tools/index.js
- .../node_modules/@angular/cli/utilities/json-schema.js
- .../node_modules/@angular/cli/models/command-runner.js
- .../node_modules/@angular/cli/lib/cli/index.js
- .../.npm-global/lib/node_modules/@angular/cli/lib/init.js
- .../.npm-global/lib/node_modules/@angular/cli/bin/ng
See "/private/var/folders/2k/vlq4_8v57_98l_9rvxwmj1km0000gn/T/ng-aqdfcZ/angular-errors.log" for further details.

🌍 Your Environment

Angular CLI: 10.0.3
Node: 12.16.3
OS: darwin x64

Angular: 10.0.4
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: 

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1000.3 (cli-only)
@angular-devkit/build-angular   0.1000.3
@angular-devkit/core            10.0.3
@angular-devkit/schematics      10.0.3
@angular/cli                    10.0.3
@schematics/angular             10.0.3
@schematics/update              0.1000.3 (cli-only)
rxjs                            6.6.0
typescript                      3.9.7


ionic -v
6.10.1

Anything else relevant?

[Ionitron]

🎉 This issue has been resolved in version 2.3.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀