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

I want to use lazy-loading for function modules. I use angular-cli and it works fine when I run ng serve . Now I am trying to include js files created by angular-cli in an obsolete jquery application:

  • Copy the 0.chunk.js, inline.bundle.js, main.bundle.js, polyfills.bundle.js, styles.bundle.js and vendor.bundle.js files to a directory named angular
  • In my html file, I upload 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 web page: http: // localhost: 8090 / myapp / test.action

To integrate angular components into my application, I use a router to redirect to the component that 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 be redirected 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: Unprepared (in promise): Error: Error loading piece 0.

It seems to be trying to download the chunk file to this address:

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

but not

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

How to fix this problem?

thank

This works great 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
+4
source share
1 answer

Source: https://habr.com/ru/post/1671258/


All Articles