找不到“AppModule”的 NgModule 元数据
Posted
技术标签:
【中文标题】找不到“AppModule”的 NgModule 元数据【英文标题】：No NgModule metadata found for 'AppModule' 【发布时间】：2018-05-09 20:56:13 【问题描述】：我已经检查了好几次，但不确定 AppModule.ts 中缺少什么 我有另一个 AppRoutingModule.ts 模块
错误：
C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web>ng build
Date: 2017-11-26T14:01:44.636Z
Hash: 3222da75cdc5af92bdb9
Time: 8949ms
chunk inline inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk main main.bundle.js, main.bundle.js.map (main) 303 bytes [initial] [rendered]
chunk polyfills polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes [initial] [rendered]
chunk styles styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]
错误中的错误：
No NgModule metadata found for 'AppModule'.
at NgModuleResolver.resolve (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@angular\compiler\bundles\compiler.umd.js:20111:23)
at CompileMetadataResolver.getNgModuleMetadata (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@angular\compiler\bundles\compiler.umd.js:15101:60)
at visitLazyRoute (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@angular\compiler\bundles\compiler.umd.js:29995:104)
at AotCompiler.listLazyRoutes (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@angular\compiler\bundles\compiler.umd.js:29963:20)
at AngularCompilerProgram.listLazyRoutes (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@angular\compiler-cli\src\transformers\program.js:157:30)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@angular\compiler-cli\src\ngtools_api.js:44:36)
at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:247:66)
at Promise.resolve.then.then (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:538:50)
AppModule.ts
import NgModule from '@angular/core';
import BrowserModule from '@angular/platform-browser';
import FormsModule, ReactiveFormsModule from '@angular/forms';
import HttpModule from '@angular/http';
import ChartsModule from 'ng2-charts/ng2-charts';
import Chart from 'chart.js';
// Register 'Route Module' in main AppModule
import AppRoutingModule from './route.config/app-routing.module';
/// All Custom Component Registerd here
import AppComponent from './app.component';
import HeaderComponent from './header/header.component';
import FooterComponent from './footer/footer.component';
import LoginFormComponent from './login-form/login-form.component';
import ForgetPasswordComponent from './login-form/forgetPassword.component';
// import DashboardComponent from './dashboard/dashboard.component';
import LoadingComponent from './header/loading.component';
import UserMenuComponent from './dashboard/user.menu.component';
import UserDashComponent from './user/user.dash.component';
import UserFeedComponent from './user/user.feed.component';
import BodyMeasurementComposiotnComponent from './user/body.measurement.component';
import UserGalleryComponent from './user/user.gallery.component';
import CustomerBodyDetailComponent from './user/customer.body.detail.component';
import AdminMenuComponent from './admin/admin.menu.component';
import AdminDashComponent from './admin/admin.dash.component';
import CustmoersComponent from './admin/customers.component';
import EditCustomerComponent from './admin/edit.customer.component';
import AddCustomerComponent from './admin/add.customer.component';
import MembershipPlanComponent from './admin/membershipPlan.component';
import AddMembershipPlanComponent from './admin/add.membershipPlan.component';
import EditMembershipPlanComponent from './admin/edit.membershipPlan.component';
import MembershipModalComponent from './admin/membership.modal.component';
// Registered all Pipes
import SearchPipe from './pipes/search.pipe';
// Registered all services
import CommonService from './services/common.service';
import UserProfile from './services/user.profile';
import UserService from './services/user.service';
import CustomerService from './services/customer.service';
import MembershipPlanService from './services/membershipPlan.service';
import MembershipDetailService from './services/membershipdetail.service';
import CustomerBodyDetailService from './services/customer.body.detail.service';
import DailyCustomerFeedService from './services/daily.customer.feed.service';
import MonthlyCustomerFeedService from './services/monthly.customer.feed.service';
import ManageCustomerService from './services/manage.customer.service';
@NgModule(
imports: [
BrowserModule
, FormsModule
, ReactiveFormsModule
, HttpModule
, AppRoutingModule /// Routing Mdoule added
, ChartsModule
],
declarations: [
AppComponent
, LoadingComponent
, HeaderComponent
, FooterComponent
, LoginFormComponent
, ForgetPasswordComponent
// User Components
, UserMenuComponent
, UserDashComponent
, UserFeedComponent
, BodyMeasurementComposiotnComponent
, UserGalleryComponent
, CustomerBodyDetailComponent
// Admin Components
, AdminMenuComponent
, AdminDashComponent
, CustmoersComponent
, EditCustomerComponent
, AddCustomerComponent
, MembershipPlanComponent
, AddMembershipPlanComponent
, EditMembershipPlanComponent
, MembershipModalComponent
// Pipes
, SearchPipe
],
providers: [
CommonService
, UserProfile
, UserService
, CustomerService
, MembershipPlanService
, MembershipDetailService
, CustomerBodyDetailService
, DailyCustomerFeedService,
, MonthlyCustomerFeedService
, ManageCustomerService
],
bootstrap: [AppComponent]
)
export class AppModule AppRoutingModule.ts
import NgModule from '@angular/core';
import RouterModule, Routes from '@angular/router';
import AuthGuard from '../auth.guard';
///// All Custom Component Registerd here
import LoginFormComponent from '../login-form/login-form.component';
import ForgetPasswordComponent from '../login-form/forgetPassword.component';
import UserDashComponent from '../user/user.dash.component';
import UserFeedComponent from '../user/user.feed.component';
import BodyMeasurementComposiotnComponent from '../user/body.measurement.component';
import UserGalleryComponent from '../user/user.gallery.component';
import CustomerBodyDetailComponent from '../user/customer.body.detail.component';
import CustmoersComponent from '../admin/customers.component';
import AdminDashComponent from '../admin/admin.dash.component';
import AddCustomerComponent from '../admin/add.customer.component';
import EditCustomerComponent from '../admin/edit.customer.component';
import MembershipPlanComponent from '../admin/membershipPlan.component';
import AddMembershipPlanComponent from '../admin/add.membershipPlan.component';
import EditMembershipPlanComponent from '../admin/edit.membershipPlan.component';
const routes: Routes = [
path: 'login', component: LoginFormComponent ,
path: 'forgot-Password', component: ForgetPasswordComponent ,
path: 'customer/detail', component: CustomerBodyDetailComponent, canActivate: [AuthGuard] ,
path: 'feeds', component: UserFeedComponent, canActivate: [AuthGuard] ,
path: 'user/dashboard', component: UserDashComponent, canActivate: [AuthGuard], ,
path: 'body/measurement', component: BodyMeasurementComposiotnComponent, canActivate: [AuthGuard] ,
path: 'gallery', component: UserGalleryComponent, canActivate: [AuthGuard] ,
path: 'admin/dashboard', component: AdminDashComponent, canActivate: [AuthGuard] ,
path: 'customers', component: CustmoersComponent, canActivate: [AuthGuard] ,
path: 'customer/create', component: AddCustomerComponent ,
path: 'customer/edit/:id', component: EditCustomerComponent, canActivate: [AuthGuard] ,
path: 'membership/plans', component: MembershipPlanComponent, canActivate: [AuthGuard] ,
path: 'membership/plan/create', component: AddMembershipPlanComponent, canActivate: [AuthGuard] ,
path: 'mebership/plan/edit/:id', component: EditMembershipPlanComponent, canActivate: [AuthGuard] ,
path: '', redirectTo: '/login', pathMatch: 'prefix' ,
];
@NgModule(
imports: [RouterModule.forRoot(routes)],
providers:
[
AuthGuard
],
exports: [RouterModule]
)
export class AppRoutingModule
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)
.catch(err => console.log(err));包.json
"name": "club.90.web",
"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": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"ng2-charts": "^1.6.0",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
,
"devDependencies":
"@angular/cli": "1.5.4",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"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",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
为什么我没有收到“AppModule”的 NgModule 元数据？
【问题讨论】：
【参考方案1】：AppModule.ts
, DailyCustomerFeedService,
, MonthlyCustomerFeedService在提供程序中添加服务时添加了一个额外的逗号。这让我很沮丧，并花了一天的时间来识别它。
【讨论】：
对我来说，我有一个空数组（提供者：[]）。谢谢！！ 升级到 Angular 8 后发生在我身上。为什么你不能有一个空的 providers 数组！【参考方案2】：与@Ravidas Shiudkar 的回答类似，我必须修复一些 tslint 错误。例如：缺少分号、空格、我的项目周围的双引号和单引号，主要在 app.module.ts 中。
【讨论】：
【参考方案3】：经过数小时的尝试，我不得不删除我现有的 typescript 2.5.3 版本并安装 typescript@2.6.2。
【讨论】：
【参考方案4】：我终于解决了这个问题。分辨率如下。 :-)
如何检查 Angular CLI 的版本将 Angular CLI 版本更新到最新版本 - 到今天为止是 1.7.4
键入以下命令ng --version
npm 删除 @angular/cli
npm install --save-dev@angular/cli@latest
-确保 webpack 版本是 3.11.0
如果没有，则运行以下命令。npm 列表 webpack
npm 删除 webpack
npm install webpack@3.11.0
【讨论】：
【参考方案5】：在我的情况下，问题是由
引起的skipCodeGeneration: 真
在
plugins: [
new AngularCompilerPlugin(
mainPath: "./src/main.ts",
tsConfigPath: "./tsconfig.app.json",
skipCodeGeneration: !AOT
),
],
所以，更改 @ngtools/webpack 包的版本节省了我的时间
npm 卸载 @ngtools/webpack
npm install @ngtools/webpack@6.0.0-beta.5
【讨论】：
以上是关于找不到“AppModule”的 NgModule 元数据的主要内容，如果未能解决你的问题，请参考以下文章
找不到“HomeModule”的 NgModule 元数据中的错误
出现在 AppModule 的 NgModule.imports 中，但无法解析为 NgModule 类
模块“AppModule”导入的意外指令“LoginComponent”。请添加@NgModule 注释
出现在 AppModule 的 NgModule.imports 中，但无法解析为 Angular 8 中的 NgModule 类