bug: `ng add` does not work with standalone angular projects

[luisbytes]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Currently the "ng add @ionic/angular" schematics do not support an Angular v17 project created with the default Angular v17 starter template.

Describe the Use Case

Adding Ionic to an existing Angular v17 project.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[sean-perkins]

Hello @luisbytes thanks for reporting this! I think we can track this as a bug instead of a feature.

When running ng add @ionic/angular you are presented with the following error:

Could not find file for path: src/app/app.module.ts

This comes from:

ionic-framework/packages/angular/src/schematics/utils/ast.ts

Line 30 in a000dd2

addModuleImportToModule(host, normalize(`${projectSourceRoot}/app/app.module.ts`), moduleName, importSrc);

We need to update this logic to use the standalone usage with standalone projects.

[sean-perkins]

Here is a dev-build you can test with:

ng add @ionic/angular@7.5.5-dev.11699920973.14e18bf6

[luisbytes]

@sean-perkins This configuration is added in angular.json architect.

"ionic-cordova-serve": {
  "builder": "@ionic/angular-toolkit:cordova-serve",
  "options": {
    "cordovaBuildTarget": "v17:ionic-cordova-build",
    "devServerTarget": "v17:serve"
  },
  "configurations": {
    "production": {
      "cordovaBuildTarget": "v17:ionic-cordova-build:production",
      "devServerTarget": "v17:serve:production"
    }
  }
},
"ionic-cordova-build": {
  "builder": "@ionic/angular-toolkit:cordova-build",
  "options": {
    "browserTarget": "v17:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "v17:build:production"
    }
  }
}

I don't know how necessary it is, what I notice is that the @ionic/angular-toolkit schematics are not added to the angular.json.

[sean-perkins]

Thanks for testing @luisbytes! I believe the cordova configurations are legacy, but intentional here - I'll double check with the larger Capacitor team. We will be removing these in the future, but likely over a major version of Ionic Framework.

I'll look into setting up the schematicCollections and other fields used by the @ionic/angular-toolkit.

[sean-perkins]

Here is an updated dev-build for the @ionic/angular-toolkit changes: 7.5.5-dev.11699980334.140f8b95.

The cordova configurations are going to stick around for now, but you can absolutely remove them from your project after running the command if you are using Capacitor or don't need it. This will get removed in the future, but we want to be kind to the community and ecosystem with migrating over a major release and with technical resources for general education and migration.

[luisbytes]

Hi @sean-perkins thanks, the schematics configuration is now added to angular.json.
Now I have another problem when executing ionic g page home I get that response.

> ng generate page home --project=app
Could not find an NgModule. Use the skip-import option to skip importing in NgModule.
[ERROR] Could not generate page.

I think this problem is not part of @ionic/angular but of @ionic/angular-toolkit. I'm not sure what configuration is needed, because in a project generated with ionic start with the standalone starter template it generates them correctly.

[sean-perkins]

@luisbytes perfect, thank you again for testing!

I know Mike has some updates planned for @ionic/angular-toolkit. I'll prioritize getting the initial fixes to making the schematic function out, then we can work to get the underlying commands working again.

The schematics as part of this repo are purely for the add operation, so I do believe you are correct with this being from @ionic/angular-toolkit.

[luisbytes]

Thank you, everything looks perfect @sean-perkins

[luisbytes]

@sean-perkins One doubt, the ionic.config.json file is not created, it is necessary to execute ionic init.

Thanks!