9
我試圖更新我的應用程序以使用RC5，因此使用模塊引導我的應用程序。ngmodule.type - 無法讀取屬性類型爲null - main.js
收到此錯誤：
當我點擊了錯誤，並獲得更多的信息，它說：
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（請注意第一個bootstrap被註釋掉 - 這是我的舊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);
爲什麼我會收到錯誤？
上市部件， AddPageComponent， NavbarComponent'。我沒有完全進入模塊，我可能會錯過一些東西。 –
您不應該在組件中使用指令（和，afaik，預編譯），因爲這是模塊的角色。爲什麼你在你的組件中使用jQuery？使用角度，因爲它應該被使用（例如，模板中的「（click）=」...「）。另外，'imports'必須包含其他要導入的模塊，而不是組件。組件應該在聲明中。 –
@JBNizet是的，但爲了讓應用程序與RC5一起運行，一次應該做一些小的修改。一旦它運行，那麼我可以使它更RC5。您的所有評論都是正確的，但不應該是出現錯誤的原因。 – BeniaminoBaggins