search

rafaelmussi / angular-templatecache-webpack-plugin

Webpack plugin that concatenates and registers AngularJS templates in the $templateCache.
MIT License
4 stars 16 forks source link

Plugin is not working with webpack 5 (angular-cli) custom webpack plugins #5

Open larsholleboom-luminis opened 2 years ago

larsholleboom-luminis commented 2 years ago

I have set up an Angular 12 app with AngularCustomWebpackConfig configuring as follows:

const AngularTemplateCacheWebpackPlugin = require('angular-templatecache-webpack-plugin'); module.exports = { plugins: [ new AngularTemplateCacheWebpackPlugin({ source: './src/app/angular-js/*/.html', standalone: true }) ] };

running will give me the following error: An unhandled exception occurred: scriptAssetSource.sourceAndMap is not a function.

Other plugins I've tried, do work. The only thing I could find is that it has to do with webpack version 5

matthew-b-payne commented 2 years ago

Yes this has to do with webpack 5.

Please fix the 'apply' function in index.js This replacement code will make it work ` apply(compiler) {

    const { webpack } = compiler;

    compiler.hooks.thisCompilation.tap('AngularTemplateCacheWebpackPlugin', (compilation) => {
        compilation.hooks.additionalAssets.tapAsync('AngularTemplateCacheWebpackPlugin', (callback) => {
            let cachedTemplates = '';

            this.templatelist.forEach((template) => {
                cachedTemplates += template + '\n';
            });

            // Insert this list into the webpack build as a new file asset:
            // compilation.assets[this.options.outputFilename] = {
            //     source: function () {
            //         return cachedTemplates;
            //     },
            //     size: function () {
            //         return cachedTemplates.length;
            //     },
            // };

            compilation.assets[this.options.outputFilename] = new webpack.sources.RawSource(cachedTemplates.toString())

            callback();
        });

    });
}`