I have a problem, I just can not get the normal operation of the paths in Angular 2. Maybe someone came across \ knows how to do better?

The main.ts file:

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

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

File app.component.html:

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

And finally, the essence of the error. The house is rendered just wrong, here’s the code:

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

I understand that in place of app-hello, for some reason, my-app is rendered and so in a circle, I don't understand why = (

  • index.html, and the description of AppComponent (did the directives import)? Also with an init router you need to set a link strategy. - Serge Markov
  • The problem disappeared itself (that’s always the case!) In a magical way. But all the same, I overwritten all the files, re-created the database (all this with the server turned off, of course). I don’t know why, but the same code worked as it should and there was problem number 2, which I’ll ask about later =) - Tymur Valiiev
  • Perhaps the problem was solved by itself because of the cache, the angular will cache all its templates for a long time - apelsinka223
  • When developing, a virgin version was used, so it is unlikely. - Tymur Valiiev

0