AngularJS 1.X + Webpack环境下NPM模块模板缓存加载失败

你遇到的这个问题在Webpack + AngularJS 1.x的项目里很常见——Angular-Strap默认会尝试通过HTTP请求加载模板文件，但这些模板存放在node_modules目录下，并没有被你的Webpack配置正确处理和打包，所以才会出现模板加载失败的错误。下面给你两种简单直接的解决办法：

方法一：使用预编译模板版本（推荐） #

Angular-Strap官方提供了内置预编译模板的版本，模板已经被打包进JS文件里，不需要额外发起请求加载。你只需要修改index.js里的引入语句：

原来的代码：

import 'angular-strap';

替换成：

import 'angular-strap/dist/angular-strap.tpl.min.js';

这样模板会直接注入到Angular的$templateCache中，组件就能直接找到对应的模板，完全不需要修改Webpack配置，这是最省心的解决方案。

方法二：配置Webpack处理Angular-Strap模板 #

如果你更倾向于手动管理模板文件，可以通过Webpack的loader把Angular-Strap的模板注入到Angular的模板缓存里：

1. 先安装ngtemplate-loader（用于把HTML模板注入Angular的缓存系统）：

npm install ngtemplate-loader --save-dev

2. 修改Webpack配置文件，在module.rules里新增一条针对Angular-Strap模板的处理规则：

{
  test: /\.html$/,
  include: path.resolve(__dirname, 'node_modules/angular-strap/src'),
  use: [
    'ngtemplate-loader?relativeTo=' + path.resolve(__dirname, 'node_modules/angular-strap/src'),
    'html-loader'
  ]
}

3. 在index.js里手动引入你需要的模板文件，比如你用到的标签页相关模板：

import 'angular-strap/src/tab/tab.tpl.html';
import 'angular-strap/src/tab/tabs.tpl.html';

这样Webpack会把这些模板打包到项目中，并注入到Angular的模板缓存里，组件就能正常加载模板了。

为什么原来的配置不行？ #

你当前的Webpack配置里，html-loader只处理项目内部的HTML文件，没有覆盖node_modules里的Angular-Strap模板；同时缺少ngtemplate-loader把模板注入到Angular的$templateCache，导致Angular仍然尝试通过HTTP请求加载模板，而这些模板并没有被部署到可访问的路径下，所以才会出现加载失败的错误。

内容的提问来源于stack exchange，提问作者balachander j