如果在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有兩種編譯方式
- Just-in-Time (JIT):應用程式執行時編譯(runtime)。
- Ahead-of-Time (AOT):建構應用程式時編譯(build time)。
一般的ng build
是使用JIT方式編譯。
但使用ng build --prod
預設是使用AOT來編譯,所以通常問題都發生在本機開發時編譯沒問題,但進行生產環境編譯時出現錯誤。
此錯誤可能是一個未修復的bug,請見Angular2 AOT compilation - "Cannot determine the module for class (... many components which are unused)" #13590。
AOT開發者的影片說明 - The Angular 2 Compiler Tobias Bosch。
參考:
沒有留言:
張貼留言