Failing to locate module: Issue encountered after updating Angular to version 13 - Error: The package path ./locales is not being exported from

With the introduction of TypeScript 2.4, dynamic import() expressions were added to allow for the asynchronous loading and execution of ECMAScript modules on demand.

I am currently facing an issue while trying to dynamically import the localization module.

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)

The code snippet I have is as follows:

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

I am unsure about how to export this correctly, as it was functioning properly with Angular 12.

javascriptangulartypescriptaspnetboilerplateangular13

Answer №1

Encountering a similar issue, I managed to resolve it by adjusting the import path and including 'node_modules/...'
See below for the codes:

import(`@angular/common/locales/${angularLocale}.js`)

Updated code snippet:

import(`/node_modules/@angular/common/locales/${angularLocale}.js`)

Answer №2

Having trouble with adding a 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);

Source - https://github.com/angular/angular/issues/20487

Revision

No need for System.import now... A dynamic ES import expression could suffice...

let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
import(`@angular/common/locales/${angularLocale}.js`).then(module => registerLocaleData(module.default));

Even after using the above code, I'm still encountering an issue. It seems to be related to angular/angular-cli#22154 - possibly a webpack bug. https://github.com/angular/angular/issues/20487 https://github.com/angular/angular-cli/issues/22154

import(
  /* webpackExclude: /\.d\.ts$/ */
  /* webpackMode: "lazy-once" */
  /* webpackChunkName: "i18n-extra" */
  `@/../node_modules/@angular/common/locales/${angularLocale}.mjs`)

Answer №3

According to the details provided in the https://github.com/angular/angular-cli/issues/22154 discussion, it is necessary to update the import path using 

/node_modules/@angular/common/locales/${locale}.mjs
.

I successfully implemented the following code in my AspNetZero project after upgrading to Angular version 13.

NOTE: Remember to restart the "ng serve" command after making these modifications so that webpack can work properly.

async function registerLocales(resolve: (value?: boolean | Promise<boolean>) => void, reject: any, spinnerService: NgxSpinnerService) {
if (shouldLoadLocale()) {
    let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
    await import(`/node_modules/@angular/common/locales/${ angularLocale }.mjs`)
        .then(module => {
            registerLocaleData(module.default);
            NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales().then(_ => {
                resolve(true);
                spinnerService.hide();
            });
        }, reject);
} else {
    NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales().then(_ => {
        resolve(true);
        spinnerService.hide();
    });
}

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vuejs fails to properly transmit data

When I change the image in an image field, the new image data appears correctly before sending it to the back-end. However, after sending the data, the values are empty! Code Commented save_changes() { /* eslint-disable */ if (!this.validateForm) ...

javascripttypescriptvue.js

What sets template-driven and reactive forms apart in practice?

Exploring the Angular2 new Forms API has revealed two distinct approaches to forms: Template driven and reactive (model-driven) forms. I am curious about the real-world differences between these two methods, beyond just syntax. Which approach is more adva ...

angularangular2-forms

When using Javascript innerhtml, it fails to recognize and properly parse Twig tags

I have a function in Twig that retrieves values from a database and displays them in a select box. I am attempting to update the content of the div, but I am facing an issue with innerHTML. When using {{ without quotes, it creates a new line which is flagg ...

javascriptjquerytwiginnerhtml

The JavaScript event responsible for reloading the page is triggering every time the page is refreshed, resulting in an endless loop

Initially, the issue does not arise, however, it only occurs when the event is triggered by reordering the column, causing an automatic reload afterwards. tabelaProdutos.on('column-reorder', function(e, settings, details) { ... location ...

javascriptjquerydatatables

What is the best way to transform an Observable array containing objects into an Observable that emits the data contained within those objects?

Encountering an error: Error: Type 'Observable<Country[]>' is not assignable to type 'Observable'. Type 'Country[]' is missing properties like name, tld, alpha2Code, alpha3Code and more.ts(2322 The issue might be due ...

javascriptangulartypescriptrxjsobservable

The window resizing function continues on an endless loop

I could really use some assistance in pinpointing the issue at hand! My script is set up to display a banner at the top of a page only if the window width is 600px or less and the scroll position is within 34px from the top. It hides the banner when the u ...

javascriptjquery

Trigger a modal popup upon page load event generated from the server side using C#

I am trying to display a modal popup based on certain conditions during the page load event, but I am facing some issues. This is my modalPopup code: <script type="text/javascript"> function openModal(message, header, url) { $('#my ...

javascriptc#jqueryasp.nettwitter-bootstrap

Is the JQuery dropdown menu closing "instantly" upon clicking?

Whenever I tap on the "hamburger icon" in mobile view, the mobile navigation drops down but then quickly slides back up. The code responsible for this behavior is unfamiliar to me, so any assistance would be greatly appreciated. The code I am currently wo ...

javascriptjqueryhtmlmobilenavigation

Transferring Arrays in Angular: A Step-by-Step Guide

I am trying to assign one array to another orders = [ { 'id': PROCESSING, 'displayName': 'Processing' }, { 'id': SHIPPED, &apo ...

angulartypescript

Exploring the power of nesting views using *ngFor in Ionic framework

I am looking to design a screen that features nested views using the *ngFor loop. The data I have is in a two-dimensional array format and I want to iterate through it to display the same view for each row within each section. It should look something like ...

angulartypescriptionic-frameworkionic2ionic3

The Angular Material Stepper ng-template is missing a defined context variable for custom icons which is causing

My endeavor involves leveraging an ng-template alongside the matStepperIcon property to customize Angular Material's matStepper icons. I am also aiming to transmit some data by utilizing ng-container and *ngTemplateOutlet, yet facing partial success. ...

angularng-templatemat-stepperangular-material-11

Sometimes the Navbar options fail to show up consistently on the Navbar bar

I recently launched my website at campusconnect.cc Unfortunately, I've noticed that when resizing the window, the navbar options are shifting up and down. Can anyone help me identify the issue and provide guidance on how to resolve it? ...

javascripthtmlcsstwitter-bootstrap

Google Maps API - Custom Label for Map Markers

I am trying to implement a custom map on my website, and everything seems to be working fine except for one issue. The red marker on the map needs to have a label, but I don't want to use an additional image as an icon. Is there a way to add a label ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

What is the recommended substitute for the "any" type in TypeScript?

Code Slider.tsx import { useSelector, connect } from "react-redux"; import { ProductType, ProductItem, StateType } from "types"; const Slider = ({ products, number }: any) => { ------------------> what type? // const number = ...

reactjstypescriptreduxreact-redux

How to use CSS to add a pseudo element to a table and position it outside of the parent's boundaries on the left

I am currently utilizing the "ag-grid" data-table library (along with Angular 2, although the framework is not crucial) which highlights a selected row (using the default class .ag-row) by adding the class .ag-row-selected to it. Each row contains numerous ...

angularcsssasspseudo-element

Show only the selected option with jQuery's on change event and disable or remove the other options

My goal is to make it so that when a user selects an option from a dropdown menu, the other options are disabled or hidden. For example, if option "1" is selected, options "2", "3", and "4" will be removed: <div class="abc"> <div class="xyz"> ...

javascriptjqueryhtmlselectonchange

Notes on using touch devices with Angular

My goal is to make my Angular application capable of displaying a footnote on mobile devices when text injected with nativeElement.innerHTML is clicked. I attempted to explain this before but feel that I didn't do it justice, so here's another sh ...

javascriptjqueryhtmlangularionic3

Displaying Real-Time Values in ReactJS

Hi there, I am currently using the code below to upload images to Cloudinary: import React, { Component } from 'react'; import './App.css'; import Dropzone from 'react-dropzone'; import axios from 'axios'; const F ...

javascriptreactjsaxiosdropzone.js

After being reloaded multiple times, the time and date mysteriously vanish

Issue with Javascript/jQuery/jQuery Mobile Code After reloading or refreshing the page multiple times, the values for currentDate and currentTime seem to disappear sporadically. Strangely, they start working fine again after a few more reloads. Can anyone ...

javascriptjqueryhtmljquery-mobile

The body tag mysteriously disappears after the function is called within the $().html() command

As I delve into scraping the source code of a website, I encounter an interesting phenomenon. Initially, when I print out the complete source code, everything appears as expected. However, upon attempting to print an actual DOM, I notice a slight change i ...

javascripthtmlajaxdomweb-scraping