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



这是我的package.json文件,我对类型script和angular cli的版本有疑问,有些结果也说纱线问题。

{
"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 文件:"控制台在 main.ts 的最后一行显示错误,这是平台浏览器动态 (( ">

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文件:"查看是否存在导出导入引导程序或声明错误" `

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:"对于我项目的核心,请解决我找不到的问题">

{
"$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": {}
}
}

这是应用程序.组件.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 ;
}
}

"这是我的问题的结束,请找到一些解决方案">

在你app.module.ts中,你缺少@之前NgModule导致此错误。

看起来你在NgModule({之前忘记了@

它应该是

@NgModule({

最新更新