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

我很困惑，因为这是一个非常简单的示例。 Home模块导致应用程序以某种方式失败。 它给出以下错误：

ZoneAwareErrormessage: "(SystemJS) Cannot set property 'stack' of undefined ...后跟数百行相同的ZoneAwareErrormessage: "(SystemJS) Cannot set property 'stack' of undefined ... 。有人对如何调试此类错误有任何想法吗？

Answer 1

如果HomeModule是功能模块，请将声明部分更改为declarations: [CommonModule, HomeComponent]

Answer 2

我遇到同样的错误，这是因为该区域在我的模板中发现了一些错误。 我在Angular 2.4.1和0.7.4区域中，请尝试升级。

顺便说一句，我已经将template属性设置为模板的url，它可以正常工作，因此，我认为该区域可能存在错误或其他错误。

Answer 3

您必须导入CommonModule在HomeModule。 您的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 { }

Answer 4

我无法解决此问题，但是对于遇到相同问题的任何人，请避免使用快速入门教程，而应使用angular-cli生成事物。 入门时似乎更简洁易懂。

ng new new-project --style=sass应该可以解决您的问题。