Doesn't work with raw-loader v2.0.0

[reduckted]

A few days ago, raw-loader v2.0.0 was published. This release changed to use ES Module exports instead of CommonJS exports (webpack-contrib/raw-loader#69). I believe this has caused angular2-template-loader to no longer work.

Everything compiles fine, but when you run the Angular application, you get the error:

Error: Expected 'styles' to be an array of strings.

I think this is because this loader is using require(...), but that's now returning an object with a default property that contains a string, rather than just returning a string. I haven't confirmed that though. I wanted to submit this issue while it was still fresh in my mind. When I get some time later on, I'll create a simple repro and investigate a bit further.

Current Workarounds:

• Downgrade raw-loader to 1.0.0.

[reduckted]

Repro is here: https://github.com/reduckted/repro-angular2-template-loader-86
And also as a zip file: repro-angular2-template-loader-86.zip

npm i
npm run start

That will compile the application, start the web server and open the URL in a browser. Open the developer console and you'll see the error.

The result of require('./src/app.component.css') is also printed to the console. As I expected, it's an object, rather than the expected string:

Module
default: ":host {
↵    color: lightseagreen;
↵}"
Symbol(Symbol.toStringTag): "Module"
__esModule: true
__proto__: Object

[Klaster1]

@reduckted your assumptions are absolutely correct, I've encountered the same issue today and it confused me a lot! It gets complicated even more when you want to use different loaders for styles and templates, in my case ['exports-loader?module.exports.toString()', 'css-loader', 'sass-loader'] and ['raw-loader']. For templates, I need angular2-template-loader to write require(${url}).default because of ES2015 export, and current require(${url}) for styles, since it's still CommonJS.

As a proof of concept, I moved code that formats require string into configuration option:

function replaceStringsWithRequires(string, formatRequire = (url) => 'require(\'' + url + '\')') {
    return string.replace(stringRegex, function(match, quote, url) {
        if (url.charAt(0) !== '.')
            url = './' + url;

        return formatRequire(url);
    });
}

and used the following loader config:

{
    test: /\.(ts)$/,
    exclude: /\.spec\.ts$/,
    use: {
        loader: 'angular2-template-loader',
        options: {
            formatRequire(url) {
                if (url.match(/\.scss$/)) return `require('${url}')`;
                else if (url.match(/\.html$/)) return `require('${url}').default`;
            }
        }
    }
}

This does solve the issue, maybe I should make a PR. @TheLarkInn do you think this is a reasonable approach for cjs/esm issue?

[Klaster1]

As alternative, you can use a custom loader to append .default:

// fix-component-template-import-loader.js'
module.exports = function(source, sourcemap) {
    this.cacheable && this.cacheable();
    const newSource = source.replace(templateRegExp, (match) => `${match}.default`);
    if (this.callback)
        this.callback(null, newSource, sourcemap);
    else
        return newSource;
};

{
	test: /\.(ts)$/,
	exclude: /\.spec\.ts$/,
	use: [
	    require.resolve('./fix-component-template-import-loader.js'),
	    'angular2-template-loader'
	]
}

I think this is less intrusive.

[cornflourblue]

This has been bugging me for a while, up until now I've been keeping raw-loader at version 1.0.0 as a workaround, but just found that you can also fix the problem by using html-loader instead of raw-loader. I updated my Angular 8 project and it seems to be working fine, here's the commit with the change - cornflourblue/angular-8-registration-login-example@55437d9

[thw0rted]

Mind blown, @cornflourblue -- thanks! I can now totally get rid of my raw-loader dependency, since I was only using it to handle my component CSS references.

[kroeder]

Since this package hasn't received any updates in 3 years we also needed a fix for this and had the same discussion in this issue storybookjs/storybook#7877 (comment)

You should also read storybookjs/storybook#7877 (comment) if you need backwards compatibility

[KingDarBoja]

I tried the @cornflourblue solution but still getting the error, maybe there is something I didn't configure correctly? Below is my webpack.common.ts config which has almost all the configuration for the webpack-dev-server to execute.

EDIT N°1
I shared my current package.json and the webpack config file so you can check out in a separate window.
https://gist.github.com/KingDarBoja/6ae02b9677b58fe7341253d9d6f78de0

EDIT N°2
After checking different issues which points out to the same fixes, I went with switching from raw-loader to html-loader to handle my .html files while perfoming these changes for my css files at the webpack config:

And now my app works with Angular 8 (8.2.9).

EDIT N°3
After switching back from html-loader to raw-loader as it is recommended in this Angular-cli issue, my assets were not resolved.

So looks like there is a lot of things happening between loaders that could lead developers (like me) to get unexpected errors while trying to run an app.

[reduckted]

I'm going to close this issue. The Angular CLI makes this particular loader redundant, and the repo hasn't been touched in three years, so it's fair to see this loader is no longer supported.