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
Post a Comment