'เราเตอร์ - เต้ารับ' ไม่ใช่องค์ประกอบที่รู้จัก

ฉันมีโครงการ mvc 5 ที่มีส่วนหน้าเชิงมุม ผมอยากจะเพิ่มเส้นทางตามที่อธิบายไว้ในนี้กวดวิชาhttps://angular.io/guide/router ดังนั้นในของ_Layout.cshtmlฉันฉันจึงเพิ่มไฟล์

<base href="/">

และสร้างเส้นทางของฉันใน app.module ของฉัน แต่เมื่อฉันเรียกใช้สิ่งนี้ฉันได้รับข้อผิดพลาดต่อไปนี้:

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

ในแอพของฉันวางสาย

<router-outlet></router-outlet>

ให้ข้อผิดพลาดที่แจ้งว่า Visual studio ไม่สามารถแก้ไขแท็ก 'router-outlet' ได้ มีข้อเสนอแนะว่าจะแก้ไขข้อผิดพลาดนี้ได้อย่างไร ฉันไม่มีข้อมูลอ้างอิงหรือการนำเข้าหรือเพียงแค่มองข้ามบางสิ่งไปหรือไม่?

ด้านล่างนี้คือ package.json, app.component และ 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: `
          <h1>{{title}}</h1>
          <nav>
          <a routerLink="/dashboard">dashboard</a>
          </nav>
          <router-outlet></router-outlet>
          `
})
export class AppComponent {
    title = 'app Loaded';

}

ลองใช้:

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

ไม่จำเป็นต้องกำหนดค่าการส่งออกAppModuleเนื่องจากAppModuleจะไม่ถูกนำเข้าโดยโมดูลอื่นในแอปพลิเคชันของคุณ

ลองสิ่งนี้:

นำเข้าRouterModuleสู่ไฟล์app.module.ts

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

เพิ่มRouterModuleลงในไฟล์imports []

แบบนี้:

 imports: [    RouterModule,  ]

หากคุณกำลังทำการทดสอบหน่วยและได้รับข้อผิดพลาดนี้ให้นำเข้าRouterTestingModuleสู่app.component.spec.tsส่วนประกอบที่แนะนำของคุณหรือภายในspec.ts:

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

เพิ่มRouterTestingModuleในสิ่งที่คุณimports: []ชอบ

describe('AppComponent', () => {

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

สมมติว่าคุณใช้ Angular 6 กับ angular-cli และคุณได้สร้างโมดูลการกำหนดเส้นทางแยกต่างหากซึ่งรับผิดชอบกิจกรรมการกำหนดเส้นทาง - กำหนดค่าเส้นทางของคุณในอาร์เรย์เส้นทางตรวจสอบให้แน่ใจว่าคุณกำลังประกาศ RouterModule ในอาร์เรย์การส่งออก รหัสจะมีลักษณะดังนี้:

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

มันใช้ได้สำหรับฉันเมื่อฉันเพิ่มรหัสต่อไปนี้ใน app.module.ts

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

ขอบคุณตัวอย่าง Hero Editor ที่ฉันพบคำจำกัดความที่ถูกต้อง:

เมื่อฉันสร้างโมดูลการกำหนดเส้นทางแอป:

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

และอัปเดตไฟล์ app-Routing.ts เพื่อเพิ่ม:

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

นี่คือตัวอย่างทั้งหมด:

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

และเพิ่ม AppRoutingModule ในการนำเข้า app.module.ts:

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

เป็นการดีกว่าที่จะสร้างส่วนประกอบการกำหนดเส้นทางที่จะจัดการทุกเส้นทางของคุณ! จากเอกสารเว็บไซต์เชิงมุม! นั่นเป็นแนวทางปฏิบัติที่ดี!

ng สร้างโมดูลการกำหนดเส้นทางแอพ --flat --module = app

CLI ข้างต้นสร้างโมดูลการกำหนดเส้นทางและเพิ่มลงในโมดูลแอปของคุณสิ่งที่คุณต้องทำจากส่วนประกอบที่สร้างขึ้นคือการประกาศเส้นทางของคุณและอย่าลืมเพิ่มสิ่งนี้:

exports: [
    RouterModule
  ],

ไปยังมัณฑนากร ng-module ของคุณเนื่องจากมันไม่ได้มาพร้อมกับโมดูลการกำหนดเส้นทางแอพที่สร้างขึ้นโดยค่าเริ่มต้น!

มีสองวิธี 1. หากคุณต้องการใช้app.module.tsไฟล์แล้ว:

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. หากคุณต้องการใช้งานไฟล์app-routing.module.ts(Separated Routing Module) แล้ว:

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

ปัญหานี้อยู่กับฉันด้วย เคล็ดลับง่ายๆสำหรับมัน

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

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

ใช้ตามลำดับข้างต้นนำเข้าครั้งแรกแล้วประกาศมันใช้ได้ผลสำหรับฉัน

ในไฟล์ app.module.ts ของคุณ

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 {

}

เพิ่มรหัสนี้ Happy Coding.

นี่คือวิธีแก้ปัญหาที่ง่ายและรวดเร็วหากใครได้รับข้อผิดพลาด:

"" เราเตอร์ - เต้ารับ "ไม่ใช่องค์ประกอบที่รู้จัก" ในโครงการเชิงมุม

จากนั้น

ไปที่ไฟล์ "app.module.ts" และเพิ่มบรรทัดต่อไปนี้:

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

และ 'AppRoutingModule' ในการนำเข้า