“路由器插座”不是已知元素Angular 2

Question

我正在使用通用客户端...

我的 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}
] 

这是来自控制台的日志：

未处理的承诺拒绝：模板解析错误：“路由器出口”是 不是已知元素： 1.如果'router-outlet'是一个Angular组件，那么验证它是这个模块的一部分。 2. 如果 'router-outlet' 是一个 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到该组件的 '@NgModule.schemas' 压制此消息。 （“[错误 ->]")：AppComponent@0:0；区域：；任务：Promise.then；值：错误：模板解析错误： 'router-outlet' 不是已知元素： 1.如果'router-outlet'是一个Angular组件，那么验证它是这个模块的一部分。 2. 如果 'router-outlet' 是一个 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到该组件的 '@NgModule.schemas' 压制此消息。 （“[错误 ->]"): 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 在 Set.forEach （本机） 在 RuntimeCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:30543:19) 在 createResult (http://localhost:4200/vendor.bundle.js:30439:19) 在 ZoneDelegate.invoke (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 在 ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:61472:35) 错误：模板 解析错误：“路由器插座”不是已知元素： 1.如果'router-outlet'是一个Angular组件，那么验证它是这个模块的一部分。 2. 如果 'router-outlet' 是一个 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到该组件的 '@NgModule.schemas' 压制此消息。 （“[错误 ->]"): 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 在 Set.forEach （本机） 在 RuntimeCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:30543:19) 在 createResult (http://localhost:4200/vendor.bundle.js:30439:19) 在 ZoneDelegate.invoke (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 在 ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:61472:35)

还有其他想法不起作用：（点击）...有人知道可能是什么问题吗？

Answer 1

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

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

元数据导入单个帮助模块 BrowserModule，每个浏览器应用都必须导入该模块。

BrowserModule 注册关键应用服务提供者。它还包括常见的指令，如 NgIf 和 NgFor，这些指令立即可见并可在此模块的任何组件模板中使用。

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