Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

No provider for Router?

Tags:

angular

routes

Im getting this error:

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:0 caused by: No provider for Router!

This is my app component:

import {Component} from '@angular/core'; import {LoginComponent} from './login/components/login.component'; @Component({     selector: 'my-app',     template: '<login></login>',  }) export class AppComponent {  } 

I tried this in my app module:

import { RouterModule } from '@angular/router';    imports: [     BrowserModule,     FormsModule,     HttpModule,     LoginModule,     RouterModule   ],   bootstrap: [AppComponent, RouterModule] 

But then i get this error:

Error: Error: No Directive annotation found on RouterModule

I found some examples but they use router-deprecated, and i dont have that folder. Do i need that or what? Any suggstion?

UPDATE:

This is my app.module:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { LoginModule } from './login/login.module'; import { RouterModule } from '@angular/router'; //import 'rxjs/Rx'; @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     FormsModule,     HttpModule,     LoginModule,     RouterModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { } 

app.component:

import {Component} from '@angular/core'; import {LoginComponent} from './login/components/login.component'; @Component({     selector: 'my-app',     template: '<login></login>',  }) export class AppComponent {  } 

And then i have login.component:

import {Component, EventEmitter, Input, OnChanges} from '@angular/core'; import {Observable} from 'rxjs/Rx'; import { LoginService } from '../services/login.service'; import { Login } from '../model/login' import {Router} from '@angular/router'; @Component({     selector: 'login',     templateUrl: 'login-form',  }) export class LoginComponent {   // Constructor with injected service       constructor(           private loginService: LoginService,           private router: Router           ){}        submitLogin(values){            // Variable to hold a reference of addComment/updateComment              let loginOperation:Observable<any>;              loginOperation = this.loginService.Login(values);              loginOperation.subscribe(                 function(response) { console.log("Success Response" + response)},                 function(error) { console.log("Error happened" + error)},                 function() {                    console.log("the subscription is completed");                      this.router.navigate(['/About']);                   }             );             } } 

Maybe problem is in this line:

 this.router.navigate(['/home']); 

This is my login.module:

import { NgModule }       from '@angular/core'; import { BrowserModule }  from '@angular/platform-browser'; import { FormsModule }    from '@angular/forms'; import { HttpModule, JsonpModule } from '@angular/http'; import { LoginComponent } from './components/login.component'; import { RouterModule } from '@angular/router';  import { LoginService } from './services/login.service';   @NgModule({   imports: [     BrowserModule,     FormsModule,      HttpModule,     JsonpModule,     RouterModule       ],   declarations: [     LoginComponent   ],    providers: [       LoginService   ],    exports:[     LoginComponent   ]  }) export class LoginModule { } 
like image 827
None Avatar asked Mar 16 '17 09:03

None


People also ask

What is Router Service in angular?

@angular/router. Implements the Angular Router service , which enables navigation from one view to the next as users perform application tasks.

Can not match any route?

This generally occurs when there is a mismatch in the routes specified, or a component which is not present in our routing configuration, or if there is the use of multiple routes in our angular application which is not properly configured.


2 Answers

Please use this module

RouterModule.forRoot(   [     { path: "", component: LoginComponent}   ] ) 

now just replace your <login></login> with <router-outlet></router-outlet> thats it

like image 96
Babar Bilal Avatar answered Oct 04 '22 04:10

Babar Bilal


I have also received this error when developing automatic tests for components. In this context the following import should be done:

import { RouterTestingModule } from "@angular/router/testing";  const testBedConfiguration = {   imports: [SharedModule,     BrowserAnimationsModule,     RouterTestingModule.withRoutes([]),   ], 
like image 36
Alexei - check Codidact Avatar answered Oct 04 '22 04:10

Alexei - check Codidact