@ngtools/webpack - AOT build with file-loader outputPath turns img tag into string

Bug Report

Versions.

Angular: 4.4.4
ngtools/webpack: 1.7.2,
file-loader: 1.1.5,
image-webpack-loader: 3.4.2,
webpack: 3.6.0,
webpack-dev-server: 2.9.1

Repro steps.

1. Create a repo with image-loader and ngtools/webpack.
2. Add a image-loader loader with "outputPath" as an option
3. Create a reference to a image in the html.
4. Create AOT build and run the output html.

The log given by the failure.

No error, just compiles like it should. Errors happens when running the app.
The app works when running a webpack-dev-server or webpack build. Only the prod build (this one has ngtools/webpack) has the problem. So the problem must be in the ngtools/webpack.

Desired functionality.

AOT build should compile just like a normal build should do, with the img tags not formatted to a string

Mention any other details that might be useful.

A repo that has the error: My webpack starter
Stackoverflow post: Stackoverflow post for the error

Workarround

There is actually a workaround, but a fix would be better. See my stackoverflow post for the workaround

[filipesilva]

What kind of errors do you get at runtime? In the CLI itself we don't use image-loader and AOT builds don't seem to have a problem with image tags.

It actually gives no error on runtime.
If I set the NODE_ENV to 'development' in the production build (thus enabling logging) I get no new logging (except for angular telling me that dev mode is on, which is logical)
If I also remove the -p of the webpack task and remove the UglifyJsPlugin I get the same result (the <img> tag gets converted to a string).

Removing outputPath option of the file-loader in the webpack.common.js does the trick. Now the AOT build works like expected and images can be loaded. The only downside here is that all the assets are placed in the dist folder and not in a sub folder (I defined assets/images/ for the images).

So that is not the solution. The webpack.dev (the one without AOT) can build the project successfully with the output path. The only difference between the dev and the prod builds is that prod uses AOT. So it must be the AOT compiler somehow.

[filipesilva]

I think I know what's going on... this is on component html, right? For component html/css you need to provide extracted html/css. In the CLI we use raw loader for html.

The problem is indeed with the component html. But if I use the raw-loader for loading my html I get a new problem, my assets are never loaded (they are not in the dist folder nor in any of the bundles) and the img tag gets converted to the string "world". So thats also not the solution.

[rsaf]

I' m having the same issue with webpack, when used with AoT.

[mgechev]

Are you still able to reproduce this issue with the latest version?

[alan-agius4]

Closing as no further feedback was provided by the author.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}