角度示意图。自定义 angular.json 文件

Posted 2023-03-13

【中文标题】角度示意图。自定义 angular.json 文件

【英文标题】：Angular Schematics. Customizing the angular.json file

【发布时间】：2018-12-07 16:48:55

【问题描述】：

当我使用原理图 (ng new --collection=@foo/schematics myproject) 构建网站时，一切正常，除了一件事：

生成的 angular.json 文件在样式数组中只包含一个样式文件，我需要它包含多个自定义样式文件：

构建新原理图后的当前 angular.json：

"build": 
  "options": 
    "styles: [
      "src/styles.scss"
    ]
  

期望：

"build": 
  "options": 
    "styles: [
      "src/styles.scss",
      "src/custom1.scss",
      "src/custom2.scss"
    ]
  

我如何告诉 Angular 原理图例程我想要包含这些额外的样式表？

【问题讨论】：

你的原理图是什么样的？

【参考方案1】：

我不确定这是否是最佳做法，但我最近也必须弄清楚这一点......这就是我所做的......

function updateAngularJson(options: any): Rule 
	return (host: Tree, context: SchematicContext) => 
		updateAngularJsonOptions(host, options);
		return host;
	


function updateAngularJsonOptions(host, options) 
	var projectDir = (options.directory || options.name) + '/';
	var configPath = projectDir + 'angular.json';
	var workspace = getWorkspace(host, projectDirectory);

	if (host.exists(configPath)) 
		var currentAngularJson = host.read(configPath)!.toString('utf-8');
		var json = JSON.parse(currentAngularJson);
		var optionsJson = json['projects'][options.name]['architect']['build']['options'];
		optionsJson['assets'].push("src/custom1.scss");
		optionsJson['assets'].push("src/custom2.scss");
		json['projects'][options.name]['architect']['build']['options'] = optionsJson;
		host.overwrite(configPath, JSON.stringify(json, null, 2));
	 else 
		throw new SchematicsException('angular.json not found at ' + configPath);
	
	return host;

仔细检查上面的代码 - 由于某些原因，我无法复制/粘贴我的工作解决方案，所以我输入了这个以试图提供帮助。希望你从上面得到想法......有效对我来说还不错……

【讨论】：

我喜欢新时代的发展正在从手动编码（大部分时间）转向脚手架（大部分时间）的事实

@vivekmore，对我来说，脚手架满足了手动编码和开发人员文档之间的需求。在我编写框架和平台工具的特殊角色中，我能够将我通常必须编写的开发人员目标文档减少约 50%+。我能够提供一个生成代码示例页面的单行代码，而不是一页代码示例，这太棒了！