meteor - Angular2 render app 2 times -


i have problem, can`t routing in angular 2. mb fased similar?

so, app renders in weird way:

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

as can see, my-app>(app-nav-bar+app-hello)>html>(head+body) etc..

file main.ts:

import { bootstrap } 'angular2-meteor-auto-bootstrap'; import { disabledeprecatedforms, provideforms } '@angular/forms'; import {app_router_providers} './app.routes'  import { appcomponent } './app.component';  bootstrap(appcomponent, [     disabledeprecatedforms(),     provideforms(),     app_router_providers ]); 

file app.routes.ts

import {  routerconfig, providerouter } '@angular/router';  import {     hellocomponent } './imports/index'  const routes: routerconfig = [     { path: '', component: hellocomponent } ];  export const app_router_providers = [     providerouter(routes) ]; 

file app.component.html:

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

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

if can me, happy =)

i not sure if right answer, looks missed package, allows me use static template directly. so, replacing

import template 'ex.controller.html'  @component({ ... template, ... }) 

with this

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

and deleted import helped heavily.


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -