router-out is not a known element

Question

I have an mvc 5 project with a corner interface. I wanted to add routing as described in this lesson https://angular.io/guide/router . So in my _Layout.cshtml I added

<base href="/"> 

and created my routing in my application .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. (" <a routerLink="/dashboard">dashboard</a> </nav> [ERROR ->]<router-outlet></router-outlet> "): ng:///AppModule/ AppComponent.html@5 :0 

In my app.component line

 <router-outlet></router-outlet> 

gives an error telling me that Visual Studio cannot resolve the 'router-outlet' tag. Any suggestions how can I fix this error? Am I missing a link or import or don’t notice 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:

 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:

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ' <h1>{{title}}</h1> <nav> <a routerLink="/dashboard">dashboard</a> </nav> <router-outlet></router-outlet> ' }) export class AppComponent { title = 'app Loaded'; } 

Answer 1

Try:

 @NgModule({ imports: [ BrowserModule, RouterModule.forRoot(appRoutes), FormsModule ], declarations: [ AppComponent, DashboardComponent ], bootstrap: [AppComponent] }) export class AppModule { } 

There is no need to configure export in AppModule , because AppModule will not be imported by other modules in your application.

Answer 2

Try it:

Import RouterModule into your app.module.ts

 import { RouterModule } from '@angular/router'; 

Add RouterModule to your imports []

like this:

  imports: [ RouterModule, ] 

Answer 3

Assuming you are using Angular 6 with angular-cli and have created a separate routing module that is responsible for routing actions, configure the routes in the Routes array. Make sure you declare the RouterModule in the export array. The code will look like this:

 @NgModule({ imports: [ RouterModule, RouterModule.forRoot(appRoutes) // other imports here ], exports: [RouterModule] }) export class AppRoutingModule { } 

Answer 4

If you do unit testing and get this error, then the RouterTestingModule in your app.component.spec.ts or in the RouterTestingModule your recommended components

 import { RouterTestingModule } from '@angular/router/testing'; Add RouterTestingModule into your imports [] like describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule ], declarations: [ AppComponent ], }).compileComponents(); })); 

Answer 5

This works for me when I add the following code to app.module.ts

 @NgModule({ ..., imports: [ AppRoutingModule ], ... }) 

Answer 6

Its just better to create a routing component that will handle all your routes! From the corner site documentation! This is a good practice!

ng generate app-routing module --flat --module = application

The aforementioned CLI creates a routing module and adds everything you need to do from the generated component to your application module to declare your routes, also remember to add this:

 exports: [ RouterModule ], 

to your ng module designer, since it does not come with the default routing application module created!

Answer 7

Thanks, example of a hero editor, where I found the correct definition:

When I create the application 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 is a complete 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 to the app.module.ts import:

 @NgModule({ declarations: [ AppComponent, ... ], imports: [ BrowserModule, FormsModule, AppRoutingModule ], providers: [...], bootstrap: [AppComponent] }) 

Answer 8

This problem was with me. A simple trick.

  @NgModule({ imports: [ ..... ], declarations: [ ...... ], providers: [...], bootstrap: [...] }) 

use it as in the above order. Imports ads first. He worked for me.

Answer 9

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. Good coding.

Answer 10

Here is a quick and easy solution if anyone gets an error:

"Router Outlet" is not a known element "in a corner project,

Then,

Just go to the app.module.ts file and add the following line:

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

And also the "AppRoutingModule" in the import.