When I run (yarn start) the Angular site, it shows the following error. I uninstalled and installed stable version of Node.js, still not working
./node_modules/@angular/common/locales/zh-Hans-HK.js.map:1:10 - Error: Module parse failed: Unexpected token (1:10) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > {"version":3,"file":"zh-Hans-HK.js","sourceRoot":"","sources":["zh-Hans-HK.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,0CAA0C;AAC1C,MAAM,CAAC,GAAG,SAAS,CAAC;AAEpB,SAAS,MAAM,CAAC,GAAW;IAC3B,MAAM,CAAC,GAAG,GAAG,CAAC;IAEd,OAAO,CAAC,CAAC;AACT,CAAC;AAED,eAAe,CAAC,YAAY,EAAC,CAAC,CAAC,IAAI,EAAC,IAAI,CAAC,EAAC,CAAC,EAAC,CAAC,CAAC,EAAC,CAAC,EAAC,CAAC,CAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,CAAC,EAAC,CAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,CAAC,EAAC,CAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,CAAC,EAAC,CAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,CAAC,CAAC,EAAC,CAAC,EAAC,CAAC,CAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,CAAC,EAAC,CAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,CAAC,EAAC,CAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,CAAC,CAAC,EAAC,CAAC,EAAC,CAAC,CAAC,KAAK,EAAC,IAAI,CAAC,EAAC,CAAC,EAAC,CAAC,CAAC,EAAC,CAAC,EAAC,CAAC,CAAC,EAAC,CAAC,CAAC,EAAC,CAAC,QAAQ,EAAC,QAAQ,EAAC,CAAC,EAAC,YAAY,CAAC,EAAC,CAAC,OAAO,EAAC,UAAU,EAAC,YAAY,EAAC,eAAe,CAAC,EAAC,CAAC,SAAS,EAAC,CAAC,EAAC,CAAC,EAAC,CAAC,CAAC,EAAC,CAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,CAAC,EAAC,CAAC,WAAW,EAAC,QAAQ,EAAC,WAAW,EAAC,KAAK,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,EAAC,KAAK,EAAC,CAAC,KAAK,EAAC,GAAG,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC,EAAC,IAAI,CAAC,EAAC,KAAK,EAAC,CAAC,KAAK,CAAC,EAAC,KAAK,EAAC,CAAC,KAAK,EAAC,GAAG,CAAC,EAAC,KAAK,EAAC,CAAC,GAAG,EAAC,GAAG,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC,EAAC,GAAG,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC,EAAC,IAAI,CAAC,EAAC,KAAK,EAAC,CAAC,KAAK,CAAC,EAAC,KAAK,EAAC,CAAC,KAAK,EAAC,GAAG,CAAC,EAAC,KAAK,EAAC,EAAE,EAAC,EAAC,KAAK,EAAE,MAAM,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file
6 Answer(s)
-
0
This error typically occurs when your Angular build process tries to load a
.js.map
file as a JavaScript module, which is not correct. This is usually caused by an incorrect import or a misconfiguration in your project.Solution Steps
Check for Incorrect Imports
- Make sure you are not directly importing
.js.map
files anywhere in your codebase. You should only import JavaScript or TypeScript files, not source maps.
- Make sure you are not directly importing
Clean and Reinstall Node Modules
- Delete your
node_modules
folder andyarn.lock
file:rm -rf node_modules yarn.lock
- Reinstall dependencies:
yarn install
- Delete your
Check Angular and ABP Versions
- Ensure your
@angular/*
and@abp/*
package versions are compatible and consistent. For ABP v9.1.0, you should use Angular 17.x and matching ABP Angular packages.
- Ensure your
Check tsconfig and angular.json
- Ensure your
tsconfig.json
andangular.json
do not include or reference.js.map
files in thefiles
,include
, orassets
sections.
- Ensure your
Check for Custom Webpack Configurations
- If you have a custom webpack configuration, make sure it does not include
.js.map
files as entry points or modules.
- If you have a custom webpack configuration, make sure it does not include
Restart the Angular Development Server
- After making the above changes, restart your development server:
yarn start
- After making the above changes, restart your development server:
If you follow these steps, the error should be resolved. This issue is not specific to ABP, but rather to the Angular/Webpack build process.
Sources:
- https://abp.io/docs/latest/framework/ui/angular/quick-start
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
-
0
The AI-generated answer doesn't work for us. Please help
-
0
I have assigned your issue to the relevant team member, and she will reply as soon as possible.
-
0
Hello,
Apologies for the delayed response. To assist you more effectively, could you please specify the ABP version you're using and the type of builder (browser or application)? It would also be very helpful if you could share the contents of your package.json.
Thank you for your cooperation.
-
0
ABP version 9.1.0. In order to fix this, I upgraded to ABP 9.2.1. Still the same error.
Builder Type: "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "PMS:build:production" }, "development": { "buildTarget": "PMS:build:development" } }, "defaultConfiguration": "development" },
package.json { "name": "PMS", "version": "1.0.0", "scripts": { "ng": "ng", "start": "ng serve --live-reload=true", "build": "ng build", "build:prod": "ng build --configuration production", "watch": "ng build --watch --configuration development", "test": "ng test", "lint": "ng lint" }, "private": true, "dependencies": { "@abp/ng.components": "~9.1.0", "@abp/ng.core": "~9.1.0", "@abp/ng.feature-management": "~9.1.0", "@abp/ng.oauth": "~9.1.0", "@abp/ng.setting-management": "~9.1.0", "@abp/ng.theme.shared": "~9.1.0", "@angular/animations": "~19.1.0", "@angular/common": "19", "@angular/compiler": "~19.1.0", "@angular/core": "19", "@angular/forms": "~19.1.0", "@angular/google-maps": "19.2.8", "@angular/localize": "~19.1.0", "@angular/platform-browser": "19", "@angular/platform-browser-dynamic": "19", "@angular/router": "19", "@fullcalendar/angular": "^6.1.16", "@fullcalendar/core": "^6.1.15", "@fullcalendar/interaction": "^6.1.15", "@fullcalendar/resource": "^6.1.15", "@fullcalendar/resource-timeline": "^6.1.15", "@ng-select/ng-select": "^14.2.4", "@volo/abp.commercial.ng.ui": "~9.1.0", "@volo/abp.ng.account": "~9.1.0", "@volo/abp.ng.audit-logging": "~9.1.0", "@volo/abp.ng.chat": "~9.1.0", "@volo/abp.ng.file-management": "~9.1.0", "@volo/abp.ng.gdpr": "~9.1.0", "@volo/abp.ng.identity": "~9.1.0", "@volo/abp.ng.language-management": "~9.1.0", "@volo/abp.ng.openiddictpro": "~9.1.0", "@volo/abp.ng.payment": "9.1.0", "@volo/abp.ng.saas": "~9.1.0", "@volo/abp.ng.text-template-management": "~9.1.0", "@volosoft/abp.ng.theme.lepton-x": "~4.1.0", "apexcharts": "^4.5.0", "crypto-js": "^4.2.0", "moment": "^2.30.1", "ng-apexcharts": "^1.15.0", "ngx-editor": "^18.0.0", "ngx-papaparse": "^8.0.0", "ngx-print": "^2.0.0", "rxjs": "~7.8.0", "tippy.js": "^6.3.7", "tslib": "^2.0.0", "xlsx": "^0.18.5", "zone.js": "~0.15.0" }, "devDependencies": { "@abp/ng.schematics": "~9.1.0", "@angular-devkit/build-angular": "~19.1.0", "@angular-eslint/builder": "~19.0.0", "@angular-eslint/eslint-plugin": "~19.0.0", "@angular-eslint/eslint-plugin-template": "~19.0.0", "@angular-eslint/schematics": "~19.0.0", "@angular-eslint/template-parser": "~19.0.0", "@angular/cli": "~19.1.0", "@angular/compiler-cli": "~19.1.0", "@angular/language-service": "~19.1.0", "@types/jasmine": "~3.6.0", "@types/node": "^20.0.0", "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "eslint": "^8.0.0", "jasmine-core": "~4.0.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.1.0", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.0.0", "typescript": "~5.6.0" } }
-
0
Thank you for providing extra details on that. However, I could not produce the same problem on my end. Could you please share a minimal, reproducible example so we can assist you further? You can send it through this e-mail address sumeyye.kurtulus@volosoft.com