Angular 2 Lazy loading does not work when integrating into another application

Question

I want to use lazy-loading for feature modules. I use angular-cli and it works fine when I run ng serve. Now I'm trying to include the js files generated by angular-cli in a legacy jquery application :

Copy 0.chunk.js, inline.bundle.js, main.bundle.js, polyfills.bundle.js, styles.bundle.js and vendor.bundle.js in a directory called angular
In my html file, I'm loading the files :

/js/angular/inline.bundle.js /js/angular/polyfills.bundle.js /js/angular/styles.bundle.js /js/angular/vendor.bundle.js /js/angular/main.bundle.js

In my application, let's say I go to this webpage : http://localhost:8090/myapp/test.action

In order to integrate angular components in my application, I'm using the router to redirect to the component I want to display in the AppComponent :

ngOnInit(): void {
   if (this.displayComponent) {
      this.router.navigate([this.displayComponent]);
   }
}

Let's say I want to display my component called 'componentTest', it will redirect to : http://localhost:8090/myapp/test.action#/componentTest with this code in my html file :

<app-root displayComponent="componentTest">Loading...</app-root>

And then I have this error :

EXCEPTION: Uncaught (in promise): Error: Loading chunk 0 failed.

It seems is is trying to load the chunk file at this address :

http://localhost:8090/myapp/0.chunk.js

and not

http://localhost:8090/js/angular/0.chunk.js

How to fix this issue ?

Thanks

This is working perfectly fine without lazy loading.

Windows 10

Angular version:
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/material: 2.0.0-beta.2
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.8

Chrome 56

Typescript 2.0

node --version = v6.9.5

you need to set <base href="..."> appropriately. If you still have trouble you need to post your router configuration — Aluan Haddad
It still does not work, my application is now redirecting to localhost:8090/#/componentTest. But now it tries to load the chunk file at localhost:8090/0.chunk.js, which is still not good, because like I said, I integrate the js files at the location /js/angular/*. I guess the issue is in Angular Cli, there must be a way to specify where to load the chunk files ? Thanks — shaun_abitbol
Apparently, if you directly use webpack, you can specify the directory where to load chunk files : damienbod.com/2017/01/14/angular-2-lazy-loading-with-webpack-2 is it correct ? — shaun_abitbol
Yes you can do lots of things with webpack and that is no doubt one of them. — Aluan Haddad
but if that's the issue, is it possible to override this in angular cli ? — shaun_abitbol

shaun_abitbol shaun_abitbol · Accepted Answer · 2017-03-03T13:38:11

The folder to load chunk files is actually configurable in angular-cli. I added the "--deploy-url /js/angular" flag to the ng build command.

https://www.reddit.com/r/Angular2/comments/5wozkl/angularcli_how_can_i_allow_content_to_be_served/

Angular 2 Lazy loading does not work when integrating into another application

1 Answers