त्रुटि: 'AppModule'

Question

के लिए कोई NgModule मेटाडेटा नहीं मिला है, मुझे एक एंगुलर 2 ऐप के साथ समस्या है जो मैं बना रहा हूं। मैं विभिन्न स्थानों से अपनी प्रतिलिपि/पेस्ट कौशल का उपयोग कर रहा हूं, और सभी बिल्ड त्रुटियों को समाप्त कर दिया है, लेकिन जब मैं इसे ब्राउज़र में लॉन्च करता हूं तो मुझे ब्राउज़र में एक त्रुटि होती है। मैंने this post पर देखा है लेकिन इसने मेरी समस्या हल नहीं की है।

मेरे AppModule इस तरह दिखता है:

import { NgModule, ApplicationRef } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 
import { ROUTES } from './app.routes'; 
import { HomeComponent } from '../index'; 

@NgModule({ 
    bootstrap: [ AppModule ], 
    declarations: [ 
    AppModule, 
    HomeComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(ROUTES, { useHash: true }) 
    ] 
}) 
export class AppModule { 
} 

मैं इस तरह bootstrapping हूँ:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './index'; 

platformBrowserDynamic().bootstrapModule(AppModule); 

लेकिन मेरे ब्राउज़र में, मैं इस त्रुटि मिलती है:

ng_module_resolver.js:34 Uncaught Error: No NgModule metadata found for 'AppModule'.

कैसे कर मैं इसे हल करता हूँ?

अद्यतन

मेरे कोड अब इस तरह दिखता है, लेकिन अभी भी कोई त्रुटि उत्पन्न:

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 
import { ROUTES } from './app.routes'; 
import { HomeComponent } from '../index'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    bootstrap: [ AppComponent ], 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     RouterModule.forRoot(ROUTES, { useHash: true }) 
    ], 
    declarations: [ 
     HomeComponent, 
     AppComponent 
    ] 
}) 
export class AppModule { 
} 

और bootstraping:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppComponent } from './index'; 

platformBrowserDynamic().bootstrapModule(AppComponent); 

यह त्रुटि मैं अब हो रही है है:

Uncaught Error: No NgModule metadata found for 'AppComponent'

क्या यह AppComponent, या बूटस्ट्रैपिंग, या मॉड्यूल घोषणा और मेटाडेटा के साथ एक त्रुटि है? दस्तावेज अस्पष्ट है।

Answer 1

कम से कम आपके कोड में तीन गलतियां हैं।

पहले - आप घटक bootstraping कर रहे हैं, यह गलत है - आप अपने मामले AppModule में, मॉड्यूल bootstrap चाहिए और AppModule में आप घटक है कि बूटस्ट्रैप होने के लिए जा रहा है चुनना चाहिए।

दूसरा - यदि आप एक घटक है कि बूटस्ट्रैप होने जा रहा है के रूप में AppModule निर्दिष्ट करते हैं:,

bootstrap: [ AppModule ] 

आप नहीं बूटस्ट्रैप मॉड्यूल, आप घटक बूटस्ट्रैप कर सकता है सकते हैं, उदाहरण के लिए HomeComponent। जो मैं देख सकता हूं, वह आपके पास एकमात्र घटक है। -

तीसरा आप अपनी घोषणाओं को AppModule जोड़ रहे हैं:

declarations: [ 
    AppModule, 
    HomeComponent 
] 

आप बस ऐसा नहीं कर सकते, आप केवल घटकों, निर्देशों और पाइप मॉड्यूल के घोषणाओं में जोड़ना चाहिए और भले ही आप मॉड्यूल की घोषणा कर सकता है, क्यों क्या आप अपने अंदर AppModule घोषित करेंगे? इस कोड का प्रयास करें:

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(ROUTES, { useHash: true }) 
    ], 
    declarations: [ HomeComponent ], 
    bootstrap: [ HomeComponent ] 
}) 

export class AppModule { 
} 

और फिर AppModule bootstrap:

platformBrowserDynamic().bootstrapModule(AppModule);