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是罪魁祸首.

以下是升级到RC5所涉及的文件:

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:

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(请注意第一个引导程序已被注释掉 - 这是我对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:导入模块可以使用的声明列表 - 组件,指令和管道类.