'router-outlet' không phải là một phần tử đã biết

Tôi có một dự án mvc 5 với giao diện người dùng đầy góc cạnh. Tôi muốn thêm định tuyến như được mô tả trong hướng dẫn này https://angular.io/guide/router . Vì vậy, trong của tôi, _Layout.cshtmltôi đã thêm một

<base href="/">

và tạo định tuyến trong app.module của tôi. Nhưng khi tôi chạy cái này, tôi gặp lỗi sau:

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

Trong dòng app.component của tôi

<router-outlet></router-outlet>

đưa ra lỗi cho tôi biết rằng Visual studio không thể giải quyết thẻ 'router-outlet'. Bất kỳ đề xuất làm thế nào tôi có thể sửa lỗi này? Tôi có thiếu tham chiếu hoặc nhập hoặc chỉ bỏ sót một cái gì đó không?

Dưới đây là package.json, app.component và app.module của tôi

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';

}

Hãy thử với:

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

Không cần phải định cấu hình các xuất trong AppModule, vì AppModulesẽ không được nhập bởi các mô-đun khác trong ứng dụng của bạn.

Thử đi:

Nhập RouterModulevào của bạnapp.module.ts

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

Thêm RouterModulevào của bạnimports []

như thế này:

 imports: [    RouterModule,  ]

Nếu bạn đang thực hiện kiểm thử đơn vị và gặp lỗi này thì hãy Nhập RouterTestingModulevào của bạn app.component.spec.tshoặc bên trong các thành phần nổi bật của bạn ' spec.ts:

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

Thêm RouterTestingModulevào imports: []thích của bạn

describe('AppComponent', () => {

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

Giả sử bạn đang sử dụng Angular 6 với angle-cli và bạn đã tạo một mô-đun định tuyến riêng chịu trách nhiệm cho các hoạt động định tuyến - hãy cấu hình các tuyến của bạn trong mảng Routes. Mã sẽ như thế này:

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

Nó phù hợp với tôi, khi tôi thêm mã sau vào app.module.ts

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

Cảm ơn ví dụ về Hero Editor, nơi tôi đã tìm thấy định nghĩa chính xác:

Khi tôi tạo mô-đun định tuyến ứng dụng:

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

và cập nhật tệp app-routing.ts để thêm:

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

Đây là ví dụ đầy đủ:

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

và thêm AppRoutingModule vào nhập app.module.ts:

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

Tốt hơn hết là tạo một thành phần định tuyến có thể xử lý tất cả các tuyến đường của bạn! Từ tài liệu trang web góc cạnh! Đó là thực hành tốt!

ng tạo định tuyến ứng dụng mô-đun --flat --module = app

CLI ở trên tạo mô-đun định tuyến và thêm vào mô-đun ứng dụng của bạn, tất cả những gì bạn cần làm từ thành phần được tạo là khai báo các tuyến của bạn, cũng đừng quên thêm điều này:

exports: [
    RouterModule
  ],

cho trình trang trí ng-module của bạn vì nó không đi kèm với mô-đun định tuyến ứng dụng được tạo theo mặc định!

Có hai cách. 1. nếu bạn muốn triển khai app.module.tstệp thì:

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. nếu bạn muốn triển khai app-routing.module.tstệp (Mô-đun định tuyến riêng) thì:

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

Vấn đề này cũng xảy ra với tôi. Thủ thuật đơn giản cho nó.

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

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

sử dụng nó như theo thứ tự ở trên. nhập khẩu đầu tiên sau đó khai báo. Nó làm việc cho tôi.

Trong tệp app.module.ts của bạn

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 {

}

Thêm mã này. Chúc bạn mã hóa vui vẻ.

Đây là Giải pháp nhanh chóng và đơn giản nếu bất kỳ ai gặp lỗi:

"'router-outlet' không phải là một phần tử đã biết" trong dự án góc cạnh,

Sau đó,

Chỉ cần truy cập tệp "app.module.ts" và thêm Dòng sau:

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

Và cả 'AppRoutingModule' trong nhập khẩu.