前言
升级 Angular 11 已经是几个月之前的事情了，在升级 Angular 11 之后，schematics 有些函数的用法变了，直接运行会报错，花了两天时间纠正了部分 API。本文主要记录其中的一些变化。
函数优化
1、使用 async/await 获取工作空间
更新前
代码语言：javascript复制function addLoaderToIndex(options: Schema): (host: Tree) => Tree {
return (host: Tree) => {
const workspace = getWorkspace(host);
const project = getProjectFromWorkspace(workspace, options.project);
const projectIndexHtmlPath = getIndexHtmlPath(project);
...
}
}更新后
代码语言：javascript复制function addLoaderToIndex(options: Schema): Rule {
return async (host: Tree) => {
const workspace = await getWorkspace(host);
const project = getProjectFromWorkspace(workspace, options.project);
const projectIndexFiles = getProjectIndexFiles(project);
...
}
}更新 11 之后的 getWorkspace 方法使用了 await 关键字，暂时不清楚这样变化的原因。
2、 新增 updateWorkspace 方法
更新前
代码语言：javascript复制function addHmrToAngularJson() {
return (host: Tree) => {
const workspace = getWorkspace(host);
const ngJson = Object.assign(workspace);
const project = ngJson.projects[ngJson.defaultProject];
// build
project.architect.build.configurations.hmr = {
fileReplacements: [
{
replace: `${project.sourceRoot}/environments/environment.ts`,
with: `${project.sourceRoot}/environments/environment.hmr.ts`,
},
],
};
// serve
project.architect.serve.configurations.hmr = {
hmr: true,
browserTarget: `${workspace.defaultProject}:build:hmr`,
};
host.overwrite('angular.json', JSON.stringify(ngJson, null, 2));
};
}更新后
代码语言：javascript复制function addHmrToAngularJson(oprions: Schema) {
return updateWorkspace(workspace => {
const project = getProjectFromWorkspace(workspace);
const targetBuildConfig = project.targets?.get('build')?.configurations as any;
const targetServeConfig = project.targets?.get('serve')?.configurations as any;
targetBuildConfig.hmr = {
fileReplacements: [
{
replace: `${project.sourceRoot}/environments/environment.ts`,
with: `${project.sourceRoot}/environments/environment.hmr.ts`,
},
],
};
targetServeConfig.hmr = {
hmr: true,
browserTarget: `${oprions.project}:build:hmr`,
};
});
}我个人觉得 updateWorkspace 方法很有意思，在上一个版本中如果想更新 json 文件，需要使用 host.overwrite 覆盖原文件。当前方法则使用了封装好的 updateWorkspace 方法。这个方法本身就是更新 angular.json
3、封装 chalk 的方法，不再需要直接引用
更新前
代码语言：javascript复制function addAnimationsModule(options: Schema) {
return (host: Tree) => {
...
if (hasNgModuleImport(host, appModulePath, noopAnimationsModuleName)) {
return console.warn(
chalk.red(
`Could not set up "${chalk.bold(browserAnimationsModuleName)}" `
`because "${chalk.bold(noopAnimationsModuleName)}" is already imported. Please `
`manually set up browser animations.`
)
);
}
...
};
}更新后
代码语言：javascript复制function addAnimationsModule(options: Schema) {
return async (host: Tree, context: SchematicContext) => {
if (hasNgModuleImport(host, appModulePath, noopAnimationsModuleName)) {
context.logger.error(
`Could not set up "${browserAnimationsModuleName}" `
`because "${noopAnimationsModuleName}" is already imported.`
);
context.logger.info(`Please manually set up browser animations.`);
return;
}
};
}更新后版本已经不需要显式的引用 chalk 插件了，只需要使用封装好的 context.logger 即可。
4、projectType 的取值有变化
更新前
代码语言：javascript复制function buildDefaultPath(project: WorkspaceProject): string {
const root = project.sourceRoot ? `/${project.sourceRoot}/` : `/${project.root}/src/`;
const projectDirName = project.projectType === ProjectType.Application ? 'app' : 'lib';
return `${root}${projectDirName}`;
}更新后
代码语言：javascript复制function buildDefaultPath(project: ProjectDefinition): string {
const root = project.sourceRoot ? `/${project.sourceRoot}/` : `/${project.root}/src/`;
const projectDirName = project.extensions.projectType === ProjectType.Application ? 'app' : 'lib';
return `${root}${projectDirName}`;
}更新之后在使用 buildDefaultPath 这个方法的时候遇到一个错误，projectType 必须通过 project.extensions.projectType 才能获取。
总结
在升级 Angular 11 之后，除了上面提到的方法优化之外，还有一些方法的删减，总的来说， schematics 的代码变得更加简洁了。
