bug: Compiled files issue with angular 19

[devilalex505]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When I use the compiled file from www, i can't run the project. If go on the browser, I have this error : "NullInjectorError: No provider for ho!"

Expected Behavior

If i go on the browser, with the compiled files, the app works normally.

Steps to Reproduce

1. Install the last ionic/cli npm uninstall -g ionic npm install -g ionic

2. ionic start a starter project (example : tabs)

3. run ionic build

4. add a simple file inside the /www folder after the build (run.js) :

`const express = require('express'); const path = require('path'); const app = express();

/**

• Instead of build provide your build directory. */ app.use(express.static(path.join(__dirname, '')));

app.get('/*', function (req, res) { res.sendFile(path.join(__dirname, '', 'index.html')); });

var server = app.listen(9000, () => { var port = server.address().port; console.log('App listening at http://localhost:' + port); require('child_process').exec(start http://localhost:${server.address().port}); });`

5. execute "node run.js"

6. open the browser and try the app. Then observe the issue.

7. Bonus : If you add in the angular.json file "optimization:false" to the production configuration so it works. I think the problem come from the "uglification"

Code Reproduction URL

https://github.com/devilalex505/test-ez0kwm

Ionic Info

Ionic:

Ionic CLI : 7.2.0 Ionic Framework : @ionic/angular 8.4.1 @angular-devkit/build-angular : 19.0.6 @angular-devkit/schematics : 19.0.6 @angular/cli : 19.0.6 @ionic/angular-toolkit : 12.1.1

Capacitor:

Capacitor CLI : 6.2.0 @capacitor/android : 6.2.0 @capacitor/core : 6.2.0 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.11.0 npm : 10.2.4 OS : Windows 10

Additional Information

https://stackblitz.com/~/github.com/devilalex505/test-ez0kwm 1 . ng build 2 . node run.js

If downgrade angular to v18, no issue

[devilalex505]

I created a stackblitz :

https://stackblitz.com/~/github.com/devilalex505/test-ez0kwm 1 . ng build 2 . node run.js

[technbuzz]

May be no official support for version 19 yet

[kinggolf]

@devilalex505 I am seeing the same error. I can do non-production builds and ionic serve just fine. But production builds fail.

NullInjectorError: R3InjectorError(Platform: core)[i -> Os]: 
  NullInjectorError: No provider for Os!
⚡️  URL: capacitor://localhost/main.08517015048d961f.js
⚡️  [error] - {"name":"NullInjectorError","ngTempTokenPath":null,"ngTokenPath":["i","Os"]}
⚡️  main.08517015048d961f.js:1:1473064

[devilalex505]

Setting optimization to false on angular.json (as a temporary workaround) will make the app to complile again.

[...]
"configurations": {
  "production": {
+    "buildOptimizer": false,
+    "optimization": false,
[...]

Already said in the initial bug :

[NorthFred]

I have this issue in 2 projects when upgrading to Angular 19 (stand-alone). Running with ionic serve --configuration development works fine. The production build ionic serve --configuration production will fail with NullInjector errors. For now I need to stick to Angular 18.

[SteliosMoch]

I also have this issue when i upgraded my project from angular 18 to 19. When trying to run app in iOS i get this error: NullInjectorError: R3InjectorError(Platform: core)[t -> Cr]: NullInjectorError: No provider for Cr!

I did ionic start in order to create the blank project from ionic which has angular 19 already installed and i encounter the same issue.

[atremel]

+1

[sithwarrior]

I have the same issue and @devilalex505 fix with disabling optimisations work

[lucasrueda]

Same issue here. disabling optimizations working

[sithwarrior]

Ionic, could you prioritise this? because other settings in Angular, for "Production mode" such as PWA serviceworker, checks for production, by checking optimisations...

[atremel]

How do you classify this? We consider this a critical bug.

[atremel]

Still no answer? Is Angular still relevant to Ionic?

[NLueg]

Hey guys, I was able to solve it by just not using the new Angular builder. It seems like this is the only issue here. As the old builder via webpack is still supported we have no real disadvantages to staying at that builder - https://angular.dev/tools/cli/build-system-migration

During the migration, you can opt-out out of those changes. I just released my ionic App with SSR and Angular 19 on production

[glemoine-intouch]

+1 struggling with this as well. Any updates?

[rtpHarry]

I'm seeing similar problems, which I think are related to this thread. I have an ion-badge which sets its color dynamically eg:

                <ion-badge [color]="van.stateColor">
                  {{ van.stateLabel }}
                </ion-badge>

I've put logging in and the value is populated.

The same with an ion-toggle:

    <ion-toggle
      slot="end"
      class="ion-margin-start"
      aria-label="Toggle Premium Waitlist Enrollment"
      [checked]="vm.isEnrolled"
      (ionChange)="toggleWaitlist($event)"
    ></ion-toggle>

When run locally, its fine.

When compiled with optimisations and deployed, no badge colour, and ion-toggle is 0x0 pixels.

When compiled without optimisations, its fine.

I also tried just disabling minification, but it went back to no badge / and 0x0:

              "optimization": {
                "styles": {
                  "minify": false
                }
              }

I'm also using angular 19 & the new builder:

"@angular-eslint/builder": "^19.0.0",
    "@angular/common": "^19.0.0",

[rtpHarry]

It doesn't look like I followed up with how I solved / worked around this. Might be useful to somebody else that hits this issue.

I put a dummy widget in my app root which is visually hidden, but used the bits that were getting tree shaken out.

This caused it to include the missing styles in the production build.

[pbklink]

My variation of this issue cropped up again. Realised that it was due to importing IonicModule from @ionic/angular instead of importing all the individual Ionic components from @ionic/angular/standalone (had missed some files in the conversion to standalone). Once these imports were corrected, application worked correctly in production.