VSCode 下调试 Angular Library

Photo by MAX LIBERTINE on Unsplash

VSCode 调试功能繁琐之处在于,

不同结构的项目往往需要手动编辑 launch.json 这个配置文件。

本文以 Angular Library 调试为切入点,

介绍在 VSCode 下调试 Angular Library 的方法。

为了更好的理解这个指南,

你可以首先 git clone ngx-spinner 这个仓库。

本文第一节 介绍了 ngx-spinner 仓库及其目录结构。

第二节介绍了 angular.json 还有 tsconfig.json 两个文件。

第三节使用 ng serve 的 vendorSourceMap 选项来生成源码信息。

第四节通过配置 lauch.json 来确定调试入口及 source map 与 源码的映射。

其中第三、四节是本文的核心,没有耐心的可以直接跳到第三节开始阅读。

1.ngx-spinner 简介

ngx-spinner 是一个封装好的 Angular spinner 模块,底层利用 load-awsome 这个仓库实现动画效果。

ngx-spinner 项目结构非常有意思。Projects 下的目录结构如图所示。

└─projects
├─ngx-spinner
│ └─src
│ └─lib
├─ngx-tester
│ └─src
│ ├─app
│ │ ├─banner
│ │ └─header
│ ├─assets
│ └─environments
└─ngx-tester-e2e
└─src

这里 ngx-spinner 是 Library,而 ngx-tester 是一个测试应用。

应用启动的时候,必须首先安装依赖,然后编译 Library ,最后启动调试。

npm install 
npm run build

此后,会在工程项目 dist 文件夹下生成编译完成后的 js 文件。最后执行

ng serve

就可以启动 ng-tester 应用。

不耽误多少时间,为了更好的理解 angular 的工作原理。

首先让我们来认识一下 angular.json,tsconfig.json 这两个文件。

2.angular.json 与 tsconfig.json

angular.json 定义了 Angular CLI 开发编译所需的一些参数。

tsconfig.json 是 Typescript 的配置文件。

观察 tsconfig.json 中的 path 属性

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "ngx-spinner": [
        "dist/ngx-spinner"
      ],
      "ngx-spinner/*": [
        "dist/ngx-spinner/*"
      ]
    }
  }
}

其中 ngx-spinner 就是一个快捷方式,当你在 Angular 中下面的语法来导入

import { NgxSpinnerModule } from 'ngx-spinner';

ngx-spinner 时,那么是就是直接从 dist/ngx-spinner 中获取这个模块的。

3. vendorSourceMap

默认情况下,

ng serve 指令会将 library 编译生成的 js 文件直接打包到 vendor.js 中,

并不包含相应的 Typescript 信息。调试时无法跟踪对应的 Typescript 源码。

但是在 Angular 6.1 之后,有了 vendorSourceMap 这个选项。

这个选项可以在 ng serve 启动的时候,打包 source map (源码信息)。

ng serve --vendorSourceMap

一个典型的 source map 文件—— ngx-spinner.umd.js.map ,

可以在项目路径 dist/ngx-spinner/bundles 文件夹下找到。

这样启动开发者服务器之后,

可以在 Chrome 开发者模式的 Source 标签下看到 ngx-spinner 的源码信息。

记住 “webpack:///ng://ngx-spinner/lib/*” 这个路径,lauch.json 需要用到。

4.编辑 lauch.json

source map 中的信息还不能为 VSCode Debug 所用。

还需要在 lauch.json 中设定 source map 与源码之间的对应关系。

"sourceMapPathOverrides": {                
    "webpack:///ng://xxx/lib/*":"${workspaceFolder}/projects/xxx/src/lib/*"            
},

同时,由于 ngx-tester 是在 projects 下的。

因此必须指定 Debug 程序的入口,即配置 webRoot 选项。

 "webRoot": "${workspaceFolder}/projects/ngx-tester",

最后形成的 lauch.json 文件如下图所示。

万事俱备

好了!按照第三四节介绍的操作,在 Angular Library 上打个断点试试吧。

享受美好的调试时光吧!

参考链接

Debugging Angular Projects and Libraries

Shorten TypeScript Imports in an Angular ProjectL

An Introduction to Source Maps

发表评论

电子邮件地址不会被公开。 必填项已用*标注