Angular Schematics - 添加庫到 NgModule 導入

Question

當使用 Schematics 在 Angular 中生成組件時，它會嘗試將新生成的組件導入到 NgModule 中，這是強制性的，以便組件可以工作並節省時間。

但是，在創建我自己的原理圖時，我無法找到正確的方法來執行相同的操作並將我的庫導入到 app.component.ts 的 NgModule 中。 使用 ng-add schematics 時，如何讓 schematic 自動將其自己的條目添加到 NgModule 中？

原理圖需要做兩件事：

1. 導入庫
2. 將它添加到 NgModule 導入

前：

@NgModule({
  declarations: [],
  imports: [],
  exports: []
})
export class appModule { }

后：

import {library} from 'library';

@NgModule({
  declarations: [],
  imports: [library],
  exports: []
})
export class appModule { }

我知道 angular devkit 中存在執行此操作的功能，因為組件的“官方”原理圖等使用它。 我該怎么做？

Answer 1

對於第一種情況，類似下面的代碼可以幫助您：

export function addImportStatement(tree: Tree, filePath: string, type: string, file: string): void {
    let source = getTsSourceFile(tree, filePath);
    const importChange = insertImport(source, filePath, type, file) as InsertChange;
    if (!(importChange instanceof NoopChange)) {
        const recorder = tree.beginUpdate(filePath);
        recorder.insertLeft(importChange.pos, importChange.toAdd);
        tree.commitUpdate(recorder);
    }
}

對於第二個，我現在不記得了，但你可以查看angular-cli schematics存儲庫，以了解它是如何為模塊之類的東西完成的。

干杯!

Answer 2

這是一個使用“@schematics/angular/utility/ast-utils”utils 中的“addImportToModule”函數的函數。

function _addImport(
  importPath: string,
  importName: string,
  _options: Partial<Schema>,
  tree: Tree
): Tree {
  const appModulePath = `/${_options.projectName}/src/app/app.module.ts`;
  const appModuleFile = tree.read(normalize(appModulePath)).toString('utf-8');
  if (!appModuleFile) {
    throw new SchematicsException('app.module.ts not found');
  }
  const result = new AddToModuleContext();
  result.source = ts.createSourceFile(
    appModulePath,
    appModuleFile,
    ts.ScriptTarget.Latest,
    true
  );
  result.relativePath = importPath;
  result.classifiedName = importName;
  const importsChanges = addImportToModule(
    result.source,
    appModulePath,
    result.classifiedName,
    result.relativePath
  );
  const importRecorder = tree.beginUpdate(appModulePath);
  for (const change of importsChanges) {
    if (change instanceof InsertChange) {
      importRecorder.insertLeft(change.pos, change.toAdd);
    }
  }
  tree.commitUpdate(importRecorder);
  return tree;
}

在我返回規則的其他函數之一的末尾，在我對 chain([]) 的調用中......，我像這樣調用了這個函數（我需要將 HttpClientModule 添加到導入中，如果用戶安裝了在選項 x-prompts 期間進行 flex 布局，我還需要將 FlexLayoutModule 添加到導入中。還有多個其他實用函數，例如 addDependencyToModule、addExportToModule 等，可用於調整任何 module.ts 文件

電話：

tree = _addImport(
      '@angular/common/http',
      'HttpClientModule',
      _options,
      tree
    );
    if (_options.dependencies.includes('flexLayout')) {
      tree = _addImport(
        '@angular/flex-layout',
        'FlexLayoutModule',
        _options,
        tree
      );
    }
    return tree;

這成功地將兩個模塊添加到我的導入中：app.module 中的 []，以及頂部的導入語句。 還有一個來自“@schematics/angular/utility/find-module”的實用函數“buildRelativePath”，如果您需要從您正在使用的模塊所在的位置構建相對路徑，它會有所幫助。