2016-08-19 12 views
9

Uygulamamı RC5 kullanmak üzere güncellemeye çalışıyorum, böylece bir modül kullanarak uygulamanızı önyükleme yapmaya çalışıyorum.ngmodule.type - null özellik türünü okuyamıyor - main.js

bu hatayı alınıyor: Ben hatayı tıklayın ve daha fazla bilgi almak zaman

enter image description here

diyor:

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 

Yani main.js suçlu. dikkat ediniz (

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 İşte

RC5 yükseltme katılan benim dosyalardır ilk önyükleme yorumlanır - bu benim RC4 için olan eskidir):

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); 

Neden bu hatayı alıyorum?

+0

İlanı bileşenleri AddPageComponent, NavbarComponent'. Henüz modüllere dalmadım ve bir şeyleri özleyebildim. –

+1

Bileşeninizde artık yönergeleri (ve afaik, precompile) kullanmamalısınız, çünkü bu modülün rolüdür. Ve neden jQuery bileşeninizde kullanıyorsunuz? Kullanılması gerektiği gibi köşeli kullanın (örneğin, şablonda '(tıklayın) =" ... "'). Ayrıca, 'içe aktarma'lar, bileşenlerin değil, içe aktarılacak diğer modülleri içermelidir. Bileşenler beyanlarda olmalıdır. –

+0

@JBNizet Evet, ancak uygulamayı RC5 ile çalıştırmak için, bir seferde küçük değişiklikler yapmalı. Bir kez koştuğunda, daha fazla RC5 yapabilirim. Tüm yorumlarınız doğru, ancak bir hata nedeni olmamalı. – BeniaminoBaggins

cevap

5

Aynı sorun vardı çünkü benim imports numaralı telefonumda listelenmiş bir bileşenim vardı.

Bileşenler yalnızca declarations numaralı telefondan gitmelidir.

  • declarations: Bu modülün ait bileşeni, yönerge ve boru sınıfları listesi

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

    İşte NgModule dekoratör ana Dizilerin (dokümanlardan) özlü bir genel bakış .

  • providers: Liste bağımlılık enjeksiyon sağlayıcıları (genellikle Hizmetleri)
  • imports: destekleyen modüllerin
  • exports
  • listesi: beyanların listesi - bileşeni, yönerge ve boru sınıfları - Bir ithal modülü kullanabilirsiniz söyledi. imports` doğru beni `LandingPageComponent, FindPageComponent için görünmüyor` in
+1

@NgModule ({declarations: []}) '' hizmetimi ekleyerek hata yaptım ', ** Tüm hizmetler yalnızca **' sağlayıcıları içinde listelenmelidir: [ ] ' – Abhijeet

İlgili konular