2016-08-15 8 views
2

ルート ''(ホームページ)でAppComponentのhtmlが2回ロードされています。AppComponentのhtmlはルート '/'で2回ロードされます

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { enableProdMode, NgModule } from '@angular/core'; 
import { AppComponent } from './app/components/app/app.component'; 
import { APP_ROUTER_PROVIDERS } from './app/components/app/app.routing'; 

if (true) { 
    enableProdMode(); 
} 

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]); 

app.routing.ts

import { Routes, RouterModule, provideRouter } from '@angular/router'; 
import { AuthComponent } from "../auth/auth.component"; 
import { AppComponent } from "./app.component" 

const appRoutes: Routes = [ 
    { 
    path: 'auth', 
    component: AuthComponent 
    }, 
    { 
    path: '', 
    component: AppComponent 
    } 
]; 

export const APP_ROUTER_PROVIDERS = [provideRouter(appRoutes)]; 

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-component', 
    templateUrl : './app/components/app/app.component.html' 
}) 

export class AppComponent{ 

} 

私のindex.htmlファイル

<!doctype html> 
<html> 
<head> 
    <base href="/"> 
    <meta charset="utf-8"> 

    {{#unless environment.production}} 
    <script src="/ember-cli-live-reload.js" type="text/javascript"></script> 
    {{/unless}} 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
    <app-component>Loading</app-component> 


    {{#each scripts.polyfills}} 
    <script src="{{.}}"></script> 
    {{/each}} 
    <script> 
     System.import('system-config.js').then(function() { 
     System.import('main'); 
     }).catch(console.error.bind(console)); 
    </script> 

</body> 
</html> 

私はルート「を削除した場合」テーブルのHTMLをルーティングからは、一度読み込んでいるが、私は例外を取得:

Uncaught (in promise): Error: Cannot match any routes: ''

+0

'useAsDefault:true'を' path: '' 'に追加しようとしましたか? – Sanket

答えて

4

あなたはAppComponentをブートストラップし、「デフォルト」として、それを持っているだけでなく(「/」)パス。通常、ブートストラップされたコンポーネントには「マスターページ」(Webページの固定部分)が含まれ、ルートに定義されているパスはrouter outletに入ります。したがって、ブートストラップに別のコンポーネントを使用する場合は、期待どおりに動作するはずです。

+0

ああ今、私はそれがどのように動作するかを見ます。 – Sefa

関連する問題