Angular9 JS 模塊與 NgMoudule 比較

JavaScript 和 Angular 都使用模塊來組織代碼，雖然它們的組織形式不同，但 Angular 的應用會同時依賴兩者。

JavaScript 模塊

在 JavaScript 中，模塊是內含 JavaScript 代碼的獨立文件。要讓其中的東西可用，你要寫一個導出語句，通常會放在相應的代碼之后，類似這樣：

export class AppComponent { ... }

然后，當你在其它文件中需要這個文件的代碼時，要像這樣導入它：

import { AppComponent } from './app.component';

JavaScript 模塊讓你能為代碼加上命名空間，防止因為全局變量而引起意外。

NgModules

NgModule 是一些帶有 @NgModule 裝飾器的類。@NgModule 裝飾器的 imports 數組會告訴 Angular 哪些其它的 NgModule 是當前模塊所需的。 imports 數組中的這些模塊與 JavaScript 模塊不同，它們都是 NgModule 而不是常規的 JavaScript 模塊。 帶有 @NgModule 裝飾器的類通常會習慣性地放在單獨的文件中，但單獨的文件并不像 JavaScript 模塊那樣作為必要條件，而是因為它帶有 @NgModule 裝飾器及其元數據。

Angular CLI 生成的 AppModule 實際演示了這兩種模塊：

/* These are JavaScript import statements. Angular doesn’t know anything about these. */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

/* The @NgModule decorator lets Angular know that this is an NgModule. */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [     /* These are NgModule imports. */
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

NgModule 類與 JavaScript 模塊有下列關鍵性的不同：

• NgModule 只綁定了可聲明的類，這些可聲明的類只是供 Angular 編譯器用的。

• 與 JavaScript 類把它所有的成員類都放在一個巨型文件中不同，你要把該模塊的類列在它的 @NgModule.declarations 列表中。

• NgModule 只能導出可聲明的類。這可能是它自己擁有的也可能是從其它模塊中導入的。它不會聲明或導出任何其它類型的類。

• 與 JavaScript 模塊不同，NgModule 可以通過把服務提供者加到 @NgModule.providers 列表中，來用服務擴展整個應用。