'router-outlet'不是Angular 2的已知元素

Question

我正在使用通用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}
] 

这是来自控制台的日志:

未处理的Promise拒绝:模板解析错误:'router-outlet'不是已知元素:1.如果'router-outlet'是Angular组件,则验证它是否是该模块的一部分.2.如果'router-outlet'是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的'@NgModule.schemas'以禁止显示此消息.("[ERROR - >]"):AppComponent @ 0:0; 区域:; 任务:Promise.then; 值:错误:模板解析错误:'router-outlet'不是已知元素:1.如果'router-outlet'是Angular组件,则验证它是否是此模块的一部分.2.如果'router-outlet'是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的'@NgModule.schemas'以禁止显示此消息.("[ERROR - >]"):AppComponent @ 0:0在TemplateParser.parse(http:// localhost:4200/vendor.bundle.js:12070:19)在RuntimeCompiler._compileTemplate(http:// localhost:4200) /vendor.bundle.js:30623:51)在http:// localhost:4200/vendor.bundle.js:30543:62 at Set.forEach(native)at RuntimeCompiler._compileComponents(http:// localhost:4200/vendor) .bundle.js:30543:19)at ZoneDelegate.invoke的createResult(http:// localhost:4200/vendor.bundle.js:30439:19)(http:// localhost:4200/vendor.bundle.js:61439 :26)在Zone.run(http:// localhost:4200/vendor.bundle.js:61321:43)的http:// localhost:4200/vendor.bundle.js:61709:57 at ZoneDelegate.invokeTask(http) :// localhost:4200/vendor.bundle.js:61472:35)错误:模板解析错误:'router-outlet'不是已知元素:1.如果'router-outlet'是Angular组件,那么验证它是这个模块的一部分.2.如果'router-outlet'是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的'@NgModule.schemas'以禁止显示此消息.("[ERROR - >]"):AppComponent @ 0:0在TemplateParser.parse(http:// localhost:4200/vendor.bundle.js:12070:19)在RuntimeCompiler._compileTemplate(http:// localhost:4200) /vendor.bundle.js:30623:51)在http:// localhost:4200/vendor.bundle.js:30543:62 at Set.forEach(native)at RuntimeCompiler._compileComponents(http:// localhost:4200/vendor) .bundle.js:30543:19)at ZoneDelegate.invoke的createResult(http:// localhost:4200/vendor.bundle.js:30439:19)(http:// localhost:4200/vendor.bundle.js:61439 :26)在Zone.run(http:// localhost:4200/vendor.bundle.js:61321:43)的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

元数据导入一个帮助器模块BrowserModule,每个浏览器应用程序必须导入该模块.

BrowserModule注册关键应用程序服务提供程序.它还包括NgIf和NgFor等常用指令,它们可立即显示在该模块的任何组件模板中并可用.

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