Angular项目执行npm install时手动放入node_modules的JS/CSS被删除如何解决

问题根因 #

node_modules 是npm包的动态管理目录，所有未在package.json依赖树中登记的文件/文件夹，每次执行npm install时都会被当作冗余内容清理，因此手动往该目录下存放自定义文件的操作本身不符合npm的管理规则，必然会被清除。 #

可行解决方案 #

以下两种方案均符合你要求的仅引入外部JS/CSS的使用逻辑：

方案1：将静态资源存入assets目录（最稳妥，无额外依赖） #

该方案完全符合Angular项目静态资源管理规范，assets目录下的内容不会被npm操作或编译流程修改：

• 在src/assets目录下新建datetimepicker文件夹，将你的jquery.datetimepicker.min.css和jquery.datetimepicker.full.min.js文件放入该文件夹
• 修改angular.json中的资源引用路径，替换原有node_modules下的路径：

"styles": [
  "src/styles.scss",
  "node_modules/datatables.net-dt/css/jquery.dataTables.css",
  "node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css",
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "node_modules/bootstrap/dist/css/bootstrap-reboot.css",
  "node_modules/bootstrap/dist/css/bootstrap-grid.css",
  // 替换为assets下的路径
  "src/assets/datetimepicker/jquery.datetimepicker.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/jquery/dist/popper-1.11.0.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.js",
  "node_modules/dropify/dist/js/dropify.js",
  "node_modules/datatables.net/js/jquery.dataTables.js",
  "node_modules/datatables.net-responsive/js/dataTables.responsive.js",
  // 替换为assets下的路径
  "src/assets/datetimepicker/jquery.datetimepicker.full.min.js"
]

修改后重启ng serve即可生效，后续执行任何npm操作都不会影响该资源。

方案2：通过npm安装官方包（无需手动维护文件） #

如果不想自己维护静态文件，可以直接安装jquery-datetimepicker的官方npm包，依赖会被登记到package.json，不会被npm清理：

• 执行安装命令：
  npm install jquery-datetimepicker --save
• 修改angular.json中的引用路径为官方包的对应路径即可：

"styles": [
  // 其他原有样式不变
  "node_modules/jquery-datetimepicker/dist/jquery.datetimepicker.min.css"
],
"scripts": [
  // 其他原有脚本不变
  "node_modules/jquery-datetimepicker/dist/jquery.datetimepicker.full.min.js"
]

验证 #

修改完成后重启项目测试日期选择器功能正常，再执行npm install验证资源不会被清理即可。

内容的提问来源于stack exchange，提问作者Alan Yu