2

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

我的 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' 以禁止显示此消息。（“[错误->]”）：http://localhost:4200/vendor.bundle.js:12070:19 ) 在 RuntimeCompiler._compileTemplate ( http://localhost:4200/vendor.bundle.js:30623:51 ) 在http://localhost:4200/ 在 RuntimeCompiler._compileComponents ( http://localhost:4200/vendor.bundle.js:30543:19 ) 在 createResult ( http://localhost:4200/的 Set.forEach (native) 的vendor.bundle.js:30543:62 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' 以禁止显示此消息。("[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 ) 在http://localhost:4200/vendor.bundle.js:30543:62 在 Set.forEach (native) 在 RuntimeCompiler._compileComponents (http://localhost: 4200/vendor.bundle.js:30543: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 )

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

4

1 回答 1

4

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，但BrowserModule对于 DOM 渲染是必需的，这就是为什么它在解释标签时失败的原因<router-outlet>。

于 2017-03-06T15:41:45.893 回答