在 Angular4 中找不到 'AppModule' 的 NgModule 元数据我无法找到它显示在 main.ts 中的原因

Question

这是我的 package.json 文件，我对类型脚本和 angular cli 的版本有疑问，一些结果也说 yarn 问题。

{
  "name": "suntistfrontend",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@uirouter/angular": "^1.0.0-beta.5",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "ngx-bootstrap": "^1.8.1",
    "rxjs": "^5.1.0",
    "ui-router-ng2": "^1.0.0-beta.5",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.3.0",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.2.10",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "hammerjs": "^2.0.8",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}`

我的 main.ts 文件："console is showing the error in last line of main.ts which is platform browser dynamic () "

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment'
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule( AppModule ) /

这里是 app.module.ts 文件："see if export import bootstrap or declaration error is there " `

import { BrowserModule, Title} from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormGroup,FormsModule, ReactiveFormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UIRouterModule } from '@uirouter/angular';
import { Location } from '@angular/common'; 

import { AppComponent } from './app.component';
import { HttprequestService } from './httprequest.service';
import { ShareDataService } from './share-data.service';
import { HomeComponent } from './home/home.component';
import { OurServicesComponent } from './our-services/our-services.component';
import { OurexperienceComponent } from './ourexperience/ourexperience.component';
import { AboutusComponent } from './aboutus/aboutus.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { ServiceComponent } from './service/service.component';
import { HeaderComponent } from './header/header.component';
import { PathNotFoundComponent } from './path-not-found/path-not-found.component';
import { ExperienceComponent } from './experience/experience.component';
import { DemolinkPipe } from './demolink.pipe';
import { UrlSanitizerPipe } from './url-sanitizer.pipe';



let homeState = { name: 'home', url: '/',  component: HomeComponent };
let servicesState = { name: 'services', url: '/services',  component: OurServicesComponent };
let serviceState = { name: 'service', url: '/services/:serviceId',  component: ServiceComponent };
let experiencesState = { name: 'experiences', url: '/experiences',  component: OurexperienceComponent };
let experienceState = { name: 'experience', url: '/experiences/:experienceId',  component: ExperienceComponent };
let contactState = { name: 'contact', url: '/contact',  component: ContactUsComponent };
let aboutState = { name: 'about', url: '/about',  component: AboutusComponent };
let notFound = { name: 'otherwise', path: '/404',  component: PathNotFoundComponent };

NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    OurServicesComponent,
    OurexperienceComponent,
    AboutusComponent,
    ContactUsComponent,
    ServiceComponent,
    HeaderComponent,
    ExperienceComponent,
    DemolinkPipe,
    UrlSanitizerPipe,
    PathNotFoundComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule, 
    UIRouterModule.forRoot({
      otherwise:"/404",
      states: [
        homeState,
        servicesState,
        serviceState,
        experiencesState,
        experienceState,
        contactState,
        aboutState,
        notFound
      ], useHash: false })
  ],
  providers: [HttprequestService, Location, Title, ShareDataService,],
  bootstrap: [AppComponent]
})
export class AppModule { }

`

这里是 angularcli.json : "for the core of my project please resolve my issue i am not able to find "

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "suntistfrontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": ["../node_modules/jquery/dist/jquery.js"],
      "environmentSource": "environments/environment.ts",

      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },


  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

这里是app.component.ts

import { Component, OnInit , Injectable} from '@angular/core';
import { HttprequestService } from './httprequest.service';
import { Observable } from 'rxjs/Rx';
import { Subscription } from 'rxjs/Subscription';
import { Location } from '@angular/common';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
import { NgClass } from '@angular/common';
import { RouterLinkActive } from '@angular/router';
import { Title }     from '@angular/platform-browser';


@Injectable()
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent{
  navbardata = [];
  path = "contact/social"
  hiddenDiv  :boolean = true ;
  makeactive :boolean = false ;
  dataloaded :boolean = false ; 
  constructor(private httpcustomservice: HttprequestService ,
              private location : Location ,
              private titleService: Title ){}

  public setTitle( newTitle: string) {
    this.titleService.setTitle( newTitle );
  }
  ngOnInit(){

    /*http GET request */
    this.httpcustomservice.fetchdata(this.path)
    .subscribe(
      (response) => {
        this.navbardata = JSON.parse(JSON.stringify(response));
        this.dataloaded = true ;
       },
      (error) => console.log("Server has been stopped"), 
      )
  }

  hideNav(x){
    this.hiddenDiv =!x ;
  }
}

"this is the end of my problem please find some solution to it "

Answer 1

看来你在 NgModule({

之前忘记了 @

应该是

@NgModule({

Answer 2

在您 app.module.ts 中，您在 NgModule 之前缺少 @，这导致了此错误。

在 Angular4 中找不到 'AppModule' 的 NgModule 元数据我无法找到它显示在 main.ts 中的原因

No NgModule metadata found for 'AppModule' in Angular4 i am not able to find the reason its showing in main.ts

ng-modules

angular