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 { }
@angular/router. Implements the Angular Router service , which enables navigation from one view to the next as users perform application tasks.
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.
Please use this module
RouterModule.forRoot( [ { path: "", component: LoginComponent} ] )
now just replace your <login></login>
with <router-outlet></router-outlet>
thats it
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([]), ],
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