角度未捕获的错误：找不到“ kc”的NgModule元数据

Question

I have problem while running my MEAN Stack app use ng-build --prod command. My terminal running well, no error occurs. But when I open the browser in localhost:4200, my app didn't show anything. And then the console give me this error :

> Uncaught Error: No NgModule metadata found for 'kc'.
    at e.resolve (main.371a82c9fcb51afc1df0.js:1)
    at e.getNgModuleMetadata (main.371a82c9fcb51afc1df0.js:1)
    at e._loadModules (main.371a82c9fcb51afc1df0.js:1)
    at e._compileModuleAndComponents (main.371a82c9fcb51afc1df0.js:1)
    at e.compileModuleAsync (main.371a82c9fcb51afc1df0.js:1)
    at e.compileModuleAsync (main.371a82c9fcb51afc1df0.js:1)
    at e.bootstrapModule (main.371a82c9fcb51afc1df0.js:1)
    at Object.zUnb (main.371a82c9fcb51afc1df0.js:1)
    at p (runtime.a66f828dca56eeb90e02.js:1)
    at Object.3 (main.371a82c9fcb51afc1df0.js:1)

I don't know why this happen, because when I run it use ng-build without --prod , my app running well. This is my main.ts file :

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';
if (environment.production) {
  enableProdMode();
}

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));


document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
    if ('serviceWorker' in navigator && environment.production) {
      navigator.serviceWorker.register('/ngsw-worker.js');
    }
  })
    .catch(err => console.log(err));
});

And below my app.module.ts :

import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  title = 'Internship Program Tracer';
  constructor(
    private authService : AuthService,
    private router : Router,
  ){
  }

  ngOnInit() {

  }
}

UPDATE : When I compiles my project using ng serve --prod there's no vendor.js found :

Date: 2018-10-16T22:20:26.127Z
Hash: d2be935ebafc240e254f
Time: 57889ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.ad29f085d4a251cb6386.css (styles) 43.9 kB [initial] [rendered]
chunk {2} polyfills.19a6a3da76674acaee2e.js (polyfills) 59.1 kB [initial] [rendered]
chunk {3} main.9f6403673fe64ddd0b86.js (main) 684 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.

But when I compiles ng serve vendor.js found :

Date: 2018-10-16T22:23:38.817Z
Hash: 91cb9d988bc421669cc9
Time: 23624ms
chunk {main} main.js, main.js.map (main) 289 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 224 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 62.1 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.5 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.

Answer 1

Try doing this if the problem is only with prod build and your application works well on ng serve:

npm cache clean --force

npm install

npm install --save-dev @angular/cli@latest