rc1 router "No provider for Router"
Solution 1
Import ROUTER_DIRECTIVES, Router and Routes from '@angular/router'
Replace @RouteConfig with @Routes
This helped me to get it working. https://angular.io/docs/ts/latest/guide/router-deprecated.html
Solution 2
You need to provide the router, something like this :
...
import { RouteConfig, ROUTER_DIRECTIVES, Router, ROUTER_PROVIDERS } from '@angular/router-deprecated';
@Component({
selector: 'my-app',
templateUrl: 'app/appshell/app.component.html',
styleUrls: ['app/appshell/app.component.css'],
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
...
More about how providers works here : https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html
Shawn
Updated on June 07, 2022Comments
-
Shawn almost 2 years
This is a follow up post for an error that come after @Shuhei helped me resolved the config.js problem angular 2 rc router angular2-polyfills.js:349 Error
This is my app.component.ts
import { Component,provide } from '@angular/core'; import { RouteConfig, ROUTER_DIRECTIVES,Router } from '@angular/router-deprecated'; import { HeroShellComponent } from '../apps/hero/hero-shell.component'; import {HomeComponent} from '../home/home.component'; import {Login} from '../login/auth.component'; import {Authentication} from '../login/auth.service'; import {isLoggedin} from '../login/auth.isLoggedin'; @Component({ selector: 'my-app', templateUrl: 'app/appshell/app.component.html', styleUrls: ['app/appshell/app.component.css'], directives: [ROUTER_DIRECTIVES], }) @RouteConfig([ { path: '/app/apps/hero/...', name: 'Hero Sample', component: HeroShellComponent, }, { path: '/app/apps/testapp1', name: 'Testapp1', component: HomeComponent }, { path: '/', redirectTo: ['Login'] }, { path: '/home', name: 'Home', component: HomeComponent }, { path: '/login', name: 'Login', component: Login, useAsDefault: true }, ]) export class AppComponent { title = 'Apps'; constructor(public _auth: Authentication, public router: Router ) {} onLogout() { this._auth.logout(); this.router.navigate(['/Login']); } }
All other components injects Router through constructor like this above. Router is certainly provided.
path: '/app/apps/hero/...'
is for the child router redirect.
The error I got is
browser_adapter.ts:78 EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: No provider for Router!. ORIGINAL STACKTRACE: Error: DI Exception at NoProviderError.BaseException [as constructor] (npmcdn.com/@angular/[email protected]/src/facade/…) at NoProviderError.AbstractProviderError [as constructor]
If the same code worked in beta, what could make it not working in RC1 router-deprecated?
Update: index.html
<html> <head> <base href="/"> <title>My Tests</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/app/public/css/styles.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-sham.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.25/system-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="/app/systemjs.config.js"></script> <script> System.import('app/main').then(null, console.error.bind(console)); </script> </head> <body> <my-app>Loading...</my-app> <script>document.write('<base href="' + document.location + '" />');</script> </body> </html>
-
Shawn almost 8 yearsthanks for the response. I added providers: [ROUTER_PROVIDERS] but I still got the same error in the same location. It blow up before reaching auth.component.ts.
-
tibbus almost 8 yearsI don't know, it works fine for me in rc.1, probably something is wrong in your app.
-
Shawn almost 8 yearsI added your line of code to index.html but still the same error. Any further thoughts are welcome.
-
nadav almost 8 yearsWorks for me , using Typescript. Thanks
-
bFunc almost 8 yearsimport string should be: import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS }