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

Я в замешательстве, так как это довольно простой пример. Домашний модуль вызывает сбой приложения каким-то образом. Это дает следующую ошибку:

ZoneAwareErrormessage: "(SystemJS) Cannot set property 'stack' of undefined ... следуют сотни таких же строк. Есть ли у кого-нибудь идеи о том, как отлаживать подобные ошибки?

4 ответа

  1. Если HomeModule является функциональным модулем, измените раздел Объявления на declarations: [CommonModule, HomeComponent]

  2. Я получаю ту же ошибку,и это вызывает зону найти какую-то ошибку в моем шаблоне. Я в угловой 2.4.1 и зоне 0.7.4, попробуйте обновить.

    кстати, я установил свойство template на url моего шаблона, это работа, поэтому, я думаю, что в зоне может быть ошибка или что-то еще.

  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 { }
    
  4. Я не могу исправить это, но для тех, кто испытывает ту же проблему, избегайте краткого руководства и используйте angular-cli для создания вещей вместо этого. Это кажется намного чище и проще понять, когда начинаешь.

    ng new new-project --style=sass надо с тобой разобраться.