router-outlet is not a known element

Question

I have a mvc 5 project with a angular frontend   I wanted to add routing as described in this tutorial https   angular io guide router  So in my  Layout cshtml I added a    lt base href     gt    and created my routing in my app module  But when I run this I get the following error    Error  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          lt a routerLink   dashboard  gt dashboard lt  a gt       lt  nav gt       ERROR - gt   lt router-outlet gt  lt  router-outlet gt           ng    AppModule AppComponent html 5 0   In my app component the line    lt router-outlet gt  lt  router-outlet gt    gives an error telling me that Visual studio cannot resolve the tag  router-outlet   Any suggestions how I can fix this error  Am I missing a reference or a import or just overlooking something   Below are my package json  app component and app module  package json          version    1 0 0        name    app        private   true       scripts            dependencies           angular common     4 2 2         angular compiler     4 2 2         angular core     4 2 2         angular forms     4 2 2         angular http     4 2 2         angular platform-browser     4 2 2         angular platform-browser-dynamic     4 2 2         angular router     4 2 2         types core-js     0 9 41        angular-in-memory-web-api     0 3 2        bootstrap     3 3 7        core-js     2 4 1        graceful-fs     4 0 0        ie-shim     0 1 0        minimatch     3 0 4        reflect-metadata     0 1 10        rxjs     5 0 1        systemjs     0 20 12        zone js     0 8 12              devDependencies          gulp     3 9 1        gulp-clean     0 3 2        gulp-concat     2 6 1        gulp-tsc     1 3 2        gulp-typescript     3 1 7        path     0 12 7        typescript     2 3 3            app module ts   import   NgModule   from   angular core   import   BrowserModule   from   angular platform-browser   import   FormsModule   from   angular forms   import   RouterModule  Routes   from   angular router    import   AppComponent   from    app component   import  DashboardComponent  from    dashboard dashboard component       const appRoutes  Routes           path          redirectTo    dashboard       pathMatch   full       component  DashboardComponent            path   dashboard       component  DashboardComponent       NgModule   imports        RouterModule forRoot appRoutes       BrowserModule      FormsModule                   exports   RouterModule   declarations        AppComponent        DashboardComponent          bootstrap   AppComponent     export class AppModule        app component ts   import   Component   from   angular core     Component   selector   my-app   template               lt h1 gt   title   lt  h1 gt             lt nav gt             lt a routerLink   dashboard  gt dashboard lt  a gt             lt  nav gt             lt router-outlet gt  lt  router-outlet gt                 export class AppComponent       title    app Loaded

User · Answer

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.

User · Answer

In your app module ts file  import   RouterModule  Routes   from   angular router    const appRoutes  Routes           path          redirectTo    dashboard       pathMatch   full       component  DashboardComponent            path   dashboard       component  DashboardComponent        NgModule   imports        BrowserModule      RouterModule forRoot appRoutes       FormsModule                   declarations        AppComponent        DashboardComponent          bootstrap   AppComponent     export class AppModule        Add this code  Happy Coding

User · Answer

Thank you Hero Editor example  where I found the correct definition   When I generate app routing module   ng generate module app-routing --flat --module app   and update the app-routing ts file to add    NgModule     imports    RouterModule forRoot routes       exports    RouterModule        Here are the full example   import   NgModule               from   angular core   import   RouterModule  Routes   from   angular router    import   DashboardComponent     from    dashboard dashboard component   import   HeroesComponent        from    heroes heroes component   import   HeroDetailComponent    from    hero-detail hero-detail component    const routes  Routes         path      redirectTo    dashboard   pathMatch   full         path   dashboard   component  DashboardComponent        path   detail  id   component  HeroDetailComponent        path   heroes   component  HeroesComponent        NgModule     imports    RouterModule forRoot routes       exports    RouterModule      export class AppRoutingModule      and add AppRoutingModule into app module ts imports    NgModule     declarations        AppComponent                 imports        BrowserModule      FormsModule      AppRoutingModule        providers           bootstrap   AppComponent

User · Answer

Assuming you are using Angular 6 with angular-cli and you have created a separate routing module which is responsible for routing activities - configure your routes in Routes array Make sure that you are declaring RouterModule in exports array  Code would look like this    NgModule         imports          RouterModule        RouterModule forRoot appRoutes          other imports here              exports   RouterModule     export class AppRoutingModule

User · Answer

Its just better to create a routing component that would handle all your routes  From the angular website documentation  That s good practice    ng generate module app-routing --flat --module app  The above CLI generates a routing module and adds to your app module  all you need to do from the generated component is to declare your routes  also don t forget to add this   exports        RouterModule        to your ng-module decorator as it doesn t come with the generated app-routing module by default

User · Answer

There are two ways  1  if you want to implement app module ts file then    x000D   x000D  import   Routes  RouterModule   from   angular router   x000D   x000D  const appRoutes  Routes     x000D      path      component  HomeComponent    x000D      path   user   component  UserComponent    x000D      path   server   component  ServerComponent   x000D     x000D   x000D   NgModule   x000D    imports    x000D      RouterModule forRoot appRoutes  x000D      x000D     x000D  export class AppModule     x000D   x000D   x000D     if you want to implement app-routing module ts  Separated Routing Module  file then     x000D   x000D    app-routing module ts x000D  import   NgModule   from   angular core   x000D  import   Routes  RouterModule   from   angular router   x000D   x000D  const appRoutes  Routes     x000D      path      component  HomeComponent    x000D      path   users   component  UsersComponent    x000D      path   servers   component  ServersComponent   x000D     x000D   x000D   NgModule   x000D    imports    x000D      RouterModule forRoot appRoutes  x000D       x000D    exports   RouterModule  x000D     x000D  export class AppRoutingModule     x000D   x000D                                                                     x000D   x000D    app module ts x000D  import   AppRoutingModule   from    app-routing module   x000D   x000D   NgModule   x000D    imports    x000D      AppRoutingModule x000D      x000D     x000D  export class AppModule     x000D   x000D   x000D

User · Answer

If you are doing unit testing and get this error then Import RouterTestingModule into your app component spec ts or inside your featured components  spec ts   import   RouterTestingModule   from   angular router testing     Add RouterTestingModule into your imports     like   describe  AppComponent        gt       beforeEach async      gt            TestBed configureTestingModule             imports                RouterTestingModule                    declarations                AppComponent                         compileComponents

User · Answer

Try with    NgModule     imports          BrowserModule        RouterModule forRoot appRoutes         FormsModule                       declarations          AppComponent          DashboardComponent              bootstrap   AppComponent     export class AppModule       There is no need to configure the exports in AppModule  because AppModule wont be imported by other modules in your application

User · Answer

Try this   Import RouterModule into your app module ts  import   RouterModule   from   angular router     Add RouterModule into your imports     like this    imports       RouterModule

User · Answer

In my case it happen because RouterModule was missed in the import

User · Answer

This issue was with me also  Simple trick for it     NgModule     imports                          declarations                   providers          bootstrap              use it as in above order first imports then declarations It worked for me

User · Answer

It works for me  when i add following code in app module ts    NgModule           imports         AppRoutingModule

[angular] 'router-outlet' is not a known element

Examples related to angular

Examples related to typescript

Examples related to asp.net-mvc-5

Examples related to angular2-routing