Question

对于其他人这样一个类似的问题感到抱歉，但我似乎无法让他们中的任何一个工作。我知道在使用webpack时，角度应用程序中包含模板的标准方法是通过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所以我的外部依赖会起作用？提前谢谢。

Answer 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
        }
    }
  }
}

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

1 个答案: