Javascript Angular 2模块导入中断应用程序

我正在学习快速入门教程，遇到了一些错误。以下是我的文件结构：

//## 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/home.component.ts#################
从'@angular/core'导入{Component}；
@组成部分({
选择器：'home'，
模板：`
我是家里的一员。
`
})
导出类HomeComponent{}
//##home/home.module.ts#################
从“@angular/core”导入{NgModule}；
从“/home.component”导入{HomeComponent}；
NGD模块({
声明：[HomeComponent]，
导出：[HomeComponent]
});
导出类HomeModule{
}
//##app.component.ts#################
从“@angular/core”导入{Component}”；
@组成部分({
选择器：“应用程序”，
模板：`
我是应用程序组件
`
})
导出类AppComponent{}
//##app.module.ts#################
从“/app.component”导入{AppComponent}；
从“@angular/platform browser”导入{BrowserModule}”；
从“@angular/core”导入{NgModule}；
从“/home/home.module”导入{HomeModule}//这打破了它
@NGD模块({
声明：[AppComponent]，
引导：[AppComponent]，
imports:[BrowserModule，HomeModule]//HomeModule将其中断
})
导出类AppModule{}
//##梅因酒店#################
从“@angular/platformBrowserDynamic”导入{platformBrowserDynamic}”；
从“/app.module”导入{AppModule}；
platformBrowserDynamic（）.bootstrapModule（AppModule）；

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

---

ZoneAwareErrormessage:“（SystemJS）无法设置未定义的属性“stack”…

后跟数百行相同的内容。有人知道如何调试此类错误吗？

如果HomeModule是功能模块，请将声明部分更改为

声明：[CommonModule，HomeComponent]

我得到了相同的错误，这是因为分区在我的模板中发现了一些错误。我在Angular 2.4.1和zone 0.7.4中，请尝试升级

顺便说一句，我已将template属性设置为模板的url，这是有效的，因此，我认为该区域可能存在错误或其他问题。

您必须在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 { }

---

我无法解决这个问题，但对于任何遇到相同问题的人，请避免使用quickstart教程，而是使用angular cli生成内容。开始时，它看起来更清晰、更容易理解

---

ng new-new-project--style=sass

应该能帮你解决问题。

将声明：[AppComponent]更改为声明：[BrowserModule，HomeModule]，会改变什么吗？@SebastienDErrico不，不幸的是，这并不能解决我的问题。CommonModule在这里做什么？CommonModule是BrowserModule的子集（您在AppModule中使用的一个）并且您必须在所有功能模块中导入它。有关@userqwert的更多信息，请参阅Angular docs上的此常见问题解答-