각도 2 모듈 가져 오기 깨는 응용 프로그램

Question

빠른 시작 안내서를하고 있는데 오류가 발생했습니다. 다음은 내 파일 구조입니다.

//## home/home.component.ts ################# 
import {Component} from '@angular/core'; 

@Component({ 
    selector:'home', 
    template: ` 
<div>I'm a home component.</div> 
` 
}) 

export class HomeComponent{} 

//## home/home.module.ts ################# 
import {NgModule} from "@angular/core"; 
import {HomeComponent} from "./home.component"; 

NgModule({ 
    declarations: [HomeComponent], 
    exports: [HomeComponent] 
}); 

export class HomeModule { 
} 

//## app.component.ts ################# 
import {Component} from "@angular/core"; 
@Component({ 
    selector: 'app', 
    template: ` 
    <div>I'm the App Component</div> 
    ` 
}) 
export class AppComponent {} 

//## app.module.ts ################# 
import {AppComponent} from "./app.component"; 
import {BrowserModule} from "@angular/platform-browser"; 
import {NgModule} from "@angular/core"; 
import {HomeModule} from "./home/home.module"; //this breaks it 

@NgModule({ 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
    imports: [BrowserModule, HomeModule] //home module breaks it 
}) 

export class AppModule{} 

//## main.ts ################# 
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic"; 
import {AppModule} from "./app.module"; 

platformBrowserDynamic().bootstrapModule(AppModule); 

이것은 매우 간단한 예이므로 혼란 스럽습니다. 홈 모듈이 응용 프로그램이 어떻게 든 실패하게 만듭니다. 다음과 같은 오류가 발생합니다 :

ZoneAwareErrormessage: "(SystemJS) Cannot set property 'stack' of undefined ... 그 뒤에 수백 줄이옵니다. 누구든지 이러한 오류를 디버깅하는 방법에 대한 아이디어가 있습니까? HomeModule이 기능 모듈 인 경우

Answer 1

나는이 문제를 해결 coudn't,하지만 같은 문제가 발생하는 누군가를 위해, 빠른 시작 자습서를 피하고 대신 물건을 생성하기 위해 각-CLI를 사용합니다. 밖으로 시작할 때 훨씬 더 깔끔하고 이해하기 쉽게 보입니다.

ng new new-project --style=sass으로 분류 해주세요.

Answer 2

, 당신의 선언 섹션

Answer 3

declarations: [CommonModule, HomeComponent] 내가 같은 오류로 변경하고,이 영역 내 템플릿에 몇 가지 오류를 찾아 원인입니다. 저는 Angular 2.4.1 및 Zone 0.7.4입니다. 업그레이드를 시도하십시오.

btw, 템플릿 템플릿 속성을 내 템플릿의 URL로 설정 했으므로 작업 중이므로 영역에 버그가있는 것 같습니다.

Answer 4

홈 모듈에 CommonModule을 가져와야합니다. 귀하의 HomeModule 코드는 다음과 같이 될 것입니다 :

import {NgModule} from "@angular/core"; 
import {CommonModule} from "@angular/common"; // Add this 
import {HomeComponent} from "./home.component"; 

NgModule({ 
    imports: [CommonModule], // Add this 
    declarations: [HomeComponent], 
    exports: [HomeComponent] 
}); 

export class HomeModule { }