能否不通过npm安装、直接通过CDN使用Angular？

完全可以通过CDN引入Angular的UMD格式资源开展开发，不需要提前通过npm安装任何依赖，但是该方案有明显的适用边界和限制。

CDN引入的基础实现方式 #

Angular所有官方包都提供了UMD格式的构建产物，同时Angular依赖的RxJS、Zone.js也都有对应的CDN资源，你只需要在HTML文件的头部按顺序引入所有需要的依赖资源，即可直接在后续的脚本中编写Angular的业务代码，基础示例代码如下：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Angular CDN 示例</title>
  <!-- 引入Angular核心依赖的CDN资源 -->
  <script src="path/to/angular-core.umd.min.js"></script>
  <script src="path/to/angular-common.umd.min.js"></script>
  <script src="path/to/angular-compiler.umd.min.js"></script>
  <script src="path/to/angular-platform-browser.umd.min.js"></script>
  <script src="path/to/angular-platform-browser-dynamic.umd.min.js"></script>
  <!-- RxJS和Zone.js依赖也可以通过CDN引入 -->
  <script src="path/to/rxjs.umd.min.js"></script>
  <script src="path/to/zone.min.js"></script>
</head>
<body>
  <app-root></app-root>
  <script>
    // 此处编写Angular组件、模块的业务代码
  </script>
</body>
</html>

方案的适用场景与限制 #

• 仅适合开发小型Demo、快速验证功能原型使用，大型项目、生产环境项目不推荐使用该方案
• 无法使用Angular CLI提供的全部工程化能力，包括代码热更新、自动打包优化、Tree Shaking、模板代码生成、路由懒加载等常用的提效功能都无法使用
• 依赖版本兼容性需要自行维护，所有引入的Angular核心包、第三方依赖的版本必须互相匹配，否则会直接出现运行报错
• 绝大多数Angular生态的第三方组件库没有提供适配CDN引入的UMD格式产物，无法直接通过CDN引入使用

npm安装卡住的优化方案 #

如果后续需要使用Angular的完整工程化能力，也可以尝试通过以下方法解决npm安装卡住的问题：

• 切换npm的下载源为国内镜像源，执行npm config set registry 国内镜像源地址后重新执行安装命令
• 执行npm cache clean --force清除本地npm缓存后重新安装
• 尝试使用pnpm、yarn等其他包管理器替代npm进行依赖安装

内容的提问来源于stack exchange，提问作者Nishant Singh