Angular Schematics - 将库添加到 NgModule 导入

Posted

技术标签:

【中文标题】Angular Schematics - 将库添加到 NgModule 导入【英文标题】:Angular Schematics - add library to NgModule imports 【发布时间】:2020-04-05 19:33:05 【问题描述】:

当使用 Schematics 在 Angular 中生成组件时,它会尝试将新生成的组件导入 NgModule 中,这是强制性的,以便组件工作并节省时间。

但是,在创建自己的原理图时,我无法找到正确的方法来做同样的事情并将我的库导入 app.component.ts 的 NgModule。使用ng-add原理图时,如何让原理图自动添加自己的入口到NgModule?

原理图需要做两件事:

    导入库 将其添加到 NgModule 导入中

之前:

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

之后:

import library from 'library';

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

我知道 angular devkit 中存在执行此操作的功能,因为组件的“官方”原理图等使用它。我该怎么做?

【问题讨论】:

【参考方案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 存储库,以了解它是如何处理模块之类的。

干杯!

【讨论】:

【参考方案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;

在我的其他一个返回规则的函数的末尾,在我对链([])的调用中,我这样调用了这个函数(我需要将 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 中的 [] 以及顶部的导入语句。还有一个来自“@schemics/angular/utility/find-module”的实用函数“buildRelativePath”,如果您需要从您正在使用的模块所在的任何位置构建相对路径,它可以提供帮助。

【讨论】:

以上是关于Angular Schematics - 将库添加到 NgModule 导入的主要内容,如果未能解决你的问题,请参考以下文章

Angular Schematics 相对路径

ClassOptions Schema - Angular Schematics

Angular 6 Schematics 无效源(未定义)

如何修复“找不到模块'@angular-devkit/schematics'”

在集合“@schematics/angular”中找不到原理图“库”

如何运行@angular-eslint/schematics:convert-tslint-to-eslint