javascript - Angular 7 :Error with Angular routing **'router-outlet'** is not a known element:

Question

I have tried to include all imports to the necessary files,But I have got the following error while compiling. How could I solve it?

I have generated four differnet commonents Menu,home,contact,and about.Additional to this thare are also Header component that will later help to contain the memu bar to switch between the differnt components.And also footer component.The app-routing.ts and routes.ts files are also attached with this file,which helps for routing purpose.

'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. ("<app-header></app-header>
    [ERROR ->]<router-outlet></router-outlet>
    <app-footer></app-footer>"): ng:///AppModule/AppComponent.html@1:0
        at syntaxError (compiler.js:1021)
        at TemplateParser.push../node_modules/@angular/compiler/fesm5      /compiler.js.TemplateParser.parse (compiler.js:14830)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24018)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24005)
        at compiler.js:23948
        at Set.forEach (<anonymous>)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23948)
        at compiler.js:23858
        at Object.then (compiler.js:1012)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)


      

routes.ts file

 

 

      import { Routes } from '@angular/router';
        
        import { MenuComponent } from '../menu/menu.component';
        import { DishdetailComponent } from '../dishdetail/dishdetail.component';
        import { HomeComponent } from '../home/home.component';
        import { AboutComponent } from '../about/about.component';
        import { ContactComponent } from '../contact/contact.component';
        
        export const routes: Routes = [
          { path: 'home',  component: HomeComponent },
          { path: 'menu',     component: MenuComponent },
          { path: '', redirectTo: '/home', pathMatch: 'full' }
                      ];

question from:https://stackoverflow.com/questions/66046560/angular-7-error-with-angular-routing-router-outlet-is-not-a-known-element

Answer 1

I see you are missing app-routing.module.ts inside the imports of AppModule

@NgModule({
  imports: [
    CommonModule,
    routingModule
  ],

})
export class AppModule{ }