ngmodule.type - संपत्ति प्रकार के नल - main.js

Question

नहीं पढ़ सकता मैं आरसी 5 का उपयोग करने के लिए अपने ऐप को अपडेट करने का प्रयास कर रहा हूं, इसलिए मॉड्यूल का उपयोग करके अपने ऐप को बूटस्ट्रैप करना।

इस त्रुटि हो रही है:

जब मैं त्रुटि क्लिक करें और अधिक जानकारी प्राप्त यह कहते हैं:

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 दोषी है।

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:

यहाँ मेरी RC5 के उन्नयन में शामिल फ़ाइलें हैं

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 (कृपया ध्यान दें पहले बूटस्ट्रैप पर टिप्पणी की गई है - यह आरसी 4 के लिए मेरा पुराना है):

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 में जाना चाहिए।

• declarations: घटक, निर्देश और पाइप वर्गों है कि इस मॉड्यूल के हैं की एक सूची

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

  यहाँ NgModule डेकोरेटर में मुख्य सरणियों का एक संक्षिप्त सिंहावलोकन (डॉक्स से) है ।

• providers: सूची निर्भरता इंजेक्शन प्रदाताओं (आमतौर पर सेवा)
• imports: समर्थन मॉड्यूल
• exports की सूची: घोषणाओं की एक सूची - घटक, निर्देश, और पाइप वर्गों - एक का आयात मॉड्यूल का उपयोग कर सकते हैं।
`imports` मुझे` LandingPageComponent, FindPageComponent को सही नहीं लगता में