Menu
I was following this tutorial of routing in Angular, and it just doesn't work. When I use the 'comp' selector to put it's HTML code, it works, but when I'm trying to route it with router-outlet, it just shows the header from index.html.
I have the following:
main.ts:
import * as ng from 'angular2/angular2';
import {Comp} from './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 * as ng2 from '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>
872
Routing in AngularJS is used when the user wants to navigate to different pages in an application but still wants it to be a single page application. AngularJS routes enable the user to create different URLs for different content in an application.
Angular Router supports multiple outlets in the same application. A component has one associated primary route and can have auxiliary routes. Auxiliary routes enable developers to navigate multiple routes at the same time.
Add the AppRoutingModule link The router is dedicated to routing and imported by the root AppModule . By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app directory. Run ng generate to create the application routing module.
Breaking changes were introduced in [email protected]
routerInjectables was renamed to ROUTER_BINDINGS
ROUTER_BINDINGS was then renamed to ROUTER_PROVIDERS
Aside: Lots of breaking changes lately so virtually none of the online examples are reliable.
Use ROUTER_PROVIDERS
It includes:
RouteRegistry - the registry of defined routesLocationStrategy = PathLocationStragety - match routes by pathThis is basically a shortcut to bootstrap your Router with a default setup.
For example:
@Component ({
...
})
@View ({
...
})
@RouteConfig ({
...
})
class App {}
bootstrap(App, [ ROUTER_PROVIDERS ]);
Sources:
97
You can find current most popular working example of routing here
Look into app/app.ts:
import {Component, bind, bootstrap, ViewEncapsulation} from 'angular2/angular2';
import {
RouteConfig,
ROUTER_DIRECTIVES,
ROUTER_BINDINGS,
ROUTER_PRIMARY_COMPONENT
} from 'angular2/router';
import {Home} from './components/home/home';
import {About} from './components/about/about';
...
@Component({ /// your root component
})
@RouteConfig([
{ path: '/', component: Home, as: 'Home' },
{ path: '/about', component: About, as: 'About' }
])
class App {}
bootstrap(App, [
ROUTER_BINDINGS,
bind(ROUTER_PRIMARY_COMPONENT).toValue(App)
]);
On the tutorial you are following they finally stated it's deprecated, you can read it in bold:
Deprecation Note
We are very sorry, but this article is out of date and has been deprecated. Usually, we keep our articles up to date, however, with this one it's very likely that we've written a complete new version.
If you wish to use the routing component I would suggest to update your Angular 2 version. Be aware that quite a few settings has changed in RC, so you'll probably will need to set up the config again from the official site and make few changes.
Another user had similar issue like you here and with upgrading the problem was solved. Just upgrade the version, fix the config and use this official documentation from here
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
