'router-outlet' bukanlah elemen yang dikenal

Saya memiliki proyek mvc 5 dengan frontend sudut. Saya ingin menambahkan perutean seperti yang dijelaskan dalam tutorial ini https://angular.io/guide/router . Jadi di saya, _Layout.cshtmlsaya menambahkan

<base href="/">

dan membuat perutean saya di app.module saya. Tetapi ketika saya menjalankan ini saya mendapatkan kesalahan berikut:

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

Di app.component saya baris

<router-outlet></router-outlet>

memberikan kesalahan yang memberi tahu saya bahwa Visual studio tidak dapat menyelesaikan tag 'router-outlet'. Ada saran bagaimana saya bisa memperbaiki kesalahan ini? Apakah saya melewatkan referensi atau impor atau hanya melewatkan sesuatu?

Di bawah ini adalah package.json, app.component dan app.module saya

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: `
          <h1>{{title}}</h1>
          <nav>
          <a routerLink="/dashboard">dashboard</a>
          </nav>
          <router-outlet></router-outlet>
          `
})
export class AppComponent {
    title = 'app Loaded';

}

Coba dengan:

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

Tidak perlu mengonfigurasi ekspor AppModule, karena AppModuletidak akan diimpor oleh modul lain di aplikasi Anda.

Coba ini:

Impor RouterModulekeapp.module.ts

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

Tambahkan RouterModulekeimports []

seperti ini:

 imports: [    RouterModule,  ]

Jika Anda melakukan pengujian unit dan mendapatkan kesalahan ini, Impor RouterTestingModuleke dalam app.component.spec.tsatau di dalam komponen unggulan Anda ' spec.ts:

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

Tambahkan RouterTestingModuleke imports: []suka Anda

describe('AppComponent', () => {

  beforeEach(async(() => {    
    TestBed.configureTestingModule({    
      imports: [    
        RouterTestingModule    
      ],
      declarations: [    
        AppComponent    
      ],    
    }).compileComponents();    
  }));

Dengan asumsi Anda menggunakan Angular 6 dengan angular-cli dan Anda telah membuat modul perutean terpisah yang bertanggung jawab untuk aktivitas perutean - konfigurasikan rute Anda dalam larik Rute. Pastikan bahwa Anda mendeklarasikan RouterModule dalam larik ekspor. Kode akan terlihat seperti ini:

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

Ini berfungsi untuk saya, ketika saya menambahkan kode berikut di app.module.ts

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

Terima kasih contoh Hero Editor, di mana saya menemukan definisi yang benar:

Saat saya membuat modul perutean aplikasi:

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

dan perbarui file app-routing.ts untuk menambahkan:

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

Berikut contoh lengkapnya:

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 {}

dan tambahkan AppRoutingModule ke dalam impor app.module.ts:

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

Lebih baik membuat komponen perutean yang akan menangani semua rute Anda! Dari dokumentasi situs sudut! Itu praktik yang bagus!

ng menghasilkan modul app-routing --flat --module = app

CLI di atas menghasilkan modul perutean dan menambahkan ke modul aplikasi Anda, yang perlu Anda lakukan dari komponen yang dihasilkan adalah mendeklarasikan rute Anda, juga jangan lupa untuk menambahkan ini:

exports: [
    RouterModule
  ],

ke dekorator ng-module karena tidak disertakan dengan modul perutean aplikasi yang dihasilkan secara default!

Ada dua cara. 1. jika Anda ingin mengimplementasikan app.module.tsfile maka:

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

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'user', component: UserComponent },
  { path: 'server', component: ServerComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ]
})
export class AppModule { }

2. jika Anda ingin menerapkan app-routing.module.tsfile (Modul Perutean Terpisah) maka:

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

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'servers', component: ServersComponent }
];

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

//................................................................

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

@NgModule({
  imports: [
    AppRoutingModule
  ]
})
export class AppModule { }

Masalah ini juga terjadi pada saya. Trik sederhana untuk itu.

 @NgModule({
  imports: [
   .....       
  ],
 declarations: [
  ......
 ],

 providers: [...],
 bootstrap: [...]
 })

gunakan seperti di atas order.first impor lalu deklarasi. Itu berhasil untuk saya.

Di file app.module.ts Anda

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 {

}

Tambahkan kode ini. Selamat Coding.

Inilah Solusi Cepat dan Sederhana jika ada yang mendapatkan kesalahan:

"'router-outlet' bukan elemen yang dikenal" dalam proyek bersudut,

Kemudian,

Cukup buka file "app.module.ts" & tambahkan baris berikut:

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

Dan juga 'AppRoutingModule' di impor.