網頁

2019/7/13

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有兩種編譯方式

  • 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


參考:

沒有留言:

張貼留言