Angular 2 rc6 组件未加载

Question

将我的 APP 升级到 rc6 后，我的一些组件无法加载/渲染。 在我的应用程序中，routing_components 和 util_components 有所不同。我注意到我所有的 routing_components 都工作正常，只有 util_components 出了问题。

我在浏览器控制台上没有收到任何编译错误或错误。很简单：

Angular 2 正在开发模式下运行。调用 enableProdMode() 到 启用生产模式。

这是我使用组件的方式：

<cl-largetext [options]="textTwo">Loading Text...</cl-largetext>

我在网站上看到的只有：

正在加载文本...

我为每个组件创建了 1 个模块，并有 4 个包装器模块导入所谓的组件模块：

routing_module：导入所有包含路由组件的模块

util_module：导入所有包含 util 组件的模块

pipes_module：导出我所有的自定义管道

services_module: 提供我所有的服务我的

AppModule 导入我所有的包装模块。

现在我将向您展示 1 个未渲染的 util_component 的层次结构：

组件：

import { Component, Input } from '@angular/core';
import { LargetextI } from    './../../../interfaces/largetext/largetext.interface.ts';
import '../../../../../public/css/styles.css';
@Component({
  selector: 'cl-largetext',
  templateUrl: './largetext.component.html',
  styleUrls: ['./largetext.component.css']
})
export class LargetextComponent {
    constructor(){}
    @Input() options: LargetextI;
 }

组件的模块：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA }      from '@angular/core';
import { CommonModule }      from '@angular/common';
import { LargetextComponent }  from './../../../components/util_components/largetext/largetext.component.ts';

@NgModule({
    declarations: [ LargetextComponent ],
    bootstrap:    [ LargetextComponent ],
    imports: [ CommonModule ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class LargetextModule { }

实用程序模块：

import { NgModule }      from '@angular/core';
import {LargetextModule} from "./largetext/largetext.module";
// ... more modules
@NgModule({
    declarations: [ ],
    bootstrap:    [ ],
    imports: [ LargetextModule, ... more modules ],
    schemas: [ ]
})
export class UtilModule { }

我的应用模块：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent }  from './app.component';
import { ROUTES } from './app.routes';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { UtilModule} from "./modules/util_modules/util.module";
import { RoutingModule } from "./modules/routing_modules/routing.module";
import { ServicesModule } from "./modules/services_module/service.module";
import {PipesModule} from "./modules/util_modules/pipes.module";

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [ HttpModule, BrowserModule, UtilModule, RoutingModule, ServicesModule, PipesModule, RouterModule.forRoot(ROUTES, { useHash: false })],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    providers: [ ]
})
export class AppModule { }

我的 main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';

if (process.env.ENV === 'production') {
  enableProdMode();
}

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

感谢您的帮助:)

干杯！

Answer 1

您需要 bootstrap 仅用于 app.module 所以让我们从这个开始。此外，确保所有其他模块都导入CommonModule。此外，根据文档，schemas 不是NgModule 的一部分。

确保所有模块都声明了它们的组件。例如，util 模块没有声明。

如果还是不行，请尝试分享到plnkr。

Answer 2

我只使用 1 个模块（AppModule）解决了这个问题。 它引导 AppComponent，声明所有组件和管道，导入所有 Angular 模块（表单、浏览器等），导出管道，提供服务并使用 CUSTOM_ELEMENTS_SCHEMA。

虽然这可行，但我不得不说我不明白模块在这里工作的目的。也许有人可以解释？

回答 mrgoos： NgModule 有属性schmeas:https://angular.io/docs/ts/latest/api/core/index/NgModuleMetadataType-interface.html