feat: Angular 10 support #248

hatsantos · 2020-06-25T08:34:22Z

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 · 2020-06-25T13:28:02Z

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 · 2020-06-26T03:49:47Z

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 · 2020-06-26T13:43:24Z

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 · 2020-06-26T15:23:14Z

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 · 2020-06-26T15:53:44Z

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 · 2020-06-26T15:57:32Z

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 · 2020-06-26T16:31:30Z

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 · 2020-06-26T16:34:12Z

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 · 2020-06-29T18:33:39Z

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 · 2020-06-30T22:10:27Z

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 · 2020-07-20T08:43:03Z

Hello!

Catching error while running command ng g component example

🐞 Bug report

Command (mark with an `x`)

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 · 2020-07-20T13:52:06Z

🎉 This issue has been resolved in version 2.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

liamdebeasi transferred this issue from ionic-team/ionic-framework Jun 26, 2020

mhartington mentioned this issue Jul 1, 2020

feat(): update schematics to support ng10 #251

Merged

mhartington closed this as completed in #251 Jul 20, 2020

Ionitron added the released label Jul 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Angular 10 support #248

feat: Angular 10 support #248

hatsantos commented Jun 25, 2020

mhartington commented Jun 25, 2020

andrewbrey commented Jun 26, 2020 •

edited

Loading

liamdebeasi commented Jun 26, 2020

andrewbrey commented Jun 26, 2020

liamdebeasi commented Jun 26, 2020

andrewbrey commented Jun 26, 2020

liamdebeasi commented Jun 26, 2020

liamdebeasi commented Jun 26, 2020 •

edited

Loading

KevinKelchen commented Jun 29, 2020 •

edited

Loading

bondseid commented Jun 30, 2020

qliqdev commented Jul 20, 2020

Ionitron commented Jul 20, 2020

feat: Angular 10 support #248

feat: Angular 10 support #248

Comments

hatsantos commented Jun 25, 2020

Feature Request

mhartington commented Jun 25, 2020

andrewbrey commented Jun 26, 2020 • edited Loading

liamdebeasi commented Jun 26, 2020

andrewbrey commented Jun 26, 2020

liamdebeasi commented Jun 26, 2020

andrewbrey commented Jun 26, 2020

liamdebeasi commented Jun 26, 2020

liamdebeasi commented Jun 26, 2020 • edited Loading

KevinKelchen commented Jun 29, 2020 • edited Loading

bondseid commented Jun 30, 2020

qliqdev commented Jul 20, 2020

🐞 Bug report

Command (mark with an x)

Is this a regression?

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

Ionitron commented Jul 20, 2020

andrewbrey commented Jun 26, 2020 •

edited

Loading

liamdebeasi commented Jun 26, 2020 •

edited

Loading

KevinKelchen commented Jun 29, 2020 •

edited

Loading

Command (mark with an `x`)