각도 2 rc6 구성 요소가 로딩되지 않습니다.

Question

APP를 rc6으로 업그레이드하면 일부 구성 요소가로드/렌더링되지 않습니다. 내 APP에서는 routing_components와 util_components가 다릅니다. 모든 routing_components가 잘 작동하고 util_components 만 문제를 일으키는 것으로 나타났습니다.

브라우저 콘솔에 컴파일 오류 또는 오류가 표시되지 않습니다. 단순히 이것을 얻었습니다 :

각도 2는 개발 모드에서 실행 중입니다. enableProdMode()를 으로 호출하여 프로덕션 모드를 활성화합니다. 내 구성 요소를 사용하고 방법은 다음과

은 다음과 같습니다

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

을 내가 웹 사이트에 표시되는 모든은 다음과 같습니다

로드 텍스트 ... 나는 '

모든 구성 요소에 대해 1 개의 모듈을 구성하고 4 개의 래퍼 모듈을 가져 와서 구성 요소 모듈을 가져옵니다.

routing_module : 채 모든 모듈을 가져 라우팅 구성 요소

util_module : 채 모든 모듈을 가져올 폴더의 유틸리티 구성 요소

pipes_module : 수출 내 모든 사용자 지정 파이프

services_module : 제공하는 모든 내 서비스 내

AppModule 모든 래퍼 모듈을 가져옵니다. 이제

나는 렌더링되지 않는 당신에게 1 util_component에 대한 hierachy 보여주지 :

컴포넌트 :

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 { 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; 
} 

구성 요소에 대한 모듈

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); 

당신의 도움 :)

건배

감사합니다!

Answer 1

1 개의 모듈 (AppModule) 만 사용하여이 문제를 해결했습니다. AppComponent를 부트 스트랩하고, 모든 구성 요소 및 파이프를 선언하고, 모든 각도 모듈 (양식, 브라우저 등)을 가져오고, 파이프를 내보내고, 서비스를 제공하고 CUSTOM_ELEMENTS_SCHEMA를 사용합니다.

비록 작동하지만 모듈의 목적이 여기에서 작동하는 방식을 이해하지 못한다고합니다. 어쩌면 누군가가 설명 할 수 있을까요?

는 mrgoos 대답하기 : https://angular.io/docs/ts/latest/api/core/index/NgModuleMetadataType-interface.html

Answer 2

app.module에만 bootstrap이 필요하므로 여기부터 시작하겠습니다. 또한 다른 모든 모듈이 CommonModule을 가져와야합니다.또한 schemas은 문서에 따라 NgModule의 일부가 아닙니다.

모든 모듈의 구성 요소가 선언되었는지 확인하십시오. 예를 들어 util 모듈에는 선언이 없습니다.

그래도 작동하지 않으면 plnkr에서 공유하려고 시도하십시오.