Hey everyone,
I recently started updating my company’s project’s capacitor. Along the way I updated Angular and Ionic package versions.
I 've come to a point where the project compiles with npm run start
and I get this error in the browser’s console which seems a bit cryptic:
[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled. (in polyfill.js: 12)
Error: NG0908
at new yr (main.js:23:165954)
at nD (main.js:23:227385)
at t.bootstrapModuleFactory (main.js:23:227397)
at main.js:23:228815
I find it quite hard to figure out what would be the issue so I hoping for your insight.
I can only guess that it could be a version compatibility between the packages since the original project was using Capacitor 1 beta & Angular 7.
I am a Vue dev and not at all familiar with Angular so nothing is obvious and any input could be helpful
Let me know if any additional info would be helpfull. Unfortunately, I cannot share the repo.
Here is my package.json in case it could be something obvious or at least a starting point.
{
"name": "projectName",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"update": "ng update"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.2.10",
"@angular/cdk": "^16.2.9",
"@angular/common": "^16.2.10",
"@angular/core": "^16.2.10",
"@angular/forms": "^16.2.10",
"@angular/material": "^16.2.9",
"@angular/platform-browser": "^16.2.10",
"@angular/platform-browser-dynamic": "^16.2.10",
"@angular/router": "^16.2.10",
"@awesome-cordova-plugins/camera": "6.4.0",
"@awesome-cordova-plugins/core": "6.4.0",
"@awesome-cordova-plugins/file": "6.4.0",
"@awesome-cordova-plugins/file-transfer": "6.4.0",
"@capacitor/android": "^5.5.0",
"@capacitor/cli": "^5.5.0",
"@capacitor/core": "^5.5.0",
"@capacitor/ios": "^5.5.0",
"@capacitor/keyboard": "5.0.6",
"@ionic-native/camera": "^5.36.0",
"@ionic-native/core": "^5.36.0",
"@ionic-native/crop": "^5.36.0",
"@ionic-native/file": "^5.36.0",
"@ionic-native/file-path": "^5.36.0",
"@ionic-native/file-transfer": "^5.36.0",
"@ionic-native/image-picker": "^5.36.0",
"@ionic-native/ionic-webview": "^5.36.0",
"@ionic-native/photo-library": "^5.36.0",
"@ionic-native/splash-screen": "^5.36.0",
"@ionic-native/status-bar": "^5.36.0",
"@ionic/angular": "^6.7.5",
"@ionic/angular-server": "^6.7.5",
"@ionic/storage": "^4.0.0",
"@ionic/storage-angular": "^4.0.0",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"cordova-browser": "7.0.0",
"cordova-plugin-camera": "7.0.0",
"cordova-plugin-device": "^2.1.0",
"cordova-plugin-file": "^8.0.0",
"cordova-plugin-file-transfer": "2.0.0",
"cordova-plugin-photo-library": "2.3.1",
"cordova-plugin-splashscreen": "^6.0.2",
"cordova-plugin-statusbar": "^3.0.0",
"cordova-plugin-telerik-imagepicker": "git+https://github.com/Telerik-Verified-Plugins/ImagePicker.git",
"cordova-sqlite-storage": "6.1.0",
"core-js": "^3.33.1",
"date-fns": "2.30.0",
"ionic-img-viewer": "^2.9.0",
"ionic-tags-input": "^0.1.2",
"ionic2-auto-complete": "^1.6.2-alpha",
"ios": "0.0.1",
"localforage": "^1.10.0",
"ngx-chips": "3.0.0",
"rxjs": "~7.8.1",
"tslib": "^2.6.2",
"zone.js": "^0.13.3"
},
"devDependencies": {
"@angular-devkit/architect": "~0.1602.7",
"@angular-devkit/build-angular": "~16.2.7",
"@angular-devkit/core": "~16.2.7",
"@angular-devkit/schematics": "~16.2.7",
"@angular/cli": "^16.2.7",
"@angular/compiler": "~16.2.10",
"@angular/compiler-cli": "~16.2.10",
"@angular/language-service": "~16.2.10",
"@ionic/angular-toolkit": "~10.0.0",
"@types/jasmine": "~5.1.1",
"@types/jasminewd2": "~2.0.12",
"@types/node": "^20.8.7",
"jasmine-core": "~5.1.1",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.2",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"ts-node": "~10.9.1",
"tslint": "~5.20.1",
"typescript": "^4.9.5"
},
"description": "An Ionic project"
}
This is the output of: npm run start
home/app$ npm run start
> projectName@0.0.1 start
> ng serve
Workspace extension with invalid name (defaultProject) found.
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.
DON'T USE IT FOR PRODUCTION!
****************************************************************************************
One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
Ignored browsers: chrome 60
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.js | main | 1.14 MB | 257.88 kB
styles.css, styles.js | styles | 248.72 kB | 43.14 kB
polyfills.js | polyfills | 125.64 kB | 30.55 kB
runtime.js | runtime | 3.20 kB | 1.49 kB
| Initial Total | 1.51 MB | 333.05 kB
Lazy Chunk Files | Names | Raw Size | Estimated Transfer Size
6501.js | swiper-bundle-28080340-js | 97.16 kB | 23.38 kB
polyfills-core-js.js | polyfills-core-js | 91.89 kB | 27.81 kB
5962.js | - | 81.60 kB | 8.46 kB
9555.js | pages-project-single-page-single-module | 74.55 kB | 14.79 kB
7059.js | - | 68.74 kB | 11.87 kB
5487.js | - | 48.23 kB | 4.65 kB
566.js | - | 43.45 kB | 9.42 kB
6304.js | - | 34.38 kB | 5.64 kB
3672.js | - | 28.51 kB | 4.91 kB
8577.js | - | 28.13 kB | 6.89 kB
1372.js | - | 26.13 kB | 5.00 kB
3998.js | - | 24.20 kB | 3.79 kB
8891.js | - | 24.19 kB | 4.77 kB
9731.js | pages-my-board-page-my-board-module | 23.11 kB | 4.45 kB
185.js | - | 22.61 kB | 5.69 kB
7666.js | - | 22.16 kB | 4.62 kB
4087.js | - | 21.70 kB | 3.41 kB
9420.js | - | 21.52 kB | 3.77 kB
9882.js | - | 21.47 kB | 3.58 kB
8382.js | - | 20.43 kB | 4.65 kB
4090.js | - | 20.36 kB | 3.12 kB
5454.js | - | 19.08 kB | 1.86 kB
polyfills-dom.js | polyfills-dom | 18.05 kB | 5.04 kB
9218.js | pages-questions-questions-module | 16.58 kB | 3.42 kB
6642.js | - | 16.54 kB | 3.37 kB
common.js | common | 16.38 kB | 4.55 kB
6754.js | - | 16.34 kB | 4.24 kB
4530.js | - | 15.70 kB | 2.86 kB
8866.js | - | 15.29 kB | 2.96 kB
9857.js | - | 15.03 kB | 2.74 kB
3734.js | - | 14.55 kB | 2.52 kB
7176.js | pages-explore-page-explore-module | 13.86 kB | 3.46 kB
505.js | - | 13.55 kB | 2.31 kB
5421.js | - | 12.36 kB | 4.10 kB
3150.js | - | 11.61 kB | 2.10 kB
8484.js | - | 11.50 kB | 2.62 kB
5675.js | - | 11.34 kB | 3.59 kB
6792.js | pages-step-page-step-module | 11.23 kB | 3.10 kB
1315.js | - | 11.15 kB | 1.37 kB
4764.js | - | 11.15 kB | 3.80 kB
4458.js | - | 10.71 kB | 2.58 kB
9820.js | - | 9.40 kB | 2.05 kB
3483.js | - | 8.87 kB | 2.12 kB
7635.js | - | 8.44 kB | 1.96 kB
895.js | pages-notifications-notifications-module | 8.39 kB | 2.48 kB
593.js | pages-location-location-module | 7.70 kB | 2.09 kB
8808.js | - | 7.54 kB | 2.65 kB
9992.js | - | 7.42 kB | 2.09 kB
8262.js | pages-register-register-module | 7.37 kB | 2.14 kB
2329.js | pages-login-login-module | 7.14 kB | 2.11 kB
433.js | - | 6.52 kB | 1.79 kB
8432.js | tabs-tabs-module | 6.50 kB | 1.73 kB
9793.js | - | 6.38 kB | 1.29 kB
8289.js | - | 6.20 kB | 1.48 kB
174.js | pages-forgot-password-forgot-password-module | 6.12 kB | 1.90 kB
5138.js | pages-notification-notification-module | 6.11 kB | 1.98 kB
9588.js | - | 5.97 kB | 1.50 kB
7547.js | pages-user-profile-components-edit-profile-edit-profile-module | 5.86 kB | 1.96 kB
7702.js | pages-profile-page-profile-module | 5.71 kB | 1.89 kB
6004.js | - | 5.49 kB | 1.92 kB
6673.js | - | 5.05 kB | 1.25 kB
5290.js | pages-search-search-module | 4.67 kB | 1.67 kB
3580.js | input-shims-8459e7d9-js | 4.57 kB | 1.78 kB
3544.js | - | 4.17 kB | 1007 bytes
2841.js | - | 3.76 kB | 1.27 kB
7465.js | - | 3.05 kB | 932 bytes
3079.js | pages-filter-filter-module | 2.80 kB | 1.10 kB
6009.js | pages-success-success-module | 1.88 kB | 902 bytes
5436.js | index-2061d5f6-js | 1.83 kB | 816 bytes
1745.js | - | 1.64 kB | 672 bytes
469.js | - | 1.50 kB | 508 bytes
8811.js | - | 1008 bytes | 542 bytes
5808.js | app-pages-project-list-page-projects-module | 815 bytes | 437 bytes
3837.js | status-tap-4d4674a1-js | 529 bytes | 326 bytes
Build at: 2023-10-23T11:23:41.633Z - Hash: 8b2fd0f8c8ea0a89 - Time: 20922ms
Warning: /node_modules/@ionic/storage/dist/esm/index.js depends on 'localforage'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
Additional info:
OS: Ubuntu 22.04
node: v16.20.2
npm: 8.19.4
ionic: 7.1.1