2017-03-02 4 views
4

フィーチャモジュールにレイジーローディングを使用したい。私は角度を使用してそれはうまく動作ngの実行を実行します。角2他のアプリケーションに統合するときにレイジーローディングが機能しない

  • コピー0.chunk.js、inline.bundle.js、main.bundle.js、polyfills.bundle: は、今私は、レガシーjqueryのアプリケーションでは、角度-CLIによって生成されたJSファイルを含めるようにしようとしています.jsファイル、ディレクトリ内styles.bundle.jsとvendor.bundle.jsは私のHTMLファイル内の角度
  • と呼ばれ、私は、ファイルをロードしています:

    /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私のアプリケーションで

、の私は、このWebページに行くとしましょう: http://localhost:8090/myapp/test.action

自分のアプリケーションに角度成分を統合するために、私は私がしたいコンポーネントにリダイレクトするようにルータを使用していますAppComponentで表示:私のhtmlファイルでこのコードを http://localhost:8090/myapp/test.action#/componentTest

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

のは、私が「componentTest」と呼ばれる私のコンポーネントを表示したいとしましょう、それはにリダイレクトされます

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

そして私は、このエラーを持っている:

例外:キャッチされない(約束で):エラー:ロードチャンク0に失敗しました。この問題を解決する方法

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

なく

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

それはそうですが、このアドレスにチャンクファイルをロードしようとしているのですか?

おかげ

は、これは遅延ロードすることなく、完全に正常に動作しています。

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 
+0

あなたは適切に '' <基本のhrefを= "...">を設定する必要があります。それでも問題が解決しない場合は、ルータの設定を投稿する必要があります。 –

+0

それでも問題が解決しない場合、アプリケーションはhttp:// localhost:8090 /#/ componentTestにリダイレクトされます。しかし今は、http:// localhost:8090/0.chunk.jsでチャンクファイルを読み込もうとしています。これは、私が言ったように、jsファイルをlocation/js/angular/*に統合するためです。 Angular Cliに問題があると思いますが、チャンクファイルをロードする場所を指定する方法が必要ですか?ありがとう –

+0

明らかに、webpackを直接使用する場合は、チャンクファイルをロードするディレクトリを指定できます。https://damienbod.com/2017/01/14/angular-2-lazy-loading-with-webpack-2/ isそれは正しい? –

答えて

関連する問題