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

以下是来自控制台的日志：

未处理的承诺拒绝：模板解析错误：'router-outlet'是不是一个已知的元素： 1.如果'router-outlet'是Angular组件，则验证它是否是此模块的一部分。 2.如果'router-outlet'是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的'@ NgModule.schemas' 压制此消息。（“[错误 - ＆gt;]“）：AppComponent @ 0：0;区域：;任务：Promise.then;值：错误：模板解析错误： 'router-outlet'不是一个已知的元素： 1.如果'router-outlet'是Angular组件，则验证它是否是此模块的一部分。 2.如果'router-outlet'是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的'@ NgModule.schemas' 压制此消息。（“[错误 - ＆gt;]“）：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）在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）错误：模板解析错误：'router-outlet'不是已知元素： 1.如果'router-outlet'是Angular组件，则验证它是否是此模块的一部分。 2.如果'router-outlet'是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的'@ NgModule.schemas' 压制此消息。（“[错误 - ＆gt;]“）：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）在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>。

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

1 个答案: