Angular2呈現應用2次

我有一個問題，我無法在Angular 2中進入路由。Angular2呈現應用2次

所以，我的應用程序呈現在一個奇怪的方式：

<my-app><div> <app-nav-bar _nghost-ile-2=""><ul _ngcontent-ile-2=""> <!--template bindings={ 
    "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object]" 
}--><li _ngcontent-ile-2="" ng-reflect-raw-style="[object Object]" style="float: left;"> <a _ngcontent-ile-2="" ng-reflect-raw-class="[object Object]" ng-reflect-href="/" href="/">Home</a> </li><li _ngcontent-ile-2="" ng-reflect-raw-style="[object Object]" style="float: left;"> <a _ngcontent-ile-2="" ng-reflect-raw-class="[object Object]" ng-reflect-href="/index/books" href="/index/books">Books</a> </li><li _ngcontent-ile-2="" ng-reflect-raw-style="[object Object]" style="float: right;"> <a _ngcontent-ile-2="" ng-reflect-raw-class="[object Object]" class="active" ng-reflect-href="/index/about" href="/index/about">About</a> </li><li _ngcontent-ile-2="" ng-reflect-raw-style="[object Object]" style="float: right;"> <a _ngcontent-ile-2="" ng-reflect-raw-class="[object Object]" ng-reflect-href="/" href="/">Login</a> </li> </ul> </app-nav-bar> <router-outlet></router-outlet><app-hello _nghost-ile-4=""> 
<html _ngcontent-ile-4=""> 
<head _ngcontent-ile-4=""> 
    <link _ngcontent-ile-4="" class="__meteor-css__" href="/merged-stylesheets.css?hash=d42394b95cde74014bba42c21ff2737c29b8fc61" rel="stylesheet" type="text/css"> 
    <base _ngcontent-ile-4="" href="/"> 
</head> 
<body _ngcontent-ile-4=""> 
    <my-app _ngcontent-ile-4="">Loading....</my-app> 
</body> 
</html> 
</app-hello> </div> </my-app>

正如你所看到的，我的應用程序內>（APP-導航欄+應用問候）> HTML>（頭+體）等..

文件main.ts：

import { bootstrap } from 'angular2-meteor-auto-bootstrap'; 
import { disableDeprecatedForms, provideForms } from '@angular/forms'; 
import {APP_ROUTER_PROVIDERS} from './app.routes' 

import { AppComponent } from './app.component'; 

bootstrap(AppComponent, [ 
    disableDeprecatedForms(), 
    provideForms(), 
    APP_ROUTER_PROVIDERS 
]);

文件app.routes.ts

import { 

RouterConfig, provideRouter } from '@angular/router'; 

import { 
    HelloComponent 
} from './imports/index' 

const routes: RouterConfig = [ 
    { path: '', component: HelloComponent } 
]; 

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(routes) 
];

文件app.component.html：

<div> 
    <app-nav-bar></app-nav-bar> 
    <router-outlet></router-outlet> 
</div>

index.html文件：

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <base href="/"> 
    <meta viewport> 
</head> 
<body> 
<my-app>Loading....</my-app> 
</body>

如果有人能幫助我，我會很高興=）

來源

2016-08-29 Тимур Валиев

我不知道這是否是正確的答案，但看起來像我錯過了包，這使我可以直接使用靜態模板。因此，更換

import template from 'ex.controller.html' 

@Component({ 
... 
template, 
... 
})

有了這個

@Component({ 
... 
template: 'ex.controller.html', 
... 
})

和刪除的進口幫助了巨資。

來源

2016-10-08 10:10:47

Angular2呈現應用2次

回答

相關問題