Issue
I am migrating my application from Angular 5 to angular 6. Everything works fine, except the lazily loaded module. I am having following errors when I run the application
although, my application was runing fine with angular 5. My all js path are like this
<script type="text/javascript" src="http://localhost:4200/dist/polyfills.js"></script>
<script type="text/javascript" src="http://localhost:4200/dist/scripts.js"></script>
<script type="text/javascript" src="http://localhost:4200/dist/styles.js"></script>
<script type="text/javascript" src="http://localhost:4200/dist/vendor.js"></script>
<script type="text/javascript" src="http://localhost:4200/dist/main.js"></script>
then why its loading lazy loaded module from main domain URL? like localscorm?
my package.json file is
"scripts": {
"ng": "ng",
"start": "ng serve --deploy-url http://localhost:4300/dist/ --serve-path /dist/ --public-host http://localhost:4300",
"build": "ng build",
"build:prod": "ng build --prod --base-href ./",
"build:webprod": "ng build --prod --output-path ../dist --deploy-url ../dist/",
"build:webstaging": "ng build --env=staging --prod --output-path ../dist --deploy-url ../dist/",
"test": "ng test",
"lint": "ng lint",
"watch:tsc": "tsc -p src/tsconfig.app.system.json -w",
"html": "copyfiles -u 1 src/app/**/*.html src/app/**/*.css ../dist/",
"assets": "copyfiles -u 1 src/assets/**/* ../dist/",
"watch:global:static": "npm run assets",
"watch:app:static": "npm run html",
"watch": "npm-watch",
},
how to solve this loading chunk issue?
Solution
To fix the issue in Angular 6, add the following configuration inside angular.json
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "scorm-app:build:local",
"port": 4300,
"servePath": "/dist/",
"publicHost": "http://localhost:4300"
}
where "browserTarget": "scorm-app:build:local"
, point to configuration for local environment.
Answered By – Ammar Khan
Answer Checked By – Dawn Plyler (AngularFixing Volunteer)