"yönlendirici çıkışı" bilinen bir öğe değil

Açısal ön uçlu bir mvc 5 projem var. Bu eğiticide https://angular.io/guide/router açıklandığı gibi yönlendirme eklemek istedim . Bu yüzden benim içine bir _Layout.cshtmlekledim

<base href="/">

ve rotamı app.modülümde oluşturdum. Ancak bunu çalıştırdığımda şu hatayı alıyorum:

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

Benim app.component satırında

<router-outlet></router-outlet>

Visual Studio'nun 'yönlendirici çıkışı' etiketini çözemediğini söyleyen bir hata veriyor. Bu hatayı nasıl düzeltebileceğime dair herhangi bir öneriniz var mı? Bir referansı veya içe aktarımı mı kaçırıyorum yoksa bir şeyi gözden mi kaçırıyorum?

Aşağıda benim package.json, app.component ve app.module var

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

}

Şunu deneyin:

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

Dışa aktarımları içinde yapılandırmanıza gerek yoktur AppModuleçünkü AppModuleuygulamanızdaki diğer modüller tarafından içe aktarılmayacaktır.

Bunu dene:

İthalat RouterModuleiçine seninapp.module.ts

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

Ekle RouterModuleiçine seninimports []

bunun gibi:

 imports: [    RouterModule,  ]

Birim testi yapıyorsanız ve bu hatayı alıyorsanız, öne çıkan bileşenlerinizin RouterTestingModuleiçine app.component.spec.tsveya içine aktarın ' spec.ts:

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

Ekle RouterTestingModulesenin içine imports: []beğendiniz

describe('AppComponent', () => {

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

Angular 6'yı angular-cli ile kullandığınızı ve yönlendirme faaliyetlerinden sorumlu ayrı bir yönlendirme modülü oluşturduğunuzu varsayarsak, rotalarınızı Routes dizisinde yapılandırın. RouterModule'u export dizisinde tanımladığınızdan emin olun. Kod şöyle görünecektir:

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

App.module.ts içerisine aşağıdaki kodu eklediğimde benim için çalışıyor

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

Doğru tanımı bulduğum Hero Editor örneğine teşekkür ederim:

Uygulama yönlendirme modülünü oluşturduğumda:

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

ve eklemek için app-routing.ts dosyasını güncelleyin:

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

İşte tam örnek:

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

ve app.module.ts içe aktarmalarına AppRoutingModule ekleyin:

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

Tüm rotalarınızı idare edecek bir yönlendirme bileşeni oluşturmak daha iyidir! Açısal web sitesi belgelerinden! Bu iyi bir uygulama!

ng modül uygulama yönlendirme --flat --module = app oluştur

Yukarıdaki CLI bir yönlendirme modülü oluşturur ve uygulama modülünüze ekler, oluşturulan bileşenden yapmanız gereken tek şey rotalarınızı bildirmektir, ayrıca şunu eklemeyi unutmayın:

exports: [
    RouterModule
  ],

Varsayılan olarak oluşturulan uygulama yönlendirme modülüyle birlikte gelmediği için ng modülü dekoratörünüze!

İki yol var. 1. app.module.tsdosyayı uygulamak istiyorsanız, o zaman:

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(Ayrılmış Yönlendirme Modülü) dosyasını uygulamak istiyorsanız, o zaman:

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

Bu sorun da benimle ilgiliydi. Bunun için basit bir numara.

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

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

yukarıdaki sırada olduğu gibi kullanın. ilk ithalat sonra beyanname.Benim için çalıştı.

App.module.ts dosyanızda

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 {

}

Bu kodu ekleyin. Mutlu Kodlama.

Herhangi biri hatayı alıyorsa, Hızlı ve Basit Çözüm:

Açısal projede "'yönlendirici çıkışı' bilinen bir unsur değildir",

Sonra,

"App.module.ts" dosyasına gidin ve aşağıdaki Satırı ekleyin:

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

Ve ayrıca içe aktarmalarda 'AppRoutingModule'.