后端也可以亲自使用IDEA调试angular代码

有时间为了一个问题，需要来来回回跟前端同事联合调试了好多次，既浪费时间，又耽误了前端的进度，OK，为了节省大家的时间，我们自己开动吧！

安装nodejs

官网（https://nodejs.org/zh-cn/）下载安装包，安装完成后，配置环境变量：

path=D:\Program Files\nodejs\

在CMD测试安装是否完成：

npm r-version
6.5.0-next.0

下载angular源码

得到源码之后，IDEA直接file - open既可打开angular项目，找到项目根目录下的package.json，这相当于java项目的pom.xml，里面配置好了编译、运行这个项目的命令：
在这里插入图片描述
笔者试着运行build，系统提示识别不了“ng”命令。
打开terminal，运行npm install -g @angular/cli，进行依赖的安装，出现了很多ERR：

$ npm install
npm WARN tarball tarball data for [email protected] (sha1-apg5eq+oG2XL8LwV2a/b+yRN+R4=) seems to be corrupted. Trying one more time.
npm ERR! path E:\gitlocal\qdam-web\baseline-qdam\node_modules\.staging\echarts-3609cf96\dist\echarts.js
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink 'E:\gitlocal\qdam-web\baseline-qdam\node_modules\.staging\echarts-3609cf96\dist\echarts.js'
npm ERR!  { [Error: EPERM: operation not permitted, unlink 'E:\gitlocal\qdam-web\baseline-qdam\node_modules\.staging\echarts-3609cf96\dist\echarts.js']
npm ERR!   cause:
npm ERR!    { Error: EPERM: operation not permitted, unlink 'E:\gitlocal\qdam-web\baseline-qdam\node_modules\.staging\echarts-3609cf96\dist\echarts.js'
npm ERR!      errno: -4048,
npm ERR!      code: 'EPERM',
npm ERR!      syscall: 'unlink',
npm ERR!      path:
npm ERR!       'E:\\gitlocal\\qdam-web\\baseline-qdam\\node_modules\\.staging\\echarts-3609cf96\\dist\\echarts.js' },
npm ERR!   stack:
npm ERR!    "Error: EPERM: operation not permitted, unlink 'E:\\gitlocal\\qdam-web\\baseline-qdam\\node_modules\\.staging\\echarts-3609cf96\\dist\\echarts.js'",
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'unlink',
npm ERR!   path:
npm ERR!    'E:\\gitlocal\\qdam-web\\baseline-qdam\\node_modules\\.staging\\echarts-3609cf96\\dist\\echarts.js',
npm ERR!   parent: 'baseline-qdam' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

提示某些目录权限不够，笔者打开资源管理器，查看源码的权限：
在这里插入图片描述
显示只读，然后当前用户也没有写权限，可是其它的工程也都是这个权限啊，抱着试一试的心态，在这界面折腾了几分钟，最终还是失败，异常信息和上面一样。

为了节省时间，笔直用管理员身份打开CMD，在cmd运行nmp install -g @angular/cli

> [email protected] install E:\gitlocal\qdam-web\baseline-qdam\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.12.0/win32-x64-67_binding.node
Download complete  ] - :
Binary saved to E:\gitlocal\qdam-web\baseline-qdam\node_modules\node-sass\vendor\win32-x64-67\binding.node
Caching binary to C:\Users\chenlong3\AppData\Roaming\npm-cache\node-sass\4.12.0\win32-x64-67_binding.node

> [email protected] install E:\gitlocal\qdam-web\baseline-qdam\node_modules\husky
> node husky install

husky > setting up git hooks
husky > done

> [email protected] postinstall E:\gitlocal\qdam-web\baseline-qdam\node_modules\node-sass
> node scripts/build.js

Binary found at E:\gitlocal\qdam-web\baseline-qdam\node_modules\node-sass\vendor\win32-x64-67\binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1277 packages from 2147 contributors and audited 42640 packages in 1475.123s
found 19 vulnerabilities (11 low, 8 high)
  run `npm audit fix` to fix them, or `npm audit` for details

这个命令系统运行了大概15分钟的样子。（等于绕开了上面的terminal权限问题，网友如果知道解决办法，请在评论中赐教）

运行项目

如图进入Run Configurations配置：
在这里插入图片描述
如果前面都配置正确，console应该会输出：

To debug the "start" script, make sure the %NODE_DEBUG_OPTION% string is specified as the first argument for the node command you'd like to debug.
For example:
  "scripts": {
    "start": "node %NODE_DEBUG_OPTION% server.js"
  }

> [email protected] start E:\gitlocal\qdam-web\baseline-qdam
> ng serve --disable-host-check

WARNING: Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information.
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/qdam **
i ｢wds｣: Project is running at http://localhost:4200/
i ｢wds｣: webpack output is served from /qdam
i ｢wds｣: Content not from webpack is served from E:\gitlocal\qdam-web\baseline-qdam
i ｢wds｣: 404s will fallback to /qdam/index.html
i ｢wdm｣: wait until bundle finished: /qdam/index.html

OK，按照提示访问http://localhost:4200/，成功了。现在可以在chrome中打断点测试调试了。

小饭大人

发布了36 篇原创文章 · 获赞 23 · 访问量 3万+

私信关注