2016-11-02 7 views
3

私はangular2を、angular websiteという簡単なプロジェクトを実行して学習しています。依存関係はnpmを使用してインストールされ、チュートリアルのようにlite-serverがパブリッシングに使用されます。Angular2:jsファイルとcssファイルをフェッチしていないルーティングされたモジュールを再ロード

1つのアプリケーションモジュール内のすべてをルーティングモジュールとともにコーディングします。ルーティングは

RouterModule.forRoot([ 
    { 
     path: 'dashboard', 
     component: DashboardComponent, 
     children: [ 
     { path: 'profile', component: ProfileComponent }, 
     { path: 'transaction', component: TransactionFormComponent }, 
     { path: '', redirectTo: 'transaction', pathMatch: 'full' } 
     ] 
    }, 
    { path: 'login', component: LoginFormComponent }, 
    { path: '', redirectTo: 'login', pathMatch: 'full' } 
]) 

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 
const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule) 
    .then(success => console.log(`Bootstrap success`)) 
    .catch(err => console.error(err)); 

app.module.ts

@NgModule({ 
    imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule ], 
    declarations: [ AppComponent, LoginFormComponent, DashboardComponent, 
        ProfileComponent, TransactionFormComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

index.htmlを

として構成されています

すべてが正常に動作します:

  • はlocalhost:3000の負荷が(:3000 /ダッシュボード/トランザクション今すぐブラウザ URL]タブには、ローカルホストを示して)デフォルトで

  • 成功したログイン負荷トランザクションコンポーネントページにログイン

  • ビューはstyle.css内のスタイルでレンダリングされます。

  • プロファイルコンポーネントに移動できます。ローカルホストをリロードオン

    :除き

3000 /ダッシュボード/トランザクションページブラウザのリロードボタンをクリックすることで、それは "ロード..." を示しています。 3000 /ダッシュボード/ ..正確な場所ではありません。ブラウザのコンソールには、私はlocalhostの参照エラー

GET 
http://localhost:3000/dashboard/node_modules/core-js/client/shim.min.js [HTTP/1.1 404 Not Found 1ms]  
GET 
http://localhost:3000/dashboard/node_modules/zone.js/dist/zone.js [HTTP/1.1 404 Not Found 17ms]  
GET 
http://localhost:3000/dashboard/node_modules/systemjs/dist/system.src.js [HTTP/1.1 404 Not Found 12ms]  
GET 
http://localhost:3000/dashboard/systemjs.config.js [HTTP/1.1 404 Not Found 12ms]  
GET 
http://localhost:3000/dashboard/node_modules/bootstrap/dist/css/bootstrap.min.css [HTTP/1.1 404 Not Found 13ms]  
GET 
http://localhost:3000/dashboard/style.css [HTTP/1.1 404 Not Found 13ms]  
GET 
http://localhost:3000/dashboard/node_modules/systemjs/dist/system.src.js [HTTP/1.1 404 Not Found 2ms]  
GET 
http://localhost:3000/dashboard/systemjs.config.js [HTTP/1.1 404 Not Found 0ms]  
ReferenceError: System is not defined 

を示しています。

これはどうしてですか?

解決策は何ですか?

今後の研究では、ページを読み込まないで多くのシナリオを満たしています。私はページが私のためにロードされていると思うが、jsとcssファイルはロードしていないと思う。したがって、Systemjsファイルもありません。そのため、ページはレンダリングされません。

thisとも呼ばれます。

:あなたは、ブラウザが上から下に読み込むので、index.htmlにスクリプトとリンクタグの上ご<base href="/">を配置する必要があり<base href="/"> index.htmlを

答えて

2

を追加しました。彼はまずscriptlinkタグに近づき、これらの処理を開始します。その後、彼はbaseというタグを見つけましたが、それはすでに遅すぎて、ブラウザが彼がすでにそれらのファイルを取得しているのを馬鹿にしていたことを認識していますが、baseの場所についてもっと早く通知しないとあなたを少し責めています。これを解決するには、彼を助け、baseタグを任意のリソースフェッチタグの上に置きます。

+0

'を' script'タグの上に置き、単純に動作させます。ありがとう@PierreDuc –

関連する問題