Router-Ausgang ist kein bekanntes Element

Der folgende Code funktioniert:Router-Ausgang ist kein bekanntes Element

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

@NgModule({ 
    imports:  [BrowserModule, HttpModule], 
    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> 
<letter-recall></letter-recall>

Nach dem Winkel Routing Tutorial hier: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

ich meinen Code geändert:

/*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>

An diesem Punkt bekomme ich den folgenden Fehler:

"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. ....."

ich die folgenden Versionen verwende:

"@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"

Alle anderen Antworten auf SO angeben ich RouterModule importieren müssen, aber wie Sie oben sehen können, habe ich dies in der, wie vorgeschrieben tue Anleitung.

Irgendwelche Vorschläge, wo ich nach der Quelle dieses Fehlers suchen kann? Ich habe mit John Papas First Look-Tutorial zu PluralSight begonnen, aber es sieht so aus, als wäre der Code jetzt ein wenig alt. Das war, als ich das alles auszog und durch das Tutorial blank wurde und ich bekomme diesen Fehler ... Ich bin mir nicht sicher, wo ich als nächstes hinfahren soll.

Quelle

2016-12-20 Matt S

Versuchen Sie, alle Abhängigkeiten von Router zu importieren. –

Also habe ich diesen Zweig versteckt und neu angefangen. Die einzige Änderung (die ich finden kann) ist, dass ich die Version von zone.js von 0 aktualisiert habe.6.23 bis 0.7.2. Ich denke nicht, dass das verwandt ist, aber ... es funktioniert jetzt. Ich kann zu diesem Versteck zurückgehen und deinen Vorschlag versuchen, aber an diesem Punkt denke ich, dass ich diesen zu Gremlins kreieren kann. –

Wahrscheinlich bin ich hier zu spät, aber da ich genau das gleiche Problem habe und hier eine Antwort gefunden habe.

Verwenden Sie angular-cli? https://github.com/angular/angular-cli/pull/3252/files#diff-badc0de0550cb14f40374a6074eb2a8b

In meinem Fall hatte ich gerade mein neues Router-Modul in dem app.component.spec.ts Der js Import und NgModule Import zu importieren.

Starten Sie dann den Testserver neu.

Quelle

2017-02-12 21:26:43

Ich machte das gleiche, aber Browser-Konsole, immer noch Fehler angezeigt. Bitte hilf mir. –

Wie Erion sagte: In meinem Fall habe ich (hinzugefügt) zwei Dinge in app.component.spec.ts:

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

Quelle

2017-03-17 10:33:56 Gerard

Die Winkel Router Richtlinie Teil eines Teils lib ist: @ Winkel/Router und es handelt sich um einen Platzhalter, der von einem Winkelzustand ausgefüllt ist.

Hier bin ich Dividieren zwei Datei separat dh app.module.ts und app.router.ts

Hier app.router.ts

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

Hier app.module .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 { }

Jetzt können Sie <router-outlet></router-outlet> in Ihrer app.component.ts-Datei verwenden, und zeigt keine Störungen

Quelle

2017-10-27 06:11:12

Router-Ausgang ist kein bekanntes Element

Antwort

Verwandte Themen