No NgModule metadata found for 'AppModule' after upgrade from Angular 5 to Angular 7How to add bootstrap to an angular-cli projectHow to include custom files with angular-cli build?No NgModule metadata found for 'AppModule' with webpack AngularCompilerPluginAngular Upgrade From 5 to 6: asset path must start with the project source rootngx-leaflet LatLngBounds from JSON objectAngular build produce invalid folder pathHow to use angular-cli source as global package?Angular CLI 7: Sass Warning while compileafter I upgraded my angular application from angular 5.2 to the latest. ng build produces this ERROR

Need to read my home electrical meter

Website returning plaintext password

Is there an online tool which supports shared writing?

bash regexp matching fails in [[ ]]

Can the Grave cleric's Sentinel at Death's Door feature turn a critical hit into a miss, while adamantine armor does not?

Open office space - complaints for noise - how to respond

NIntegrate doesn't evaluate

What does $!# mean in Shell scripting?

Sankey diagram: not getting the hang of it

Is it possible to remotely hack the GPS system and disable GPS service worldwide?

Why does the hash of infinity have the digits of π?

Why does this if-statement combining assignment and an equality check return true?

Defining the standard model of PA so that a space alien could understand

Compaq Portable vs IBM 5155 Portable PC

Is there a simple example that empirical evidence is misleading?

How to patch glass cuts in a bicycle tire?

USPS Back Room - Trespassing?

I know that there is a preselected candidate for a position to be filled at my department. What should I do?

How to melt snow without fire or body heat?

How can I select seats on Amtrak train?

How to politely tell someone they did not hit "reply to all" in an email?

Why did Theresa May offer a vote on a second Brexit referendum?

Why did Jon Snow do this immoral act if he is so honorable?

Have 1.5% of all nuclear reactors ever built melted down?



No NgModule metadata found for 'AppModule' after upgrade from Angular 5 to Angular 7


How to add bootstrap to an angular-cli projectHow to include custom files with angular-cli build?No NgModule metadata found for 'AppModule' with webpack AngularCompilerPluginAngular Upgrade From 5 to 6: asset path must start with the project source rootngx-leaflet LatLngBounds from JSON objectAngular build produce invalid folder pathHow to use angular-cli source as global package?Angular CLI 7: Sass Warning while compileafter I upgraded my angular application from angular 5.2 to the latest. ng build produces this ERROR






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








3















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'.



enter image description here



If I run the ng --version command it shows the following:



  • Angular CLI: 7.3.6

  • Node: 11.10.0

  • OS: win32 x64

  • Angular: 7.2.10

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/ng2-toastr@4.1.2/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:



  1. npm install -g @angular/cli

  2. npm install @angular/cli

  3. ng update @angular/cli

  4. ng update

  5. ng update @angular/cli @angular/core

  6. ng build

The same issue about the NgModule metadata was still present. Next I tried the following:



  1. npm remove webpack

  2. npm install –save-dev @angular/cli@latest

  3. npm cache clean –force

  4. npm install

  5. npm install –save-dev @angular/cli@latest

  6. ng build

Issue persisted. Next:



  1. Manually deleted the node_modules folder

  2. npm install

  3. ng build

Issue persisted. Next:



  1. npm i -g @angular/cli@latest

  2. Manually deleted node_modules folder

  3. npm cache clear –force

  4. npm cache verify

  5. npm install

  6. npm uninstall webpack

  7. npm install –save-dev –save-exact @angular/cli@latest

  8. ng build

Issue persisted. Next:



  1. Manually deleted the node_modules folder

  2. Manually deleted the package-lock.json file

  3. npm install

  4. ng build

Issue persisted. Next:



  1. npm remove webpack

  2. npm install –save-dev @angular/cli@latest

  3. ng build

Issue persisted. Next:



  1. npm cache clean –force

  2. npm install

  3. npm install –save-dev @angular/cli@latest

  4. ng build

Issue persisted. Next:



  1. Manually deleted the node_modules folder

  2. Manually deleted the package-lock.json file

  3. npm cache clean –force

  4. npm install

  5. npm install –save-dev @angular/cli@latest

Issue persisted. Next:



  1. Opened project in Visual Studio code

  2. In the terminal window ran ng s

  3. Confirmed compilation error

  4. Opened the app.component.ts file

  5. Added a blank space, removed it, and saved

  6. Project automatically recompiled

  7. Successfully access the site at http://localhost:4200

  8. Closed Visual Studio Code

  9. From a Git Bash window ran ng serve

  10. Project failed to compile

  11. Re-opened Visual Studio Code

  12. Ran ng serve from terminal window – error persisted

  13. Resaved the app.component.ts file

  14. Successfully accessed the site at http://localhost:4200

  15. Restarted Visual Studio Code

  16. Ran ng build from terminal window in Visual Studio Code – error returned

  17. Resaved the app.component.ts file

  18. Reran ng build command – error persisted

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.






angular angular7







share|improve this question






























    3















    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'.



    enter image description here



    If I run the ng --version command it shows the following:



    • Angular CLI: 7.3.6

    • Node: 11.10.0

    • OS: win32 x64

    • Angular: 7.2.10

    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/ng2-toastr@4.1.2/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:



    1. npm install -g @angular/cli

    2. npm install @angular/cli

    3. ng update @angular/cli

    4. ng update

    5. ng update @angular/cli @angular/core

    6. ng build

    The same issue about the NgModule metadata was still present. Next I tried the following:



    1. npm remove webpack

    2. npm install –save-dev @angular/cli@latest

    3. npm cache clean –force

    4. npm install

    5. npm install –save-dev @angular/cli@latest

    6. ng build

    Issue persisted. Next:



    1. Manually deleted the node_modules folder

    2. npm install

    3. ng build

    Issue persisted. Next:



    1. npm i -g @angular/cli@latest

    2. Manually deleted node_modules folder

    3. npm cache clear –force

    4. npm cache verify

    5. npm install

    6. npm uninstall webpack

    7. npm install –save-dev –save-exact @angular/cli@latest

    8. ng build

    Issue persisted. Next:



    1. Manually deleted the node_modules folder

    2. Manually deleted the package-lock.json file

    3. npm install

    4. ng build

    Issue persisted. Next:



    1. npm remove webpack

    2. npm install –save-dev @angular/cli@latest

    3. ng build

    Issue persisted. Next:



    1. npm cache clean –force

    2. npm install

    3. npm install –save-dev @angular/cli@latest

    4. ng build

    Issue persisted. Next:



    1. Manually deleted the node_modules folder

    2. Manually deleted the package-lock.json file

    3. npm cache clean –force

    4. npm install

    5. npm install –save-dev @angular/cli@latest

    Issue persisted. Next:



    1. Opened project in Visual Studio code

    2. In the terminal window ran ng s

    3. Confirmed compilation error

    4. Opened the app.component.ts file

    5. Added a blank space, removed it, and saved

    6. Project automatically recompiled

    7. Successfully access the site at http://localhost:4200

    8. Closed Visual Studio Code

    9. From a Git Bash window ran ng serve

    10. Project failed to compile

    11. Re-opened Visual Studio Code

    12. Ran ng serve from terminal window – error persisted

    13. Resaved the app.component.ts file

    14. Successfully accessed the site at http://localhost:4200

    15. Restarted Visual Studio Code

    16. Ran ng build from terminal window in Visual Studio Code – error returned

    17. Resaved the app.component.ts file

    18. Reran ng build command – error persisted

    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.






    angular angular7







    share|improve this question


























      3












      3








      3








      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'.



      enter image description here



      If I run the ng --version command it shows the following:



      • Angular CLI: 7.3.6

      • Node: 11.10.0

      • OS: win32 x64

      • Angular: 7.2.10

      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/ng2-toastr@4.1.2/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:



      1. npm install -g @angular/cli

      2. npm install @angular/cli

      3. ng update @angular/cli

      4. ng update

      5. ng update @angular/cli @angular/core

      6. ng build

      The same issue about the NgModule metadata was still present. Next I tried the following:



      1. npm remove webpack

      2. npm install –save-dev @angular/cli@latest

      3. npm cache clean –force

      4. npm install

      5. npm install –save-dev @angular/cli@latest

      6. ng build

      Issue persisted. Next:



      1. Manually deleted the node_modules folder

      2. npm install

      3. ng build

      Issue persisted. Next:



      1. npm i -g @angular/cli@latest

      2. Manually deleted node_modules folder

      3. npm cache clear –force

      4. npm cache verify

      5. npm install

      6. npm uninstall webpack

      7. npm install –save-dev –save-exact @angular/cli@latest

      8. ng build

      Issue persisted. Next:



      1. Manually deleted the node_modules folder

      2. Manually deleted the package-lock.json file

      3. npm install

      4. ng build

      Issue persisted. Next:



      1. npm remove webpack

      2. npm install –save-dev @angular/cli@latest

      3. ng build

      Issue persisted. Next:



      1. npm cache clean –force

      2. npm install

      3. npm install –save-dev @angular/cli@latest

      4. ng build

      Issue persisted. Next:



      1. Manually deleted the node_modules folder

      2. Manually deleted the package-lock.json file

      3. npm cache clean –force

      4. npm install

      5. npm install –save-dev @angular/cli@latest

      Issue persisted. Next:



      1. Opened project in Visual Studio code

      2. In the terminal window ran ng s

      3. Confirmed compilation error

      4. Opened the app.component.ts file

      5. Added a blank space, removed it, and saved

      6. Project automatically recompiled

      7. Successfully access the site at http://localhost:4200

      8. Closed Visual Studio Code

      9. From a Git Bash window ran ng serve

      10. Project failed to compile

      11. Re-opened Visual Studio Code

      12. Ran ng serve from terminal window – error persisted

      13. Resaved the app.component.ts file

      14. Successfully accessed the site at http://localhost:4200

      15. Restarted Visual Studio Code

      16. Ran ng build from terminal window in Visual Studio Code – error returned

      17. Resaved the app.component.ts file

      18. Reran ng build command – error persisted

      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.






      angular angular7







      share|improve this question
















      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'.



      enter image description here



      If I run the ng --version command it shows the following:



      • Angular CLI: 7.3.6

      • Node: 11.10.0

      • OS: win32 x64

      • Angular: 7.2.10

      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/ng2-toastr@4.1.2/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:



      1. npm install -g @angular/cli

      2. npm install @angular/cli

      3. ng update @angular/cli

      4. ng update

      5. ng update @angular/cli @angular/core

      6. ng build

      The same issue about the NgModule metadata was still present. Next I tried the following:



      1. npm remove webpack

      2. npm install –save-dev @angular/cli@latest

      3. npm cache clean –force

      4. npm install

      5. npm install –save-dev @angular/cli@latest

      6. ng build

      Issue persisted. Next:



      1. Manually deleted the node_modules folder

      2. npm install

      3. ng build

      Issue persisted. Next:



      1. npm i -g @angular/cli@latest

      2. Manually deleted node_modules folder

      3. npm cache clear –force

      4. npm cache verify

      5. npm install

      6. npm uninstall webpack

      7. npm install –save-dev –save-exact @angular/cli@latest

      8. ng build

      Issue persisted. Next:



      1. Manually deleted the node_modules folder

      2. Manually deleted the package-lock.json file

      3. npm install

      4. ng build

      Issue persisted. Next:



      1. npm remove webpack

      2. npm install –save-dev @angular/cli@latest

      3. ng build

      Issue persisted. Next:



      1. npm cache clean –force

      2. npm install

      3. npm install –save-dev @angular/cli@latest

      4. ng build

      Issue persisted. Next:



      1. Manually deleted the node_modules folder

      2. Manually deleted the package-lock.json file

      3. npm cache clean –force

      4. npm install

      5. npm install –save-dev @angular/cli@latest

      Issue persisted. Next:



      1. Opened project in Visual Studio code

      2. In the terminal window ran ng s

      3. Confirmed compilation error

      4. Opened the app.component.ts file

      5. Added a blank space, removed it, and saved

      6. Project automatically recompiled

      7. Successfully access the site at http://localhost:4200

      8. Closed Visual Studio Code

      9. From a Git Bash window ran ng serve

      10. Project failed to compile

      11. Re-opened Visual Studio Code

      12. Ran ng serve from terminal window – error persisted

      13. Resaved the app.component.ts file

      14. Successfully accessed the site at http://localhost:4200

      15. Restarted Visual Studio Code

      16. Ran ng build from terminal window in Visual Studio Code – error returned

      17. Resaved the app.component.ts file

      18. Reran ng build command – error persisted

      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.






      angular angular7




      angular angular7






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Mar 24 at 3:07







      Dominick

















      asked Mar 24 at 2:19









      DominickDominick

      304




      304






















          4 Answers
          4






          active

          oldest

          votes


















          1














          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:



          1. Remove the npm_modules folder

          2. Move the package.json file to a backup folder (in case we need it back) - so this should not exist in your project folder as it will get generated when you do the next steps

          3. Do the npm install

          4. Do ng build

          5. Do ng serve

          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.






          share|improve this answer























          • I have read that page and I have also included a screenshot of the actually error being displayed in the command window in the original question. I am trying your specified steps now and will report back shortly on whether the issue was resolved.

            – Dominick
            Mar 24 at 3:11











          • I removed the npm_modules folder and moved the package.json file to a backup folder. However, when I ran the npm install command, the package.json file was not re-created which caused the ng build command to output multiple errors about not being able to find modules (e.g. Could not find module "@angular-devkit/build-angular" from "C:\Users\...")

            – Dominick
            Mar 24 at 3:17












          • okay try updating the versions to the specificupdate version

            – Ian Preglo
            Mar 24 at 3:23











          • I re-read through the link you provided and it seems like I had missed one of the possible fixes. I had to update the tsconfig.app.json file to include the files array and specifically list app/app.module.ts in the array. The previous error about not find the metadata has been resolved but now there is errors regarding a property not existing on the type ''. This is definitely a different issue so I will start a new post if needed. Thank you for the assistance.

            – Dominick
            Mar 24 at 3:35











          • nice good that you were able to resolve with some hints good job on you man

            – Ian Preglo
            Mar 24 at 3:39



















          0














          It should be @NgModule not just NgModule. 



          @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]
           )


          Metadata is used to decorate a class so that it can configure the expected behavior of the class. We leverage the Typescript syntax and attach the classes with metadata using the decorator feature. To make a class as a component, we add the @Component decorator, as shown in the following code:



          @Component(...)
          export class FirstComponent ...





          share|improve this answer

























          • The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

            – Dominick
            Mar 24 at 2:39











          • Did you try deleting your node modules and re-installing them using npm install

            – Thivanka Saranatha
            Mar 24 at 2:48












          • Yes, that was the third thing I tried. I also deleted the node_modules folder during fixes 4 & 5, as well as deleting the node_modules folder along with the package-lock.json file as part of the steps of fix 8 listed in the original question.

            – Dominick
            Mar 24 at 2:52


















          0














          You have multiple trailing commas in your @NgModule's declarations and imports arrays. Delete those and see if that solves it.






          share|improve this answer

























          • The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

            – Dominick
            Mar 24 at 2:39











          • I don't see any reference to AppComponent in the index.html file, just a <app-root> tag. I have updated the original question with the contents of the index.html file as well as the angular.json file as I can't see anything wrong with this file.

            – Dominick
            Mar 24 at 3:06











          • Thanks anways...I appreciate you trying to help.

            – Dominick
            Mar 24 at 3:18


















          0














          I was able to resolve the issue by updating the tsconfig.app.json file to include the files property and specifically listing app/app.module.ts in the array.






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55320181%2fno-ngmodule-metadata-found-for-appmodule-after-upgrade-from-angular-5-to-angul%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            4 Answers
            4






            active

            oldest

            votes








            4 Answers
            4






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            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:



            1. Remove the npm_modules folder

            2. Move the package.json file to a backup folder (in case we need it back) - so this should not exist in your project folder as it will get generated when you do the next steps

            3. Do the npm install

            4. Do ng build

            5. Do ng serve

            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.






            share|improve this answer























            • I have read that page and I have also included a screenshot of the actually error being displayed in the command window in the original question. I am trying your specified steps now and will report back shortly on whether the issue was resolved.

              – Dominick
              Mar 24 at 3:11











            • I removed the npm_modules folder and moved the package.json file to a backup folder. However, when I ran the npm install command, the package.json file was not re-created which caused the ng build command to output multiple errors about not being able to find modules (e.g. Could not find module "@angular-devkit/build-angular" from "C:\Users\...")

              – Dominick
              Mar 24 at 3:17












            • okay try updating the versions to the specificupdate version

              – Ian Preglo
              Mar 24 at 3:23











            • I re-read through the link you provided and it seems like I had missed one of the possible fixes. I had to update the tsconfig.app.json file to include the files array and specifically list app/app.module.ts in the array. The previous error about not find the metadata has been resolved but now there is errors regarding a property not existing on the type ''. This is definitely a different issue so I will start a new post if needed. Thank you for the assistance.

              – Dominick
              Mar 24 at 3:35











            • nice good that you were able to resolve with some hints good job on you man

              – Ian Preglo
              Mar 24 at 3:39
















            1














            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:



            1. Remove the npm_modules folder

            2. Move the package.json file to a backup folder (in case we need it back) - so this should not exist in your project folder as it will get generated when you do the next steps

            3. Do the npm install

            4. Do ng build

            5. Do ng serve

            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.






            share|improve this answer























            • I have read that page and I have also included a screenshot of the actually error being displayed in the command window in the original question. I am trying your specified steps now and will report back shortly on whether the issue was resolved.

              – Dominick
              Mar 24 at 3:11











            • I removed the npm_modules folder and moved the package.json file to a backup folder. However, when I ran the npm install command, the package.json file was not re-created which caused the ng build command to output multiple errors about not being able to find modules (e.g. Could not find module "@angular-devkit/build-angular" from "C:\Users\...")

              – Dominick
              Mar 24 at 3:17












            • okay try updating the versions to the specificupdate version

              – Ian Preglo
              Mar 24 at 3:23











            • I re-read through the link you provided and it seems like I had missed one of the possible fixes. I had to update the tsconfig.app.json file to include the files array and specifically list app/app.module.ts in the array. The previous error about not find the metadata has been resolved but now there is errors regarding a property not existing on the type ''. This is definitely a different issue so I will start a new post if needed. Thank you for the assistance.

              – Dominick
              Mar 24 at 3:35











            • nice good that you were able to resolve with some hints good job on you man

              – Ian Preglo
              Mar 24 at 3:39














            1












            1








            1







            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:



            1. Remove the npm_modules folder

            2. Move the package.json file to a backup folder (in case we need it back) - so this should not exist in your project folder as it will get generated when you do the next steps

            3. Do the npm install

            4. Do ng build

            5. Do ng serve

            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.






            share|improve this answer













            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:



            1. Remove the npm_modules folder

            2. Move the package.json file to a backup folder (in case we need it back) - so this should not exist in your project folder as it will get generated when you do the next steps

            3. Do the npm install

            4. Do ng build

            5. Do ng serve

            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.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Mar 24 at 3:07









            Ian PregloIan Preglo

            30410




            30410












            • I have read that page and I have also included a screenshot of the actually error being displayed in the command window in the original question. I am trying your specified steps now and will report back shortly on whether the issue was resolved.

              – Dominick
              Mar 24 at 3:11











            • I removed the npm_modules folder and moved the package.json file to a backup folder. However, when I ran the npm install command, the package.json file was not re-created which caused the ng build command to output multiple errors about not being able to find modules (e.g. Could not find module "@angular-devkit/build-angular" from "C:\Users\...")

              – Dominick
              Mar 24 at 3:17












            • okay try updating the versions to the specificupdate version

              – Ian Preglo
              Mar 24 at 3:23











            • I re-read through the link you provided and it seems like I had missed one of the possible fixes. I had to update the tsconfig.app.json file to include the files array and specifically list app/app.module.ts in the array. The previous error about not find the metadata has been resolved but now there is errors regarding a property not existing on the type ''. This is definitely a different issue so I will start a new post if needed. Thank you for the assistance.

              – Dominick
              Mar 24 at 3:35











            • nice good that you were able to resolve with some hints good job on you man

              – Ian Preglo
              Mar 24 at 3:39


















            • I have read that page and I have also included a screenshot of the actually error being displayed in the command window in the original question. I am trying your specified steps now and will report back shortly on whether the issue was resolved.

              – Dominick
              Mar 24 at 3:11











            • I removed the npm_modules folder and moved the package.json file to a backup folder. However, when I ran the npm install command, the package.json file was not re-created which caused the ng build command to output multiple errors about not being able to find modules (e.g. Could not find module "@angular-devkit/build-angular" from "C:\Users\...")

              – Dominick
              Mar 24 at 3:17












            • okay try updating the versions to the specificupdate version

              – Ian Preglo
              Mar 24 at 3:23











            • I re-read through the link you provided and it seems like I had missed one of the possible fixes. I had to update the tsconfig.app.json file to include the files array and specifically list app/app.module.ts in the array. The previous error about not find the metadata has been resolved but now there is errors regarding a property not existing on the type ''. This is definitely a different issue so I will start a new post if needed. Thank you for the assistance.

              – Dominick
              Mar 24 at 3:35











            • nice good that you were able to resolve with some hints good job on you man

              – Ian Preglo
              Mar 24 at 3:39

















            I have read that page and I have also included a screenshot of the actually error being displayed in the command window in the original question. I am trying your specified steps now and will report back shortly on whether the issue was resolved.

            – Dominick
            Mar 24 at 3:11





            I have read that page and I have also included a screenshot of the actually error being displayed in the command window in the original question. I am trying your specified steps now and will report back shortly on whether the issue was resolved.

            – Dominick
            Mar 24 at 3:11













            I removed the npm_modules folder and moved the package.json file to a backup folder. However, when I ran the npm install command, the package.json file was not re-created which caused the ng build command to output multiple errors about not being able to find modules (e.g. Could not find module "@angular-devkit/build-angular" from "C:\Users\...")

            – Dominick
            Mar 24 at 3:17






            I removed the npm_modules folder and moved the package.json file to a backup folder. However, when I ran the npm install command, the package.json file was not re-created which caused the ng build command to output multiple errors about not being able to find modules (e.g. Could not find module "@angular-devkit/build-angular" from "C:\Users\...")

            – Dominick
            Mar 24 at 3:17














            okay try updating the versions to the specificupdate version

            – Ian Preglo
            Mar 24 at 3:23





            okay try updating the versions to the specificupdate version

            – Ian Preglo
            Mar 24 at 3:23













            I re-read through the link you provided and it seems like I had missed one of the possible fixes. I had to update the tsconfig.app.json file to include the files array and specifically list app/app.module.ts in the array. The previous error about not find the metadata has been resolved but now there is errors regarding a property not existing on the type ''. This is definitely a different issue so I will start a new post if needed. Thank you for the assistance.

            – Dominick
            Mar 24 at 3:35





            I re-read through the link you provided and it seems like I had missed one of the possible fixes. I had to update the tsconfig.app.json file to include the files array and specifically list app/app.module.ts in the array. The previous error about not find the metadata has been resolved but now there is errors regarding a property not existing on the type ''. This is definitely a different issue so I will start a new post if needed. Thank you for the assistance.

            – Dominick
            Mar 24 at 3:35













            nice good that you were able to resolve with some hints good job on you man

            – Ian Preglo
            Mar 24 at 3:39






            nice good that you were able to resolve with some hints good job on you man

            – Ian Preglo
            Mar 24 at 3:39














            0














            It should be @NgModule not just NgModule. 



            @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]
             )


            Metadata is used to decorate a class so that it can configure the expected behavior of the class. We leverage the Typescript syntax and attach the classes with metadata using the decorator feature. To make a class as a component, we add the @Component decorator, as shown in the following code:



            @Component(...)
            export class FirstComponent ...





            share|improve this answer

























            • The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

              – Dominick
              Mar 24 at 2:39











            • Did you try deleting your node modules and re-installing them using npm install

              – Thivanka Saranatha
              Mar 24 at 2:48












            • Yes, that was the third thing I tried. I also deleted the node_modules folder during fixes 4 & 5, as well as deleting the node_modules folder along with the package-lock.json file as part of the steps of fix 8 listed in the original question.

              – Dominick
              Mar 24 at 2:52















            0














            It should be @NgModule not just NgModule. 



            @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]
             )


            Metadata is used to decorate a class so that it can configure the expected behavior of the class. We leverage the Typescript syntax and attach the classes with metadata using the decorator feature. To make a class as a component, we add the @Component decorator, as shown in the following code:



            @Component(...)
            export class FirstComponent ...





            share|improve this answer

























            • The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

              – Dominick
              Mar 24 at 2:39











            • Did you try deleting your node modules and re-installing them using npm install

              – Thivanka Saranatha
              Mar 24 at 2:48












            • Yes, that was the third thing I tried. I also deleted the node_modules folder during fixes 4 & 5, as well as deleting the node_modules folder along with the package-lock.json file as part of the steps of fix 8 listed in the original question.

              – Dominick
              Mar 24 at 2:52













            0












            0








            0







            It should be @NgModule not just NgModule. 



            @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]
             )


            Metadata is used to decorate a class so that it can configure the expected behavior of the class. We leverage the Typescript syntax and attach the classes with metadata using the decorator feature. To make a class as a component, we add the @Component decorator, as shown in the following code:



            @Component(...)
            export class FirstComponent ...





            share|improve this answer















            It should be @NgModule not just NgModule. 



            @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]
             )


            Metadata is used to decorate a class so that it can configure the expected behavior of the class. We leverage the Typescript syntax and attach the classes with metadata using the decorator feature. To make a class as a component, we add the @Component decorator, as shown in the following code:



            @Component(...)
            export class FirstComponent ...






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Mar 24 at 2:41

























            answered Mar 24 at 2:33









            Thivanka SaranathaThivanka Saranatha

            1627




            1627












            • The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

              – Dominick
              Mar 24 at 2:39











            • Did you try deleting your node modules and re-installing them using npm install

              – Thivanka Saranatha
              Mar 24 at 2:48












            • Yes, that was the third thing I tried. I also deleted the node_modules folder during fixes 4 & 5, as well as deleting the node_modules folder along with the package-lock.json file as part of the steps of fix 8 listed in the original question.

              – Dominick
              Mar 24 at 2:52

















            • The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

              – Dominick
              Mar 24 at 2:39











            • Did you try deleting your node modules and re-installing them using npm install

              – Thivanka Saranatha
              Mar 24 at 2:48












            • Yes, that was the third thing I tried. I also deleted the node_modules folder during fixes 4 & 5, as well as deleting the node_modules folder along with the package-lock.json file as part of the steps of fix 8 listed in the original question.

              – Dominick
              Mar 24 at 2:52
















            The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

            – Dominick
            Mar 24 at 2:39





            The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

            – Dominick
            Mar 24 at 2:39













            Did you try deleting your node modules and re-installing them using npm install

            – Thivanka Saranatha
            Mar 24 at 2:48






            Did you try deleting your node modules and re-installing them using npm install

            – Thivanka Saranatha
            Mar 24 at 2:48














            Yes, that was the third thing I tried. I also deleted the node_modules folder during fixes 4 & 5, as well as deleting the node_modules folder along with the package-lock.json file as part of the steps of fix 8 listed in the original question.

            – Dominick
            Mar 24 at 2:52





            Yes, that was the third thing I tried. I also deleted the node_modules folder during fixes 4 & 5, as well as deleting the node_modules folder along with the package-lock.json file as part of the steps of fix 8 listed in the original question.

            – Dominick
            Mar 24 at 2:52











            0














            You have multiple trailing commas in your @NgModule's declarations and imports arrays. Delete those and see if that solves it.






            share|improve this answer

























            • The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

              – Dominick
              Mar 24 at 2:39











            • I don't see any reference to AppComponent in the index.html file, just a <app-root> tag. I have updated the original question with the contents of the index.html file as well as the angular.json file as I can't see anything wrong with this file.

              – Dominick
              Mar 24 at 3:06











            • Thanks anways...I appreciate you trying to help.

              – Dominick
              Mar 24 at 3:18















            0














            You have multiple trailing commas in your @NgModule's declarations and imports arrays. Delete those and see if that solves it.






            share|improve this answer

























            • The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

              – Dominick
              Mar 24 at 2:39











            • I don't see any reference to AppComponent in the index.html file, just a <app-root> tag. I have updated the original question with the contents of the index.html file as well as the angular.json file as I can't see anything wrong with this file.

              – Dominick
              Mar 24 at 3:06











            • Thanks anways...I appreciate you trying to help.

              – Dominick
              Mar 24 at 3:18













            0












            0








            0







            You have multiple trailing commas in your @NgModule's declarations and imports arrays. Delete those and see if that solves it.






            share|improve this answer















            You have multiple trailing commas in your @NgModule's declarations and imports arrays. Delete those and see if that solves it.







            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Mar 24 at 3:18

























            answered Mar 24 at 2:29









            Darren RuaneDarren Ruane

            867112




            867112












            • The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

              – Dominick
              Mar 24 at 2:39











            • I don't see any reference to AppComponent in the index.html file, just a <app-root> tag. I have updated the original question with the contents of the index.html file as well as the angular.json file as I can't see anything wrong with this file.

              – Dominick
              Mar 24 at 3:06











            • Thanks anways...I appreciate you trying to help.

              – Dominick
              Mar 24 at 3:18

















            • The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

              – Dominick
              Mar 24 at 2:39











            • I don't see any reference to AppComponent in the index.html file, just a <app-root> tag. I have updated the original question with the contents of the index.html file as well as the angular.json file as I can't see anything wrong with this file.

              – Dominick
              Mar 24 at 3:06











            • Thanks anways...I appreciate you trying to help.

              – Dominick
              Mar 24 at 3:18
















            The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

            – Dominick
            Mar 24 at 2:39





            The '@' symbol was originally there...I must have accidentally deleted it. However, I have re-added it (and updated the original question showing how the app.module.ts file is now) but when I run the ng build command I still get the same error.

            – Dominick
            Mar 24 at 2:39













            I don't see any reference to AppComponent in the index.html file, just a <app-root> tag. I have updated the original question with the contents of the index.html file as well as the angular.json file as I can't see anything wrong with this file.

            – Dominick
            Mar 24 at 3:06





            I don't see any reference to AppComponent in the index.html file, just a <app-root> tag. I have updated the original question with the contents of the index.html file as well as the angular.json file as I can't see anything wrong with this file.

            – Dominick
            Mar 24 at 3:06













            Thanks anways...I appreciate you trying to help.

            – Dominick
            Mar 24 at 3:18





            Thanks anways...I appreciate you trying to help.

            – Dominick
            Mar 24 at 3:18











            0














            I was able to resolve the issue by updating the tsconfig.app.json file to include the files property and specifically listing app/app.module.ts in the array.






            share|improve this answer



























              0














              I was able to resolve the issue by updating the tsconfig.app.json file to include the files property and specifically listing app/app.module.ts in the array.






              share|improve this answer

























                0












                0








                0







                I was able to resolve the issue by updating the tsconfig.app.json file to include the files property and specifically listing app/app.module.ts in the array.






                share|improve this answer













                I was able to resolve the issue by updating the tsconfig.app.json file to include the files property and specifically listing app/app.module.ts in the array.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Mar 24 at 3:37









                DominickDominick

                304




                304



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55320181%2fno-ngmodule-metadata-found-for-appmodule-after-upgrade-from-angular-5-to-angul%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    SQL error code 1064 with creating Laravel foreign keysForeign key constraints: When to use ON UPDATE and ON DELETEDropping column with foreign key Laravel error: General error: 1025 Error on renameLaravel SQL Can't create tableLaravel Migration foreign key errorLaravel php artisan migrate:refresh giving a syntax errorSQLSTATE[42S01]: Base table or view already exists or Base table or view already exists: 1050 Tableerror in migrating laravel file to xampp serverSyntax error or access violation: 1064:syntax to use near 'unsigned not null, modelName varchar(191) not null, title varchar(191) not nLaravel cannot create new table field in mysqlLaravel 5.7:Last migration creates table but is not registered in the migration table

                    Image
                    Does a multiclassed wizard start with a spellbook? Minimizing medical costs with HSA Boss has banned cycling to work because he thinks it's unsafe Is there a typical layout to blocking installed for backing in new construction framing? In the Seventh Seal why does Death let the chess game happen? Why has Novell never written its own boot loader? Should I warn my boss I might take sick leave Why is the saxophone not common in classical repertoire? Is it possible to spoof an IP address to an exact number? Motorcyle Chain needs to be cleaned every time you lube it? Bypass with wrong cvv of debit card and getting OTP Do we have a much compact and generalized version of erase–remove idiom? how can i make this execution plan more efficient? Why did moving the mouse cursor cause Windows 95 to run more quickly? What's the big deal about the Nazgûl losing their horses? Has chattel slavery ever been used as a criminal punishment in the USA since the passag...
                    Read more

                    용인 삼성생명 블루밍스 목차 통계 역대 감독 선수단 응원단 경기장 같이 보기 외부 링크 둘러보기 메뉴samsungblueminx.comeh선수 명단용인 삼성생명 블루밍스용인 삼성생명 블루밍스ehsamsungblueminx.comeheheheh

                    Image
                    수원 삼성생명 비추미광주 신세계 쿨캣수원 삼성생명 비추미안산 신한은행 에스버드안산 신한은행 에스버드안산 신한은행 에스버드춘천 우리은행 한새춘천 우리은행 한새춘천 우리은행 한새춘천 우리은행 한새아산 우리은행 위비아산 우리은행 위비청주 KB 스타즈 한국 여자 농구 연맹 팀1977년 설립...
                    Read more

                    155 수학 과학 기타 둘러보기 메뉴eh추가해eh문서를 완성해

                    Image
                    0123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369...
                    Read more