angular - Angular2 Routing -


i following this tutorial of routing in angular, , doesn't work. when use 'comp' selector put it's html code, works, when i'm trying route router-outlet, shows header index.html.

i have following:

main.ts:

import * ng 'angular2/angular2';  import {comp} './comp';  @ng.component({      selector: 'my-app'  })  @ng.view({      directives: [ng.formdirectives, ng.routeroutlet],      template: `      <nav>        <ul>          <li>start</li>          <li>about</li>          <li>contact</li>        </ul>      </nav>      <main>        <router-outlet></router-outlet>      </main>    `  })  @ng.routeconfig([{ path: '/', component: comp }])  class appcomponent {  }  ng.bootstrap(appcomponent, [ng.routerinjectables]); 

comp.ts:

import * ng2 'angular2/angular2';  @ng2.component({      selector: 'comp'  })  @ng2.view({      template: `      <h1>hi<h1>    `  })  export class comp {      constructor() {      }  }

index.html:

<!doctype html>  <html>  <head>      <meta charset="utf-8" />      <title>test3</title>      <script src="lib/traceur/traceur.js"></script>      <script src="lib/system.js/dist/system.js"></script>      <script src="lib/angular2-build/angular2.js"></script>      <script src="lib/angular2-build/router.dev.js"></script>      <script>          system.config({              packages: {                   'js': {                      defaultextension: 'js'                  }               }          });          system.import('/js/main');      </script>  </head>  <body>      <h1>hello there</h1>      <my-app></my-app>  </body>  </html>

breaking changes introduced in angular@2.0.0-alpha.41

  • routerinjectables renamed router_bindings

  • router_bindings renamed router_providers

aside: lots of breaking changes lately virtually none of online examples reliable.

use router_providers

it includes:

  • routeregistry - registry of defined routes
  • locationstrategy = pathlocationstragety - match routes path

this shortcut bootstrap router default setup.

for example:

@component ({ ... }) @view ({ ... }) @routeconfig ({ ... }) class app {}  bootstrap(app, [ router_providers ]); 

sources:


Comments

Popular posts from this blog

mysql - FireDac error 314 - but DLLs are in program directory -

git - How to list all releases of public repository with GitHub API V3 -

c++ - Getting C2512 "no default constructor" for `ClassA` error on the first parentheses of constructor for `ClassB`? -