ルータ-アウトレットは、既知の

は、次のコードは動作します

/*index.html*/ 
<head> 
    <base href="/"> 

/*app.module.ts*/ 
import { NgModule } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 
import { AppComponent } from './app.component'; 
import { LetterRecall } from './letterRecall/letterRecall.component'; 

@NgModule({ 
    imports:  [BrowserModule, 
        HttpModule, 
        RouterModule.forRoot([ 
         { path: 'letters', component: LetterRecall } 
        ])], 
    declarations: [AppComponent, LetterRecall], 
    bootstrap: [AppComponent], 
}) 
export class AppModule {} 

/*app.component.ts*/ 
import {Component} from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.component.html' 
}) 
export class AppComponent { } 

/*app.component.html*/ 
<h3>Title</h3> 
<a routerLink="/letters">Letters</a> 
<router-outlet></router-outlet>

：私は自分のコードを修正

https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

この時点で私は次のエラーを受け取ります：

"Unhandled Promise rejection: 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. ....."

私は次のバージョン使用しています：SOに規定され、私はこれをやっている、あなたは上記を参照できるように私はRouterModuleをインポートする必要がなく、指示に他の回答のすべて

"@angular/common": "2.4.0", 
    "@angular/compiler": "2.4.0", 
    "@angular/core": "2.4.0", 
    "@angular/forms": "2.4.0", 
    "@angular/http": "2.4.0", 
    "@angular/platform-browser": "2.4.0", 
    "@angular/platform-browser-dynamic": "2.4.0", 
    "@angular/router": "3.4.0"

をチュートリアル。

このエラーの原因をどこから探すことができますか？ PluralSightでJohn PapaのFirst Lookチュートリアルを使い始めましたが、コードは少し古いようです。それは私がすべてを取り除き、チュートリアルを通して裸の骨に行きました、そして、私はこのエラーを受けます...私は次にどこに向かうべきかわかりません。

出典

2016-12-20 Matt S

は表示されません。 –

私はその枝を隠して始めました。私が見つけることができる唯一の変更は、zone.jsのバージョンを0から更新したことです。6.23〜0.7.2。私はこれが関連しているとは思わないが...今は機能する。私はその秘密に戻ってあなたの提案を試みるかもしれませんが、この時点で私はこれをグレムリンまでチョークすることができると思います。 –

おそらく私はここに遅れていますが、私はexaclty同じ問題を持っているので、ここで答えを見つけました。

angle-cliを使用していますか？ https://github.com/angular/angular-cli/pull/3252/files#diff-badc0de0550cb14f40374a6074eb2a8b

は、私の場合、私はちょうどapp.component.spec.ts JSのインポートとNgModuleインポートに私の新しいルータモジュールをインポートする必要がありました。

次に、テストサーバーを再起動します。

出典

2017-02-12 21:26:43

私は同じことをしましたが、ブラウザコンソールはまだエラーを表示しています。私を助けてください。 –

Erionが言ったように：私の場合は、（追加）でしたapp.component.spec.tsで二つのこと：

import { RouterTestingModule } from '@angular/router/testing'; 
... 
TestBed.configureTestingModule({ 
    imports: [ RouterTestingModule ], 
    declarations: [ 
    AppComponent 
    ], 
}).compileComponents();

出典

2017-03-17 10:33:56 Gerard

角度ルータディレクティブは、LIBの一部の一部です：角度/ルータ@とそれは、角度状態によって満たされるプレースホルダーとして作用する。

ここで私は2つのファイルを別々すなわちapp.module.tsを分割しています。ここで

をapp.router.ts app.module

import { NgModule } from '@angular/core'; 
 
import { RouterModule, Routes } from '@angular/router'; 
 
import { MainComponent } from './components/main/main.component'; 
 
import { AppComponent } from './app.component'; 
 

 
const appRoutes: Routes = [ 
 
    { path: 'main', component: MainComponent }, 
 
    { path: '', redirectTo: '/main', pathMatch: 'full' } 
 
]; 
 
@NgModule({ 
 
    imports: [ 
 
    RouterModule.forRoot(appRoutes) 
 
    ], 
 
    exports: [ 
 
    RouterModule 
 
    ] 
 
}) 
 
export class AppRouter { }

をここapp.router.ts .ts

import { BrowserModule } from '@angular/platform-browser'; 
 
import { NgModule } from '@angular/core'; 
 
import { AppRouter } from './app.router'; 
 
import { AppComponent } from './app.component'; 
 
import { MainComponent } from './components/main/main.component'; 
 

 
@NgModule({ 
 
    declarations: [ 
 
    AppComponent, 
 
    MainComponent 
 
    ], 
 
    imports: [ 
 
    BrowserModule, 
 
    AppRouter 
 
    ], 
 
    providers: [], 
 
    bootstrap: [AppComponent] 
 
}) 
 
export class AppModule { }

今すぐあなたのapp.component.tsファイルで<router-outlet></router-outlet>を使用することができますし、ルータのすべての依存関係をインポートしようとするすべてのエラー

出典

2017-10-27 06:11:12

ルータ-アウトレットは、既知の

答えて

関連する問題