Angular 2 rc6 组件未加载
Angular 2 rc6 Components arent loading
将我的应用程序升级到 rc6 后,我的一些组件不是 loading/rendering。
在我的应用程序中,我区分 routing_components 和 util_components。我注意到我所有的 routing_components 都工作正常,只有 util_components 出了问题。
我在浏览器控制台上既没有编译错误也没有错误。简单地得到这个:
Angular 2 is running in the development mode. Call enableProdMode() to
enable the production mode.
下面是我如何使用我的组件:
<cl-largetext [options]="textTwo">Loading Text...</cl-largetext>
我在网站上看到的是:
Loading Text...
我为每个组件创建了 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 { }
Util 模块:
import { NgModule } from '@angular/core';
import {LargetextModule} from "./largetext/largetext.module";
// ... more modules
@NgModule({
declarations: [ ],
bootstrap: [ ],
imports: [ LargetextModule, ... more modules ],
schemas: [ ]
})
export class UtilModule { }
我的 AppModule:
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);
感谢您的帮助:)
干杯!
您只需要 bootstrap
用于 app.module
,所以让我们从这里开始。此外,确保所有其他模块都导入 CommonModule
。此外,根据文档,schemas
不是 NgModule
的一部分。
确保所有模块都声明了它们的组件。例如,util
模块没有声明。
如果还是不行,请尝试分享到plnkr
我只使用 1 个模块(AppModule)修复了这个问题。
它引导 AppComponent,声明所有组件和管道,导入所有 Angular 模块(表单、浏览器等),导出管道,提供服务并使用 CUSTOM_ELEMENTS_SCHEMA。
虽然这有效,但我不得不说我不理解模块在这里的工作方式的目的。也许有人可以解释?
回答先生:
NgModule 具有属性 schmeas
: https://angular.io/docs/ts/latest/api/core/index/NgModuleMetadataType-interface.html
将我的应用程序升级到 rc6 后,我的一些组件不是 loading/rendering。 在我的应用程序中,我区分 routing_components 和 util_components。我注意到我所有的 routing_components 都工作正常,只有 util_components 出了问题。
我在浏览器控制台上既没有编译错误也没有错误。简单地得到这个:
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
下面是我如何使用我的组件:
<cl-largetext [options]="textTwo">Loading Text...</cl-largetext>
我在网站上看到的是:
Loading Text...
我为每个组件创建了 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 { }
Util 模块:
import { NgModule } from '@angular/core';
import {LargetextModule} from "./largetext/largetext.module";
// ... more modules
@NgModule({
declarations: [ ],
bootstrap: [ ],
imports: [ LargetextModule, ... more modules ],
schemas: [ ]
})
export class UtilModule { }
我的 AppModule:
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);
感谢您的帮助:)
干杯!
您只需要 bootstrap
用于 app.module
,所以让我们从这里开始。此外,确保所有其他模块都导入 CommonModule
。此外,根据文档,schemas
不是 NgModule
的一部分。
确保所有模块都声明了它们的组件。例如,util
模块没有声明。
如果还是不行,请尝试分享到plnkr
我只使用 1 个模块(AppModule)修复了这个问题。 它引导 AppComponent,声明所有组件和管道,导入所有 Angular 模块(表单、浏览器等),导出管道,提供服务并使用 CUSTOM_ELEMENTS_SCHEMA。
虽然这有效,但我不得不说我不理解模块在这里的工作方式的目的。也许有人可以解释?
回答先生:
NgModule 具有属性 schmeas
: https://angular.io/docs/ts/latest/api/core/index/NgModuleMetadataType-interface.html