NullInjectorError: R3InjectorError(Platform: core)[t -> Cr]

Ionic Framework
1

I just started a tabs project and found that I can only make it work with live reload, a regular ionic cap run won’t work for iOS nor Android.

node: 22.12.0
npm: 10.9.0
@ionic/cli: 7.2.0
@angular/cli: 19.0.6

Here’s my package.json:

{
  "name": "tema-1",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^19.0.0",
    "@angular/common": "^19.0.0",
    "@angular/compiler": "^19.0.0",
    "@angular/core": "^19.0.0",
    "@angular/forms": "^19.0.0",
    "@angular/platform-browser": "^19.0.0",
    "@angular/platform-browser-dynamic": "^19.0.0",
    "@angular/router": "^19.0.0",
    "@capacitor/android": "6.2.0",
    "@capacitor/app": "6.0.2",
    "@capacitor/core": "6.2.0",
    "@capacitor/haptics": "6.0.2",
    "@capacitor/keyboard": "6.0.3",
    "@capacitor/status-bar": "6.0.2",
    "@ionic/angular": "^8.0.0",
    "ionicons": "^7.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.0.0",
    "@angular-eslint/builder": "^19.0.0",
    "@angular-eslint/eslint-plugin": "^19.0.0",
    "@angular-eslint/eslint-plugin-template": "^19.0.0",
    "@angular-eslint/schematics": "^19.0.0",
    "@angular-eslint/template-parser": "^19.0.0",
    "@angular/cli": "^19.0.0",
    "@angular/compiler-cli": "^19.0.0",
    "@angular/language-service": "^19.0.0",
    "@capacitor/cli": "6.2.0",
    "@ionic/angular-toolkit": "^12.0.0",
    "@types/jasmine": "~5.1.0",
    "@typescript-eslint/eslint-plugin": "^8.18.0",
    "@typescript-eslint/parser": "^8.18.0",
    "eslint": "^9.16.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsdoc": "^48.2.1",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~5.1.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.6.3"
  },
  "description": "An Ionic project"
}

I’m getting a blank screen with these logs in the console for both platforms:

Screenshot 2024-12-30 at 20.51.45
Screenshot 2024-12-30 at 20.51.451920×1779 217 KB

I’m quite lost. Any ideas?

1 Like
2

I found this bug with angular 19

I followed the suggestion and added “optimization”:false to the production configuration in the angular.json file. It worked for me.

2 Likes
3

Good to know I’m not alone in this! I have the same Node.js, npm, Ionic, and Angular CLI versions, and I’m hitting the same error.

Here’s what I’ve tried so far, with no luck:

  1. Removed the android folder.
  2. Removed the www folder.
  3. Reran ionic build.
  4. Reran npx cap add android.
  5. Ran npx cap sync.
  6. Ran ionic cap open android.

I’ve also tried:

  • Multiple Ionic starter templates (tabs, menu, blank).
  • Using ionic build --prod.
  • Testing on a physical Pixel 7a and a few virtual devices.

Let me know if you’ve come across anything that works!

1 Like
4

It could work as a workaround until there’s an actual fix.
Nice finding!
Thanks @giammariomarini!

Will post if any updates about a solution!

5

The workaround works for me too. thanks!

6

the solution is suggested in this post

and NorthFred also suggest paying attention and using it with caution

7

image
image640×228 8.17 KB

I met the same issue after upgrading to angular 19