ngmodule.type - プロパティタイプnull - main.jsを読み取ることができません

Question

私はRC5を使用するようにアプリケーションを更新しようとしていますので、モジュールを使用してアプリケーションを起動しています。

このエラーを取得：私は、エラーをクリックすると詳細情報を取得する場合

それは言う：

Error: TypeError: Cannot read property 'type' of null at eval (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13673:45) at Array.forEach (native) at getTransitiveModules (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13672:17) at CompileMetadataResolver._getTransitiveNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13387:37) at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13259:47) at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15845:51) at RuntimeCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15769:41) at RuntimeCompiler.compileModuleAsync (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15746:25) at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9991:29) at PlatformRef_.bootstrapModule (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9984:25) Error loading http://localhost:3000/js/app/../app/main.js 

だから、main.jsが犯人です。注意してください（

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { HighlightDirective } from './highlight.directive'; 
import { RouterModule } from '@angular/router'; 
import { routerConfig } from './app.routes'; 
import { FormsModule } from '@angular/forms'; 
import { Component } from '@angular/core'; 
import { LandingPageComponent } from './landing-page/landing-page.component'; 
import { FindPageComponent } from './find-page/find-page.component'; 
import { AddPageComponent } from './add-page/add-page.component'; 
import { NavbarComponent } from './shared/navbar.component'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    RouterModule.forRoot(routerConfig), 
    FormsModule, 
    LandingPageComponent, 
    FindPageComponent, 
    AddPageComponent, 
    NavbarComponent 
], 
    declarations: [ 
    AppComponent, 
    HighlightDirective 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

main.ts：

app.component.ts：

import { Component } from '@angular/core'; 
import { LandingPageComponent } from './landing-page/landing-page.component'; 
import { FindPageComponent } from './find-page/find-page.component'; 
import { AddPageComponent } from './add-page/add-page.component'; 
import { NavbarComponent } from './shared/navbar.component'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.component.html', 
    directives: [ROUTER_DIRECTIVES, NavbarComponent], 
    precompile: [LandingPageComponent, FindPageComponent, AddPageComponent, NavbarComponent] 
}) 
export class AppComponent { 
    title = "the vegan repository"; 

    constructor() { 

     $('.close').each(function (i, obj) { 
      $(this).click(function() { 

      }) 
     }); 

     $("p").click(function() { 
      alert("The paragraph was clicked."); 
     }); 
    } 
} 

app.module.tsここ

はRC5へのアップグレードに関与し、私のファイルです。最初のブートストラップはコメントアウトされています - これはRC4の私の古いものです）：

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { Component, ViewChild, provide } from '@angular/core'; 
import { routerConfig } from './app.routes'; 
import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { disableDeprecatedForms, provideForms } from '@angular/forms'; 
import { GOOGLE_MAPS_PROVIDERS, LazyMapsAPILoaderConfig } from 'angular2-google-maps/core'; 
import { AppComponent } from './app.component'; 
import { HighlightDirective } from './highlight.directive'; 

/*bootstrap(AppComponent, [ 
    routerConfig, 
    disableDeprecatedForms(), 
    provideForms(), 
    GOOGLE_MAPS_PROVIDERS, 
    HighlightDirective, 

provide(LazyMapsAPILoaderConfig, {useFactory:() => { 
    let config = new LazyMapsAPILoaderConfig(); 
    config.apiKey = 'AIzaSyAPXjwYVEfDZvULTLmh_9XXQn_7d7AYxIw'; 
    config.libraries = ['places']; 
    return config; 
    }}) 

]).catch((err: any) => console.error(err));*/ 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule }    from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule); 

エラーが表示されるのはなぜですか？

Answer 1

私はimportsに記載されているコンポーネントを持っていたので、私も同じ問題がありました。

コンポーネントは、declarationsに入れる必要があります。

https://angular.io/docs/ts/latest/guide/ngmodule.html#!#declarations

ここNgModuleデコレータのメインアレイの（ドキュメントから）簡潔な概要は次のとおり

• declarations：このモジュールに属する成分、指令及びパイプクラスのリストは。
• providers：リスト依存性注入プロバイダ（通常サービス）
• imports：支持モジュール
• exports
のリスト：宣言のリスト - 成分、指令、及びパイプクラスは - インポートモジュールが使用できます。 imports`は、右の私 `LandingPageComponent、 FindPageComponentに見ていない`で