Angular 6 migration Lazy loading issue

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)