无法使用 webpack 在依赖项上加载 angularjs $templateCache 模板

Posted 2023-03-13

【中文标题】无法使用 webpack 在依赖项上加载 angularjs $templateCache 模板

【英文标题】：Failed to load angularjs $templateCache template on dependencies with webpack

【发布时间】：2018-09-24 07:32:46

【问题描述】：

很抱歉向其他人提出类似的问题，但我似乎无法让他们中的任何一个工作。 我知道在使用 webpack 时，在您的 Angular 应用程序中包含模板的标准方法是通过 require。即

template: require('./sometemplte.html')

我在所有应用程序代码中都这样做了，而且效果很好。 但是我有四个使用 templateUrl 的依赖库，让我们专注于 angular-ui-boostrap。

我的 webpack.conf.js

entry: 
  vendor: "./src/vendor.ts",
  app: "./src/ClientApp/app.ts"
,
output: 
  filename: "[name].js",
  path: __dirname + "/wwwroot"
,
module: 
    rules: [
     test: /\.ts$/,
      loader: "ts-loader"
    , 
      test: /\.html$/,
      loader: 'raw-loader'
    

在 vendor.ts 我有

require('angular');
require('angular-ui-bootstrap');

在我的应用程序中，我只是使用指令

<uib-typeahead></uib-typeahead>

我的 node_modules 中的代码不是我可以修改的代码。但目前我收到以下错误

angular.js:14700 Error: [$compile:tpload] Failed to load template: uib/template/typeahead/typeahead-popup.html
http://errors.angularjs.org/1.6.6/$compile/tpload?p0=ui-grid%2Fui-grid&p1=undefined&p2=undefined

我验证了模板在我的应用程序的 $templateCache 中。但无论出于何种原因，它都不能用于 $compile 做它的事情。 那么我怎样才能让 $templateCache 与 webpack 一起工作，这样我的外部依赖项才能工作呢？ 提前致谢。

【参考方案1】：

感谢 John Reilly，我终于弄明白了。

有一个名为splitChunks 的插件，它曾经是CommonsChunksPlugin。一旦我将它包含到我的配置中，一切就可以正常工作了。我只是使用了这里提到的默认配置

https://webpack.js.org/plugins/split-chunks-plugin/

注意：虽然它是一个插件，但它不会进入plugins 数组。它进入优化对象。

entry: ...,
output: ...,
optimization: 
  splitChunks: 
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: 
        vendors: 
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        ,
    default: 
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        
    
  

【讨论】：

你恢复到 templateUrl 了吗？你能展示完整的 webpack 配置以及你是如何构建 templates.js 文件（模板缓存）