Unable to add Ionic Framework using Angular CLI

[ghost]

Describe the bug

I'm trying to migrate some UI code from an existing Ionic/Angular app, instead of rewriting everything without Ionic, but the ng add @ionic/angular command is failing as follows:

$ ng add @ionic/angular
ℹ Using package manager: npm
✔ Found compatible package version: @ionic/angular@5.6.4.
✔ Package information loaded.
✔ Package successfully installed.
Invalid projectType for angular-electron: undefined

Am I missing something here? Surely this should "just work"? FWIW, I did work out that the error is being thrown from the following line in the Ionic Framework "Angular Schematics" configuration: https://github.com/ionic-team/ionic-framework/blob/2d07d8216af908b181c5e7e438e79a049bb6d8c2/angular/src/schematics/utils/config.ts

But I suspect if it was an Ionic issue, there would be many, many more bug reports and support requests floating around..

To Reproduce

Steps to reproduce the behavior:

1. clone repo and checkout commit at the 9.0.7 tag
2. install dependencies
3. update Angular using ng update @angular/cli@11 @angular/core@11
4. try add Ionic Framework using ng add @ionic/angular
5. ..observe error output

Expected behavior

I would expect the command to add the Ionic Framework as intended..

Screenshots

n/a

Additional context

• OS: Linix Pop!_OS 20.10
• Node 14.16.0
• Ionic CLI 6.13.1
• Angular 11.2.8

[maximegris]

You can't use directly ng add @ionic/angular because @ionic/angular schematics is waiting for @angular-devkit/build-angular:browser but we use @angular-builders/custom-webpack:browser in order to inject custom configuration during webpack compilation.

[ghost]

Gotcha, thanks for the clarification.

[sdsanders]

For anyone else that runs into this - I was able to get around it by temporarily changing the builder in my angular.json to @angular-devkit/build-angular:browser, run ng add @ionic/angular, and change it back to @angular-builders/custom-webpack:browser afterwards and everything works.