Angular-cli: Commonjs warning with @angular/common/locales

[destus90]

After upgrading to Angular 10, the following warning is displayed after ng serve command:

WARNING in angular-v10\src\app\app.module.ts depends on @angular/common/locales/fr. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Repro: https://github.com/destus90/angular-v10-issues
Clone it and run ng serve -c=fr. It would be nice not to have that warning.

[petebacondarwin]

Transferring to the CLI repo as this is a warning from the tooling, not the framework.

[petebacondarwin]

So the problem is that the locale files are indeed AMD format. This is legacy because previously there were some setups that couldn't cope with ESM module format. The CLI now actually prefers the ESM format but there might still be non-CLI setups that need the AMD format.

I think there are two "fixes" here:

• The first simple one is for the CLI to just ignore the warning for these locale data files.
• The second is for the framework to actually distribute ESM formatted modules. I think we will need to distribute both ESM and AMD at least for a while.

[alan-agius4]

Hi all,

Importing the locale data and registering it is redundant when using the Angular CLI.

This, is because the locale data is auto imported and inlined at a later stage in the build pipeline during localization phase where it will not effect tree-shaking and other optimizations.

Before

import { BrowserModule } from '@angular/platform-browser';
import { registerLocaleData } from '@angular/common';
import {LOCALE_ID, NgModule} from '@angular/core';
import '@progress/kendo-angular-intl/locales/fr/all';
import localFr from '@angular/common/locales/fr';

import { AppComponent } from './app.component';

registerLocaleData(localFr);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [{ provide: LOCALE_ID, useValue: 'fr' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

After

import { BrowserModule } from '@angular/platform-browser';
import { registerLocaleData } from '@angular/common';
import {LOCALE_ID, NgModule} from '@angular/core';
import '@progress/kendo-angular-intl/locales/fr/all';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I agree with @petebacondarwin that we should look into provided ESM formats for locales, but that's another discussion.

[destus90]

@alan-agius4
LOCALE_ID is not registered as provider in your modified code. Is it right?

UPDATE: everything is OK, because the Angular CLI automatically includes the locale data and sets the LOCALE_ID value when you use the --localize option with ng build. (https://angular.io/guide/i18n#set-the-source-locale-manually)

[DominicSachs]

Works for me.
But I had to import global locale instead of common locale to prevent the TS6133 warning.

Before (with warning)

import '@angular/common/locales/de';
import '@angular/common/locales/en';

After (without warning)

import '@angular/common/locales/global/de';
import '@angular/common/locales/global/en';

[PACMAN49]

I get the same warning
WARNING in \htdocs\rider-space\client\src\main.ts depends on @angular/common/locales/fr. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
but i don't import locales nowhere inside my application.
here is my full main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import Auth from '@aws-amplify/auth';
import awsconfig from './aws-exports';
Auth.configure(awsconfig);

// console.log('plop', environment);
if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

[JohnnyDevNull]

I've changed the imports to the global ones, but for the /extra the warning still exists, are there also any alternative imports?

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/global/de';
import localeEn from '@angular/common/locales/global/en-GB';
import localeDeExtra from '@angular/common/locales/extra/de';
import localeEnExtra from '@angular/common/locales/extra/en-GB';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

registerLocaleData(localeDe, 'de-DE', localeDeExtra);
registerLocaleData(localeEn, 'en-GB', localeEnExtra);

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

[petebacondarwin]

@JohnnyDevNull - be aware that the global locale files actually include the extra ones already!

[frauvonweb]

I tried to import from the global folder (import localeDe from '@angular/common/locales/global/de';). Since that only contains js files (no .d.ts) I get the error "Could not find a declaration file for module '@angular/common/locales/global/de'". Since it seems to be working for others though, what am I doing wrong?

[timbru31]

@frauvonweb I've added just
import '@angular/common/locales/global/de'; and not import localeDe from '@angular/common/locales/global/de'; to our app.module.ts. No other changes than the import are required, i.e. no localeDe in the imports array. This worked fine for us and the correct localized dates and times were shown.

[destus90]

@timbru31
Can you tell me why you are doing this? As described by @alan-agius4 above, the Angular CLI automatically includes the necessary locales when using the --localize option.

[timbru31]

We need multi-locale support.

[alan-agius4]

@timbru31, if you update to the latest patch version of the @angular/cli and @angular-devkit/build-angular will no longer receive warnings for locale data.

[angular-automatic-lock-bot[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._}