NG0908 error observed

[stanchev89]

Which @angular/* package(s) are the source of the bug?

zone.js, Don't known / other

Is this a regression?

Yes

Description

Hey everyone! About a month and a half ago, we included monitoring events in the Angular bootstrap failure events to gain a clearer understanding of all the cases where the app is broken.
We’re already aware of the typical errors for unsupported (old) browsers like “ut.flat is not a function,” and they’re not a major concern.
However, in the past 3-4 weeks, we’ve been noticing errors named NG0908, and their count has reached around 850 per week.

I’ve been trying to gather more information about this particular error, but there isn’t much available. It’s not documented in the official Angular error list https://angular.io/errors. The only source I found mentioning this error is https://stackoverflow.com/questions/75485862/error-conflict-multiple-chunks-emit-assets-to-the-same-filename-app-js-chunks.

Could you provide assistance in identifying the source of the issue and suggesting appropriate actions to resolve it?

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Error: NG0908

Please provide the environment you discovered this bug in (run ng version)

@angular-devkit/architect       0.1502.2
@angular-devkit/build-angular   15.2.2
@angular-devkit/core            15.2.2
@angular-devkit/schematics      15.2.2
@angular/cdk                    15.2.9
@angular/material               15.2.9
@schematics/angular             15.2.2
rxjs                            7.5.7
typescript                      4.9.5


Node: 16.19.1

Anything else?

No response

[pkozlowski-opensource]

The error is reported when Angular can't see zone.js loaded. Sadly, this is all we can say without more info and reproduce scenario.

[leo6104]

In my case, i got the same error in production and its call stack trace is related with hydrate function.

angular/packages/core/src/di/r3_injector.ts

Line 387 in 254023a

record.value = record.factory!();

the related codes is here. (22:120020 line in vendor.js)

we inject SentryErrorHandler into ErrorHandler through FactoryProvider pattern with instantiate directly (new constructor)

  {
    provide: ErrorHandler,
    useFactory: (viewerCountry: ViewerCountryService, translate: TranslateService) => {
      return new SentryErrorHandler(viewerCountry, translate);
    },
    deps: [ ViewerCountryService, TranslateService ],
  },

// <-- No assign @Injectable() decorator
export class SentryErrorHandler extends ErrorHandler {
  constructor(
    private viewerCountry: ViewerCountryService,
    private translate: TranslateService
  ) {
    super();
  }

    handleError(err: any): void {
       ...
   }
} 

In the two dependencies classes ViewerCountryService TranslateService, we use inject function to get other DI classes. I think it might be a problem.

To fix the issue, I changed like below. (avoid the record.factory!() call condition) and I will monitor sentry logs in production.

@Injectable()
export class SentryErrorHandler extends ErrorHandler {
  viewerCountry = inject(ViewerCountryService);
  translate = inject(TranslateService);

  handleError(err: any): void {
    ...
  }
} 

  {
    provide: ErrorHandler,
    useClass: SentryErrorHandler,
  },

Or, i don't know this new approach can solve the issue but the idea is wrapping new SentryErrorHandler() with injector.runInContext

 {
    provide: ErrorHandler,
    useFactory: (viewerCountry: ViewerCountryService, translate: TranslateService, injector: Injector) => {
      return injector.runInContext(() => new SentryErrorHandler(viewerCountry, translate));
    },
    deps: [ ViewerCountryService, TranslateService, Injector ],
  },

[jstnjs]

We also had this issue. Turns out we loaded main.js in before runtime.js and polyfills.js.

[K5TRL]

We also had this issue. Turns out we loaded main.js in before runtime.js and polyfills.js.

I'm pretty new to Angular, could you tell me how you can make sure to run the runtime.js and polyfills.js before the main.js is loaded?

[jstnjs]

By changing the order of the scripts in the html.

[JeanMeche]

Without a repro this isn't actionable so I'll close this.

Feel free to reopen if you are able to provide a repro 👍

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}