菜鳥工程師肉豬: Angular Can not determine the module class XXXComponent in [location] 錯誤

如果在Angular 做預先編譯時(Ahead of Time Complication, AOT)，出現錯誤如下：

Error in : Can not determine the module class XXXComponent in [location]! Add XXXComponent to the NgModule to fix it.

D:\myapps\demo>ng build  --prod

Date: 2019-07-14T01:14:06.649Z
Hash: af5ca29d4e94905cb303
Time: 12275ms
chunk {0} runtime.26209474bfa8dc87a77c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.bda95d5896422d031328.js (es2015-polyfills) 56.6 kB [initial] [rendered]
chunk {2} main.fa4681da67b0e16d34dc.js (main) 128 bytes [initial] [rendered]
chunk {3} polyfills.41559ea504b9f00b6dea.js (polyfills) 130 bytes [initial] [rendered]
chunk {4} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]

ERROR in : Cannot determine the module for class StandListComponent in D:/myapps/demo/src/app/stand
-list/stand-list.component.ts! Add StandListComponent to the NgModule to fix it.

當把@NgModule中有宣告但沒用到的Component註解掉時，會發生此錯誤。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; 

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StandListComponent } from './stand-list/stand-list.component';

@NgModule({
  declarations: [
    AppComponent,
    // StandListComponent // <-- 專案中有StandListComponent，但在NgModule中被註解掉 
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular有兩種編譯方式