如何使用 Visual Studio Code 调试 Angular Schematics 实现

简介: How to Debug an Angular Schematic using Visual Studio Code能够在代码执行时调试和遍历代码是我们开发工作流程的基础。这是一项必不可少的功能,使我们能够调试和确定代码在做什么。它可以是我们测试工作流程的一部分——附加调试器并在特定场景中执行测试。

调试还提供了一个机会来了解代码(我们没有实现的)是如何工作的。原理图当然就是这种情况。作为 Angular 开发人员,我们在使用 Angular CLI 时肯定每天都在使用原理图。


我们使用 CLI 创建新的工作区、项目、服务、组件、模块、类等 - 我们很少考虑幕后发生的事情。


但是,了解原理图的工作原理使我们能够欣赏为我们提供如此多功能的工具。但它也有助于学习如何创建我们自己的原理图。


当您运行/执行 Schematic 时,您正在运行一个节点程序。 我们运行的具体程序是原理图。 因此,要开始,我们需要一个原理图项目。


Tooling and Prerequisites

之前,我们可以使用 schema-cli 创建一个原理图项目,我们需要确保我们的开发环境中有以下包可用。 使用 -g 安装以下软件包以使其全局可用。


npm install -g @angular-devkit/schematics

npm install -g @angular-devkit/schematics-cli


该工具允许我们使用原理图集合创建新的原理图项目。 在终端中运行 schematics 命令。


输出是命令的选项列表。

image.png


image.png

image.png

image.png

image.png

image.png

image.png

image.png

相关文章
|
6月前
|
开发者
Angular Schematics 实战 - 项目根目录新建一个文件
Angular Schematics 实战 - 项目根目录新建一个文件
30 0
|
6月前
关于 Angular view Query 的 id 选择器问题的单步调试
关于 Angular view Query 的 id 选择器问题的单步调试
53 0
|
6月前
|
存储 缓存 JSON
用 Visual Studio Code 开发 Angular 应用自动生成的 .angular 文件夹
用 Visual Studio Code 开发 Angular 应用自动生成的 .angular 文件夹
32 0
|
6月前
|
存储 API
什么是 Angular Schematics
什么是 Angular Schematics
22 0
|
6月前
|
前端开发 JavaScript
通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
42 0
|
6月前
|
存储 JavaScript 前端开发
通过单步调试的方式学习 Angular 中 TView 和 LView 的概念
通过单步调试的方式学习 Angular 中 TView 和 LView 的概念
46 1
|
6月前
|
JavaScript
Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试
Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试
56 2
|
6月前
|
存储
Angular 基于自定义指令的内容投影 content projection 问题的单步调试
Angular 基于自定义指令的内容投影 content projection 问题的单步调试
26 0
|
6月前
Angular 内容投影 content projection 关于条件渲染问题的单步调试
Angular 内容投影 content projection 关于条件渲染问题的单步调试
29 0
|
2月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
30 2