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

Question

I'm doing the quickstart tutorial and am encountering some error. The following is my file structure:

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

I am confused, as this is a pretty simple example. The Home module is causing the application to fail somehow. It gives the following error:

ZoneAwareErrormessage: "(SystemJS) Cannot set property 'stack' of undefined ... followed by hundreds of lines of the same. Does anyone have any ideas on how to debug errors like these?

Answer 1

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

Answer 2

I get the same error,and it's cause the zone find some error in my template. I'm in Angular 2.4.1 and zone 0.7.4,try upgrade.

btw,I had set the template property to the url of my template,it's work,so,I think the zone may has a bug or something.

Answer 3

You must import CommonModule in the HomeModule. Your HomeModule code will be like this:

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

I coudn't fix this, but for anyone experiencing the same problem, avoid the quickstart tutorial and use angular-cli to generate things instead. It seems much cleaner and easier to understand when starting out.

ng new new-project --style=sass should sort you out.