System is not defined with dynamic import in angular 13

Question

I have below code for dynamic load the locales

declare var System;
let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
        System.import(`@angular/common/locales/${angularLocale}.js`)
            .then(module => {
                registerLocaleData(module.default);
                NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales().then(_ => {
                    resolve(true);
                    abp.ui.clearBusy();
                });
            }, reject);

If I don't use the System the build command throws an exception as

Module not found: Error: Package path ./locales is not exported from package ....\node_modules\@angular\common (see exports field in .....\node_modules\@angular\common\package.json)

If I use the System I get an exception in the browser console as

core.mjs:6495 
        
       ERROR Error: Uncaught (in promise): ReferenceError: System is not defined
ReferenceError: System is not defined
    at registerLocales (root.module.ts:193)
    at root.module.ts:64
    at ZoneDelegate.invoke (zone.js:400)
    at Object.onInvoke (core.mjs:25877)
    at ZoneDelegate.invoke (zone.js:399)
    at Zone.run (zone.js:160)
    at zone.js:1318
    at ZoneDelegate.invokeTask (zone.js:434)
    at Object.onInvokeTask (core.mjs:25864)
    at ZoneDelegate.invokeTask (zone.js:433)
    at resolvePromise (zone.js:1255)
    at zone.js:1325
    at ZoneDelegate.invokeTask (zone.js:434)
    at Object.onInvokeTask (core.mjs:25864)
    at ZoneDelegate.invokeTask (zone.js:433)
    at Zone.runTask (zone.js:205)
    at drainMicroTaskQueue (zone.js:620)

U have declared System as a variable, it has to be imported as import { System } from 'system'; — Sayed Hussainullah Sadat, Nov 16 '21 at 09:02

score 0 · Answer 1 · answered Nov 23 '21 at 12:43

I had the same problem with "Module not found". In the application we use i18n. Now I get the the country from the i18n, and then set the locale to the pipe, witch holds this information. So I do not need the dynamic Modul loading anymore. Maybe that helps you?

System is not defined with dynamic import in angular 13

1 Answers1