Angular2 render app 2 mal

Ich habe ein Problem, ich kann nicht in Routing in Angular 2. Mb jemand mit etwas Ähnliches fashed kommen?Angular2 render app 2 mal

So macht mein app in einer seltsamen Art und Weise:

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

Wie Sie sehen können, my-app> (app-nav-bar + app-hallo)> html> (Kopf + Körper) usw. ..

Datei 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 
]);

Datei 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) 
];

Datei app.component.html:

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

Datei 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>

Wenn mir jemand helfen kann, werde ich sehr glücklich sein =)

Quelle

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

Ich bin nicht sicher, ob es ist die richtige Antwort, aber sieht aus wie ich verpasste Paket, das erlaubt mir statische Vorlage direkt zu verwenden. So ersetzt

import template from 'ex.controller.html' 

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

Mit diesem

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

und gelöschte Import half stark.

Quelle

2016-10-08 10:10:47

Angular2 render app 2 mal

Antwort

Verwandte Themen