web-dev-qa-db-ja.com

Angular + templateCacheでWebpackを使用する方法は？

Webpackを学習しています。 Angularを使用してアプリを作成しました。templateCacheを使用して、すべてのHTMLビューを1つのjsファイルで生成し、アプリで必要とするものよりも優れています。これはクールに機能します。しかし、Webpackジョブ：

entry: {
    app: ["bootstrap-webpack!./bootstrap.config.js", './app/app.js'],
    vendor: ['angular', 'bootstrap', 'angular-ui-router', 'oclazyload']
},
output: {
    path: path.join(__dirname, "dist"),
    filename: '/bundle.js'
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin(
        /* chunkName= */ "vendor", /* filename= */ "/vendor.bundle.js"),

それは私のwebpack設定の一部でした。結果として、「bundle.js」&&「vendor.bundle.js」とindex.htmlを含む「dist」ディレクトリが取得されます。その後、サーバーを起動すると、私のアプリはビューを取得できないと言います。どうして？ :(私が理解しているように、すべてのビューはバンドルする必要があり、「dist」ディレクトリで利用できるはずです。

javascriptangularjswebpack
17
Imafost

私はtemplateCacheをまったく使用していません。 Angularディレクティブもテンプレートを文字列として受け入れるため、私は html-loader を使用してテンプレートをrequire()します。

function MyDirective() {
    return {
        restrict: "E",
        replace: true,
        template: require("./MyDirective.html")
    };
}

// in your webpack.config.js
module.exports = {
    module: {
        loaders: [
            { test: /\.html$/, loaders: ["html"] }
        ]
    }
}
23
Johannes Ewald

その遅いですが、これを共有するかもしれません。あなたが本当にhtmlフラグメントを使いたいなら

<div ng-include="'file.tplc.html'"></div>

これが私がそれを機能させた方法です

var appMod = angular.module('app'); 

appMod.run(function($templateCache) {

    function requireAll(requireContext) {
        return requireContext.keys().map(function(val){
            return {
                // tpl will hold the value of your html string because thanks to wepbpack "raw-loader" **important**
                tpl:requireContext(val),

                //name is just the filename
                name : val.split('/').pop()
            }
        });
    }

    // here "../" is my app folder root
    // tplc is the naming convention of the templates
    let modules = requireAll(require.context("../", true, /\.tplc\.html$/));

    modules.map(function (val) {
        $templateCache.put(val.name, val.tpl);
    })

});
9
janbee