Skip to content

Angular "ng add" schematic uses hardcoded project key #4191

Description

@SchnWalter

Description:

The new ng add @ionic/angular support (#3369) uses a hardcoded app project key and the updated angular.json file is invalid.

Steps to Reproduce:

  • Install Angular CLI:
    npm install -g @angular/cli@latest
  • Generate a new Angular project and give it a name, either by using the interactive mode or via an argument:
    ng new test-ionic-add
  • Go to the newly generated project directory:
    cd test-ionic-add/
  • Use the schematic from the published package to add ionic support to the project:
    ng add @ionic/angular
  • Open the updated angular.json and check the targets for the new builders and you will see that they all reference a project named app, instead of using the one determined in ngAdd. For example app:build should be test-ionic-add:build. With this fixed and an added ionic.config.json file, you can run the project in Ionic Lab

Output:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "test-ionic-add": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        // ...
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "test-ionic-add"
}

My ionic info:

/workspace/dev/test-ionic-add> ionic info
[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 5.4.4

Utility:

   cordova-res : not installed
   native-run  : 0.2.9 

System:

   NodeJS : v10.16.3
   npm    : 6.12.0
   OS     : Linux 4.12


Other Information:

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions