angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.74k stars 11.98k forks source link

Unit test error: Router outlet is not a known element #11057

Closed mariadigiledge closed 5 years ago

mariadigiledge commented 6 years ago

i am getting following error when running a unit test using karma and jasmine

Error: Failed: Template parse errors: 'router-outlet' is not a known element:

  1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
  2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" home [ERROR ->] "): ng:///DynamicTestModule/AppComponent.html@5:2

My app.module.ts

screen shot 2018-05-29 at 7 27 17 pm

app.component.html screen shot 2018-05-29 at 7 27 35 pm

app.component.ts screen shot 2018-05-29 at 7 27 29 pm

app.component.spec.ts screen shot 2018-05-29 at 7 27 56 pm

BenjaminHofstetter commented 6 years ago

Add

import { RouterTestingModule } from '@angular/router/testing';

and then

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        RouterTestingModule
      ]
....
mariadigiledge commented 6 years ago

where should i add this code

On Wed, May 30, 2018 at 12:49 AM, Benjamin Hofstetter < notifications@github.com> wrote:

Add

import { RouterTestingModule } from '@angular/router/testing';

and then

describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], imports: [ RouterTestingModule ]....

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/11057#issuecomment-392908190, or mute the thread https://github.com/notifications/unsubscribe-auth/Al4yROTYqPP2kZOfArrUkaB30NU7nGgcks5t3Z80gaJpZM4URjih .

BenjaminHofstetter commented 6 years ago

@mariadigiledge do you need still help?

mariadigiledge commented 6 years ago

Yes

On Tue, Jun 12, 2018, 11:13 AM Benjamin Hofstetter notifications@github.com wrote:

@mariadigiledge https://github.com/mariadigiledge do you need still help?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/11057#issuecomment-396471969, or mute the thread https://github.com/notifications/unsubscribe-auth/Al4yRHUk2K4_XhVsH6qoTWNbPCRZYr-Oks5t71TrgaJpZM4URjih .

BenjaminHofstetter commented 6 years ago

ok.. at the top of your xxx.spec.ts file. Add import { RouterTestingModule } from '@angular/router/testing';

Then in the section

  TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [    //  <------ add the imports Array with the RouterTesting Module
        RouterTestingModule
      ]
alan-agius4 commented 5 years ago

The RouterTestingModule is automatically added to app.component.spec.ts when you create an application with routing

ghost commented 5 years ago

Hello,

Here is the Quick and Simple Solution if anyone is getting the error:

" 'router-outlet' is not a known element " in angular project,

then,

Just go to the " app.module.ts " file & add the following Line:

" import { AppRoutingModule } from './app-routing.module'; "

and also ' AppRoutingModule ' in imports.

Thank you!!

pramodjb commented 5 years ago

hello Every one please help me, i'm using angular7 and ionic 4 version , i'm getting error App.module.ts

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { LanguagePopoverPageModule } from './pages/language-popover/language-popover.module'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { IonicStorageModule } from '@ionic/storage'; import { LocalStorageModule } from 'angular-2-local-storage'; import { AuthServiceService } from './auth-service.service'; import { HttpClientModule, HttpClient } from '@angular/common/http'; import { TranslateModule, TranslateLoader} from '@ngx-translate/core'; import { TranslateHttpLoader} from '@ngx-translate/http-loader';

export function createTranslateLoader(http: HttpClient) { return new TranslateHttpLoader(http, 'assets/i18n/', '.json'); }

@NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, HttpClientModule, AppRoutingModule, IonicStorageModule.forRoot(), TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (createTranslateLoader), deps: [HttpClient] } }), LanguagePopoverPageModule, LocalStorageModule.forRoot()], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, AuthServiceService ], bootstrap: [AppComponent] }) export class AppModule {}

app-routing.module.ts import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'home', loadChildren: './home/home.module#HomePageModule' }, { path: 'login', loadChildren: './login/login.module#LoginPageModule' }, { path: 'language-popover', loadChildren: './pages/language-popover/language-popover.module#LanguagePopoverPageModule' },

];

@NgModule({ imports: [ RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ], exports: [RouterModule] }) export class AppRoutingModule { static forRoot: any; } ionicerr

advance thanks plz help how to clear this error,i'm stuck with this

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.