ngmodule.type - cannot read property type of null - main.js

Question

I'm trying to update my app to use RC5, so bootstrapping my app using a module.

Getting this error:

When I click the error and get more info it says:

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

So main.js is the culprit.

Here are my files involved in upgrading to 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 (please note the first bootstrap is commented out - it is my old one for 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);

Why am I getting the error?

Answer 1

I had this same issue because I had a component listed in my imports.

Components should only go in declarations.

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

Here's a concise overview (from the docs) of the main arrays in the NgModule decorator:

• declarations: A list of the component, directive and pipe classes that belong to this module.
• providers: List dependency injection providers (typically Services)
• imports: List of supporting modules
• exports: A list of declarations — component, directive, and pipe classes — that an importing module can use.