Getting Angular2 error 'No provider for Router! (RouterOutlet -> Router)'
you have to use:
- ROUTER_BINDINGS in your bootstrap.
- in your index.html.
- if possible use state i.e as "employees" in capitalize i.r as "Employees". (in alpha 42 i have solve one problem this way).
i hope this will surely help you.
--UPDATE--
after the relese of alpha41:
ROUTER_BINDINGS
has been changed withROUTER_PROVIDERS
.- Router Aliases should be in the camel case manner.
- for the Router-outler and router-link you just have to import
ROUTER_DIRECTIVES
in your directives property in the component annotation. Router-link
expects the value to be an array of route names. for more info. refer here .
for more info regarding Routing you may refer to this tutorial here .
---Update2---
- Now ( as of alpha-49) router is exported as ng.router.
(According to alpha-47 all life cycle hooks renamed as.)
onActivate, onReuse, onDeactivate, canReuse, canDeactivate
To :--
routerOnActivate,routerOnReuse,routerOnDeactivate,routerCanReuse,routerCanDeactivate
---Update3---
router-link
is changed torouterLink
and routeconfig property changed to:
{path: '/abc', component: ABC, as: 'abc'}
to:{path: '/xyz' , component: XYZ, name: 'xyz'}
--Update 4 --
UPDATE TO ANGULAR2 RC
There are alot of changes has been made in routing in angular2 after RC some of them points i am going to mention here may help someone :-
angular2/router
has been changed with@angular/router
(also you can use old functionality of routing using import of@angular/router-deprecated
but as of now we have to use@angular/router
).@RouteConfig
has been changed with@Routes
.
for example :-
@Routes([ {path: '/crisis-center', component: CrisisListComponent}, {path: '/heroes', component: HeroListComponent}])
routerInjectables
was renamed toROUTER_BINDINGS
ROUTER_BINDINGS
was renamed toROUTER_PROVIDERS
USE ROUTER_PROVIDERS
ROUTER_PROVIDERS
is used to simplify bootstrapping the router.
It includes:
RouterRegistry
- the collection of registered routesLocationStrategy = PathLocationStrategy
- match by path
ROUTER_PROVIDERS
provides 'sane' defaults and should be used unless you need to need a different route LocationStrategy
.
Change:
bootstrap(DashboardAppComponent);
To:
bootstrap(DashboardAppComponent, [ ROUTER_PROVIDERS]);
Sources:
Route aliases need to be CamelCase (technically PascalCase)
Note: this was mentioned already in Pardeep's answer under #3
If you want to include a link to a route in your template via router-link
you have to make sure the alias (ie the name
property) of the route is PascalCase.
If you use plan to use router-link
modify the route to:
{ path: '/employees', component: EmployeesComponent, name: 'Employees'}
Then you can add the link in your template with:
<a [router-link]="['/Employees']">Employees Link</a>
RouterLink
dynamically inserts a href that matches the route path.
Note: Reading the issue/pr it appears this change was made to prevent users from confusing the <route-link>
binding with the route url
Sources:
Tip:
If you want to simplify your view directives use ROUTER_DIRECTIVES
It includes:
RouterLink
RouterOutlet
Update:
In the near future, RouterOutlet
/<router-outlet>
will be renamed to RouterViewport
/<router-viewport>
Source:
Update 2:
- The
RouteConfig
propertyas
has been renamed toname
Source:
Answer on Dec 23rd 2016 (Angular v2.4.1, Router v3.4.1 - should work for any NG v2.x.x + Router v3.x.x)
I just migrated three of our apps from the Webpack Starter Seed to Angular CLI (v1.0.0-beta.24) and hit this issue.
Only a tiny fraction of what's on the NG 2 massive router doc page is required:
An app-routing.module.ts file (typically in src/app/ folder) looking like this sample:
import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';const appRoutes: Routes = [ { path: '', component: YourHomePageComponent }, { path: 'next-page', component: NextComponent }];@NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], exports: [ RouterModule ]})export class AppRoutingModule {}
Import AppRoutingModule into your main module (typically src/app/app.module.ts):
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule // <--- The import you need to add ], providers: [], bootstrap: [AppComponent]})export class AppModule { }
Ensure you have <router-outlet></router-outlet>
somewhere in your main html (often src/app/app.component.html) as this is where router content is injected.