javascript - “router-outlet”不是 Angular 2 的已知元素

Question

我正在使用universal-cli...

我的 app.node.module.ts 看起来像这样:

/**
 * This file and `main.browser.ts` are identical, at the moment(!)
 * By splitting these, you're able to create logic, imports, etc that are "Platform" specific.
 * If you want your code to be completely Universal and don't need that
 * You can also just have 1 file, that is imported into both
 * client.ts and server.ts
 */

import {NgModule} from '@angular/core';
import {UniversalModule} from 'angular2-universal';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './index';
import {AlertModule, CollapseModule, } from 'ng2-bootstrap';


import {LoginComponent} from './login/login.component';
import {RegisterComponent} from './register/register.component';
import {HomeComponent} from './home/home.component';
import {SharedComponent} from './shared/shared.component';
import {NavigationComponent} from './shared/navigation/navigation.component';
import {RouterModule} from '@angular/router';
import {appRoutes} from './app.routing';

/**
 * Top-level NgModule "container"
 */
@NgModule({
    /** Root App Component */
    bootstrap: [AppComponent],
    /** Our Components */
    declarations: [AppComponent, LoginComponent, RegisterComponent, HomeComponent, SharedComponent, NavigationComponent],
    imports: [
        /**
         * NOTE: Needs to be your first import (!)
         * NodeModule, NodeHttpModule, NodeJsonpModule are included
         */
        UniversalModule,
        FormsModule,
        /**
         * using routes
         */
        CollapseModule.forRoot(),
        AlertModule.forRoot(),
        RouterModule.forRoot(appRoutes)
    ]
})
export class AppModule {

}

app.routing.ts:

import {HomeComponent} from './home/home.component';
import {LoginComponent} from './login/login.component';

export const appRoutes: any = [
    {path: '', component: HomeComponent, useAsDefault: true},
    {path: 'login', component: LoginComponent}
] 

这是来自控制台的日志:

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. 2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]"): AppComponent@0:0 ; Zone: ; Task: Promise.then ; Value: 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. ("[ERROR ->]"): AppComponent@0:0 at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:12070:19) at RuntimeCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:30623:51) at http://localhost:4200/vendor.bundle.js:30543:62 at Set.forEach (native) at RuntimeCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:30543:19) at createResult (http://localhost:4200/vendor.bundle.js:30439:19) at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:61439:26) at Zone.run (http://localhost:4200/vendor.bundle.js:61321:43) at http://localhost:4200/vendor.bundle.js:61709:57 at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:61472:35) 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. ("[ERROR ->]"): AppComponent@0:0 at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:12070:19) at RuntimeCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:30623:51) at http://localhost:4200/vendor.bundle.js:30543:62 at Set.forEach (native) at RuntimeCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:30543:19) at createResult (http://localhost:4200/vendor.bundle.js:30439:19) at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:61439:26) at Zone.run (http://localhost:4200/vendor.bundle.js:61321:43) at http://localhost:4200/vendor.bundle.js:61709:57 at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:61472:35)

其他人也认为不起作用:(点击)...有人知道可能出现什么问题吗？

Answer 1

您缺少BrowserModule来自您的 AppModule 导入。这是必需的。

来自https://angular.io/docs/ts/latest/guide/ngmodule.html

The metadata imports a single helper module, BrowserModule, which every browser app must import.

BrowserModule registers critical application service providers. It also includes common directives like NgIf and NgFor, which become immediately visible and usable in any of this module's component templates.

这可能是 <router-outlet> 的原因无法识别，是BrowserModule Angular 需要解释许多(不是全部)DOM 元素和属性。一些属性(例如 ngModel)是从 FormsModule 导入的。 。从技术上讲，<router-outlet>来自RouterModule ，但是BrowserModule DOM 渲染所必需的，这就是它无法解释标签 <router-outlet> 的原因.