Path problem occurs after updating to angular 11

Ionic Framework
1

ng.cmd run app:ionic-cordova-build:production --platform=android
An unhandled exception occurred: Cannot find module ‘@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/utils’
Require stack:

  • E:\net\UT.APP\node_modules@ionic\angular-toolkit\builders\utils\index.js

  • E:\net\UT.APP\node_modules@ionic\angular-toolkit\builders\cordova-build\index.js

  • E:\net\UT.APP\node_modules@angular\cli\node_modules@angular-devkit\architect\node\node-modules-architect-host.js

  • E:\net\UT.APP\node_modules@angular\cli\node_modules@angular-devkit\architect\node\index.js

  • E:\net\UT.APP\node_modules@angular\cli\models\architect-command.js

  • E:\net\UT.APP\node_modules@angular\cli\commands\run-impl.js

  • E:\net\UT.APP\node_modules@angular-devkit\schematics\tools\export-ref.js

  • E:\net\UT.APP\node_modules@angular-devkit\schematics\tools\index.js

  • E:\net\UT.APP\node_modules@angular\cli\utilities\json-schema.js

  • E:\net\UT.APP\node_modules@angular\cli\models\command-runner.js

  • E:\net\UT.APP\node_modules@angular\cli\lib\cli\index.js

  • E:\net\UT.APP\node_modules@angular\cli\lib\init.js

  • E:\net\UT.APP\node_modules@angular\cli\bin\ng
    See “C:\Users\zhang\AppData\Local\Temp\ng-BHozIw\angular-errors.log” for further details.
    [ERROR] An error occurred while running subprocess ng.

      ng.cmd run app:ionic-cordova-build:production --platform=android exited with exit code 127.

  Re-running this command with the --verbose flag may provide more information.
3 Likes
2

I faced same problem. Did you find solution for it?

3

Wait ionic team is working on angular-toolkit may ship in next couple of weeks. Rollback to ng10 for now

4

I just rolled back @angular-devkit/build-angular to 0.1002.0 and it seemed to help.

5

Has been fixed:

6

This has been fixed in @ionic/angular-toolkit@3.0.

For folks updating to ng11, please upgrade. For folks still working with angular 10, stay on v2 of the angular-toolkit.

2 Likes
7

Having this same error after updating to Ionic CLI 6.12.4, but I am still with Angular 9:

$ ionic info

Ionic:

   Ionic CLI                     : 6.12.4 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.2
   @angular-devkit/build-angular : 0.1101.2
   @angular-devkit/schematics    : 9.1.13
   @angular/cli                  : 9.1.13
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 6 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.15.1
   native-run (update available: 1.3.0)   : 0.2.7

System:

   Android SDK Tools : 26.1.1 (/Users/victorespina/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v12.18.0 (/usr/local/bin/node)
   npm               : 6.14.11
   OS                : macOS Catalina
   Xcode             : Xcode 12.2 Build version 12B45b
8

Please provide a sample project to inspect. Push something to github.
We cannot debug this without a sample.

9

Just start a new Ionic project using blank template and cordova, add android platform and then run:

ionic cordova build android --prod

error will popup almost immediately (under the provided configuration, of course).

10

Just created a new project with the updates deps (to the latest stable releases)

And it works as intended.
If there was something broken, it’s been fixed in a new release (which you should be updating to)

11

I just tried that on my empty project, running these commands:

ng update @angular/core @angular/cli
npm install @ionic/angular-toolkit@latest

and now I can build on this blank project. Then I applied those same commands to my original project, so versions are now like this:

$ ionic info

Ionic:

   Ionic CLI                     : 6.12.4 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.3
   @angular-devkit/build-angular : 0.1100.7
   @angular-devkit/schematics    : 11.0.7
   @angular/cli                  : 11.0.7
   @ionic/angular-toolkit        : 3.0.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 6 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.15.1
   native-run (update available: 1.3.0)   : 0.2.7

System:

   Android SDK Tools : 26.1.1 (/Users/victorespina/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v12.18.0 (/usr/local/bin/node)
   npm               : 6.14.11
   OS                : macOS Catalina
   Xcode             : Xcode 12.2 Build version 12B45b

Tried to build the project but I got a different error:

An error occurred during the build:
Error: NGCC failed.
    at NgccProcessor.process (/Users/.../cfp/node_modules/@ngtools/webpack/src/ngcc_processor.js:129:19)
    at /Users/.../cfp/node_modules/@ngtools/webpack/src/ivy/plugin.js:95:27

Then, I tried these steps:

  1. Removed android platform (ionic cordova platform remove android)
  2. Deleted node_modules folder
  3. Manually updated dependencies versions on package.json, according to the versions on the package.json from my blank project.
  4. Ran npm install
  5. Reinstalled android platform (ionic cordova platform add android)

And now project is building normally again.

Honestly, I LOVE working with Ionic, but I think 2,3 and 4 times before installing any updates… this is the 3rd time I spent hours trying to figure it out a problem after updating Ionic :frowning:

Anyway, thanks for your help.

12

Just out of curiousity, if you have an Angular 9 or 10 project, wouldn’t it be easier to create a new A11 project and then replace the code as well as some of the config stuff? More similar to rebuilding from scratch, and more remote from trying the CLI tools to upgrade?

13

I spoke too quicky… yes, project compiles but now the app gets stuck in a white screen and main page is not being loaded… :frowning:

14

Is not that easy to migrate a big project to a fresh created project. But, besides that, it shouldn’t be necessary!! I am currently working on 4 different Ionic projects, so I would have to do that “create-empty-project, move code, move dependencies” for each one of them ??

I don’t think thats the way.

15

Missed a bit here…

Most of the errors and hiccups you are facing have nothing to do with ionic, but issues with your Angular setup. I asked to inspect your project or push something to github to look for this reason.

If you are maintaining multiple projects, your best bet to make sure you don’t run into these situations is to update them and not let them get stale. Tools likehttps://update.angular.io can help you in your migration process.

You shouldn’t have to create a brand new project to migrate things over, the Angular CLI has the things needed to support updates.

If you can @vespinasgmailcom please share your package.json.

16

Maybe problems are related to Angular and not Ionic, but I didn’t update Angular; I updated Ionic CLI and that update triggered these problems. Maybe this version of Ionic CLI required a newer version of Angular, but if that was the case, it should warned me before hand instead of breaking my project.

You said that I should keep my Ionic projects updated, but that’s exactly the problem: I never know if the new versions will break something in my code… last time this happened, I was in a hurry to release a new version of a client’s app, I had to spent almost 3 DAYS to find a way to get my project building again… so you would understand that after that (and that wasn’t the first time either that happened to me), I am in no hurry to update Ionic.

Regarding package.json, this was my original package.json before updating to CLI 6.12.4 (when my project compiled perfectly fine):

{
  "name": "com.noi.payapp",
  "version": "0.0.1",
  "author": "NOIQS",
  "homepage": "http://noiqs.com",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/forms": "~9.1.6",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "@capacitor/core": "2.1.2",
    "@ionic-native/android-permissions": "^5.31.1",
    "@ionic-native/app-version": "^5.27.0",
    "@ionic-native/core": "^5.0.7",
    "@ionic-native/device": "^5.27.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.2.2",
    "@ionic/storage": "^2.2.0",
    "cordova-android": "^9.0.0",
    "cordova-plugin-app-version": "^0.1.9",
    "rxjs": "~6.5.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.5",
    "@angular/cli": "~9.1.5",
    "@angular/compiler": "~9.1.6",
    "@angular/compiler-cli": "~9.1.6",
    "@angular/language-service": "~9.1.6",
    "@capacitor/cli": "2.1.2",
    "@ionic/angular-toolkit": "^2.2.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "com-noi-clover-payment-connector": "file:plugins_src/CloverPaymentConnector",
    "cordova-plugin-android-permissions": "^1.1.2",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "^7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-app-version": {},
      "com-noi-clover-payment-connector": {}
    },
    "platforms": [
      "android"
    ]
  }
}

this is the package.json after updating to Ionic CLI 6.12.4, when build got broken:

{
  "name": "com.noiqs.payapp",
  "version": "0.0.1",
  "author": "NOIQS",
  "homepage": "http://noiqs.com",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^9.1.13",
    "@angular/core": "^9.1.13",
    "@angular/forms": "^9.1.13",
    "@angular/platform-browser": "^9.1.13",
    "@angular/platform-browser-dynamic": "^9.1.13",
    "@angular/router": "^9.1.13",
    "@capacitor/core": "2.1.2",
    "@ionic-native/android-permissions": "^5.31.1",
    "@ionic-native/app-version": "^5.31.1",
    "@ionic-native/core": "^5.31.1",
    "@ionic-native/device": "^5.31.1",
    "@ionic-native/splash-screen": "^5.31.1",
    "@ionic-native/status-bar": "^5.31.1",
    "@ionic/angular": "^5.5.3",
    "@ionic/storage": "^2.3.1",
    "cordova-plugin-app-version": "^0.1.12",
    "rxjs": "~6.5.1",
    "tslib": "^1.14.1",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1101.2",
    "@angular/cli": "~9.1.5",
    "@angular/compiler": "^9.1.13",
    "@angular/compiler-cli": "^9.1.13",
    "@angular/language-service": "^9.1.13",
    "@capacitor/cli": "2.1.2",
    "@ionic/angular-toolkit": "^2.3.3",
    "@types/jasmine": "^3.5.14",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.19.15",
    "codelyzer": "^5.1.2",
    "com-noi-clover-payment-connector": "file:plugins_src/CloverPaymentConnector",
    "cordova-android": "^9.0.0",
    "cordova-plugin-android-permissions": "^1.1.2",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "^7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "^6.1.3",
    "typescript": "~3.8.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-app-version": {},
      "com-noi-clover-payment-connector": {}
    },
    "platforms": [
      "android"
    ]
  }
}

and this is my current package.json, after updating to latest version of Ionic and Angular (and now build is working again):

{
  "name": "com.noi.payapp",
  "version": "0.0.1",
  "author": "NOIQS",
  "homepage": "http://noiqs.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~11.0.5",
    "@angular/core": "~11.0.5",
    "@angular/forms": "~11.0.5",
    "@angular/platform-browser": "~11.0.5",
    "@angular/platform-browser-dynamic": "~11.0.5",
    "@angular/router": "~11.0.5",
    "@capacitor/core": "2.1.2",
    "@ionic-native/android-permissions": "^5.31.1",
    "@ionic-native/app-version": "^5.31.1",
    "@ionic-native/core": "^5.31.1",
    "@ionic-native/device": "^5.31.1",
    "@ionic-native/splash-screen": "^5.31.1",
    "@ionic-native/status-bar": "^5.31.1",
    "@ionic-native/unique-device-id": "^5.31.1",
    "@ionic/angular": "^5.5.2",
    "@ionic/storage": "^2.3.1",
    "cordova-plugin-app-version": "^0.1.12",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.5",
    "@angular/cli": "~11.0.5",
    "@angular/compiler": "~11.0.5",
    "@angular/compiler-cli": "~11.0.5",
    "@angular/language-service": "~11.0.5",
    "@capacitor/cli": "2.1.2",
    "@ionic/angular-toolkit": "^3.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "com-noi-clover-payment-connector": "file:plugins_src/CloverPaymentConnector",
    "cordova-android": "^9.0.0",
    "cordova-plugin-android-permissions": "^1.1.2",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-uniquedeviceid": "^1.3.2",
    "cordova-plugin-whitelist": "^1.3.4",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "^7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "^6.1.3",
    "typescript": "~4.0.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-uniquedeviceid": {},
      "com-noi-clover-payment-connector": {}
    },
    "platforms": [
      "android"
    ]
  }
}

The problem with the white screen turned to be my fault and its already fixed and the app loads and works as expected.

Hope this helps for something.

Victor

17

This was your problem when you went to update. Somehow you get a newer version of build-angular, which does the actual building and process things from the Ionic CLI. Not sure how that happened…

But to your other point, the ionic cli doesn’t have a hard dep or connection to the Angular CLI. All it does when your run a build is call ng run my-app:build and pass the appropriate flags to the angular CLI. If the build-angular package got updated, that would explain why things broke.

18

I understand your point. All I can do is to explain what happened as detailed as I can.

This morning I was testing my app and my plugin without problems. At some point, I came to a post explaining that starting Api Level 26, including required android permissions on the config.xml file was not longer enough and I have to use the AndroidPermissions plugin. I installed that plugin and at that point npm reminded me that a new version of Ionic CLI was available (6.12.3 → 6.12.4). I then proceeded to update the Ionic CLI and then 6 vulnerabilities were identified, 3 of them critical.

I tried to fix them with npm audit fix without luck and then I started to look for information. At some point I updated npm to the latest version, but that didn’t work out. I found the option --legacy-peer-deps, so I ran npm audit fix --legacy-peer-deps, and that solved the vulnerabilities, but then I got a new error when trying to add my plugin again.

Back to search the web again for a solution, I found a post that explained that npm v7 was not compatible with current version of cordova, so I downgraded to npm v6 and that solved my plugin problem, but then when I tried to build the app the utils problem raised, and that problem only got solved by updating Ionic and Angular to the latest version.

As you can see, at no moment I manually updated angular or any of its dependencies.