Menu
Our dev team recently updated an Angular 5 project to Angular 7. I've downloaded the repo and I'm trying to build the source, however when I run the ng build command I get a ERROR in No NgModule metadata found for 'AppModule'.
If I run the ng --version command it shows the following:
The app.module.ts file is:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminComponent } from './layout/admin/admin.component';
import { AdminComponent1 } from './layout/admin1/estimate.component';
import { AuthComponent } from './layout/auth/auth.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SharedModule } from './shared/shared.module';
import { MenuItems } from './shared/menu-items/menu-items';
import { BreadcrumbsComponent } from './layout/admin/breadcrumbs/breadcrumbs.component';
import { ServicesProvider } from '../providers/services';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AuthGuardService } from './activate-guard';
import { AuthLoginService } from './deactivate-guard';
import { SupperAdmin } from './supperadmin-guard';
import { NgProgressModule } from 'ngx-progressbar';
import {SimpleNotificationsModule} from 'angular2-notifications';
import { ConfigService } from '../assets/config/ConfigService';
@NgModule({
declarations: [
AppComponent,
AdminComponent,
AdminComponent1,
AuthComponent,
BreadcrumbsComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
SharedModule,
NgProgressModule,
SimpleNotificationsModule.forRoot(),
BrowserModule,
],
providers: [MenuItems, ServicesProvider, AuthGuardService, SupperAdmin, AuthLoginService, NgProgressModule, ConfigService],
bootstrap: [AppComponent]
})
export class AppModule { }
and the main.ts file is:
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));
And the index.html is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome</title>
<base href="/">
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js"
async defer></script> -->
<!-- <script src="../src/assets/js/pdf.js"></script>
<script src="../src/assets/js/pdf.worker.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Visual Estimator" />
<meta name="keywords" content="visualestimator" />
<meta name="author" content="phoenixcoded" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style>
</style>
<!-- Google font-->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/ng2-toastr.css" rel="stylesheet" />
</head>
<body>
<app-root>
<div class="theme-loader">
<div class="loader-track">
<div class="preloader-wrapper">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
</app-root>
</body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script>
<script>
</script>
</html>
And the angular.json file:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"mega-able": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico",
"src/marker-icon.png",
"src/marker-icon-2x.png"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/font-awesome-scss/scss/font-awesome.scss",
"src/assets/images/zommer/leaflet/dist/leaflet.css",
"src/assets/images/zommer/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.css",
"src/assets/images/zommer/leaflet-toolbar/dist/leaflet.toolbar.css",
"src/assets/images/zommer/leaflet-draw/dist/leaflet.draw-src.css",
"src/scss/style.scss"
],
"scripts": [
"src/assets/images/zommer/jquery.min.js",
"src/assets/images/zommer/bootstrap.min.js",
"src/assets/images/zommer/leaflet/dist/leaflet-src.js",
"src/assets/images/zommer/leaflet/dist/leaflet.rotatedMarker.js",
"src/assets/images/zommer/leaflet-toolbar/dist/leaflet.toolbar-src.js",
"src/assets/images/zommer/leaflet-draw/dist/leaflet.draw-src.js",
"src/assets/images/zommer/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.js",
"src/assets/images/zommer/color.js",
"src/assets/images/zommer/pdf.js",
"src/assets/images/zommer/pdf.worker.js",
"src/assets/images/zommer/leafletfunction.js"
]
},
"configurations": {
"prod": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "mega-able:build"
},
"configurations": {
"prod": {
"browserTarget": "mega-able:build:prod"
},
"production": {
"browserTarget": "mega-able:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "mega-able:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"src/assets/images/zommer/jquery.min.js",
"src/assets/images/zommer/bootstrap.min.js",
"src/assets/images/zommer/leaflet/dist/leaflet-src.js",
"src/assets/images/zommer/leaflet/dist/leaflet.rotatedMarker.js",
"src/assets/images/zommer/leaflet-toolbar/dist/leaflet.toolbar-src.js",
"src/assets/images/zommer/leaflet-draw/dist/leaflet.draw-src.js",
"src/assets/images/zommer/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.js",
"src/assets/images/zommer/color.js",
"src/assets/images/zommer/pdf.js",
"src/assets/images/zommer/pdf.worker.js",
"src/assets/images/zommer/leafletfunction.js"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/font-awesome-scss/scss/font-awesome.scss",
"src/assets/images/zommer/leaflet/dist/leaflet.css",
"src/assets/images/zommer/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.css",
"src/assets/images/zommer/leaflet-toolbar/dist/leaflet.toolbar.css",
"src/assets/images/zommer/leaflet-draw/dist/leaflet.draw-src.css",
"src/scss/style.scss"
],
"assets": [
"src/assets",
"src/favicon.ico",
"src/marker-icon.png",
"src/marker-icon-2x.png"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"mega-able-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "mega-able:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "mega-able",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
Below are all the various things I have tried based on Google searches. All the commands were run from a Git Bash window unless otherwise specified:
The same issue about the NgModule metadata was still present. Next I tried the following:
Issue persisted. Next:
Issue persisted. Next:
Issue persisted. Next:
Issue persisted. Next:
Issue persisted. Next:
Issue persisted. Next:
Issue persisted. Next:
I'm at a lost of what else to try at this point and the dev team is off until at Tuesday for a holiday so any help or suggestions would be greatly appreciated as I'm under some time constraints. Thank you in advance for any help.
328
I think by now, you've already read this article: https://github.com/angular/angular-cli/issues/8798
If not, please read it and notice that the TS also modified the package.json file manually to resolve his issue.
Since we have not seen the actual error message in your build, we cannot deduce if the issue has the same circumstance as the one in the link. So my idea for you to resolve your issue is to do the following:
After the above or if you get it working again I suggest to view the difference between your old package.json and new package.json file and let us know what you observed as it is always good to give back.
124
Just in case this helps someone, in tsconfig.app.json (or wherever you define your tsconfig settings), this Angular compiler option, when set to true, causes various metadata failures even if files are not directly referenced in the NgModule metadata (simply importing a file in an index.ts is enough).
Individual files / types can be surpressed with the // @dynamic comment, or ... you can check to make sure that strictMetadataEmit is set to false:
tsconfig.json:
"angularCompilerOptions": {
"strictMetadataEmit": false
}
In my case, this had been set to true at some point, so Angular was failing on metadata for classes that had nothing to do with module defs. Setting it to false (which is the default, as specified here: https://angular.io/guide/angular-compiler-options) fixed the issue.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
