'路由器出口' 不是一个已知的元素角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} 
] 

这里是日志从控制台：

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

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

从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>无法识别的原因，是角度来解释许多（不是全部）DOM元素和属性BrowserModule是必需的。一些属性如ngModel从FormsModule导入。从技术上讲，<router-outlet>来自RouterModule，但DOM渲染需要BrowserModule，这就是为什么它在代入<router-outlet>的代码时失败。