關於引入Module的方式

General
1

大家好
最近看了一些程式碼，其在引用Angular Material時的引入方法與我使用的方法有些不同

兩種方法分別是

  1. 各個Module引入所需
@NgModule({
    declarations: [...components],
    imports: [
        CommonModule, 
        ReactiveFormsModule, 
        MatButtonModule, 
        MatCardModule, 
        ... modules
    ],
    providers: [...providers]
})
export class PageModule1{}

@NgModule({
    declarations: [...components],
    imports: [
        CommonModule, 
        ReactiveFormsModule, 
        MatButtonModule, 
        MatFormFieldModule, 
        ... modules
    ],
    providers: [...providers]
})
export class PageModule2{}
  1. 使用SharedModule
const modules = [
    MatCardModule,
    MatButtonModule,
    MatFormFieldModule,
    ...
];

@NgModule({
    declarations: [],
    imports: [CommonModule, ...modules],
    exports: [...modules],
    providers: []
})
export class SharedMaterialModules { }

// page modules
@NgModule({
    declarations: [...components],
    imports: [SharedMaterialModules],
    providers: [...providers]
})
export class PageModule1{}

@NgModule({
    declarations: [...components],
    imports: [SharedMaterialModules],
    providers: [...providers]
})
export class PageModule2{}

我是使用第二種做法，想知道有沒有什麼分別 ? 會影響到什麼？

2

其實差異不大，頂多在 tree-shaking 時會些微的差距

1個讚