angular - 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 时涉及的文件:

应用程序组件.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.");
        });
    }
}

应用程序模块.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(请注意第一个 Bootstrap 已被注释掉——这是我用于 RC4 的旧 Bootstrap ):

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 中列出了一个组件。

组件应该只放在声明中。

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

这是 NgModule 装饰器中主要数组的简要概述(来自文档):

• 声明:属于该模块的组件、指令和管道类的列表。
• providers:列出依赖注入(inject)提供者(通常是服务)
• imports:支持模块列表
• exports:导入模块可以使用的声明列表——组件、指令和管道类。