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)