@ngtools/webpack doesn't chain loaders correctly

[andrewpmontgomery]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.2.6 (e)
node: 8.2.1
os: win32 x64
@angular/(all of them): 4.3.3
npm: 5.3.0
node: 8.2.1

Repro steps.

1. ng new bugdemo
2. cd bugdemo
3. ng eject
4. Create a very basic Webpack loader called dummy-loader.js:
   module.exports = function dummyLoader(source) {
return source.replace("title = 'app'", "title = 'FOOBAR app'");
}
5. Edit webpack.config.js, change:
   "loader": "@ngtools/webpack"
   to:
   "loader": ["@ngtools/webpack","./dummy-loader"]
6. npm start
7. Browse to http://localhost:4200/

The log given by the failure.

Actual output: Welcome to app!

Desired functionality.

Expected output: Welcome to FOOBAR app!

Mention any other details that might be useful.

The default project created by ng new generates app.component.html containing this:
Welcome to {{title}}!
and corresponding app.component.ts containing this:
title = 'app';
The dummy-loader.js simply rewrites it to this:
title = 'FOOBAR app';

If we edit webpack.config.js, remove:
"loader": ["@ngtools/webpack","./dummy-loader"]
and replace with:
"loader": ["awesome-typescript-loader", "angular2-template-loader", "./dummy-loader"]
then install the extra modules
npm i awesome-typescript-loader angular2-template-loader
then we get the correct output. So this is definitely a bug in @ngtools/webpack

[andrewpmontgomery]

Oops, my bad, this was working fine.

[zolakt]

I'm having this same issues.
Does anyone have any advice on how to resolve it.
The example is nearly identical to the posted one.
I created a simple dummy loader that just replaces text.

I'm trying to replace a templateUrl in a component:
templateUrl: './theme-##THEME##.html'

And the dummy loader:

module.exports = function dummyLoader(source) {
    return source.replace("##THEME##", "default");
}

I get this error (full path instead of ...)

Module not found: Error: Can't resolve './../$$_gendir/ClientApp/app/app.module.browser.ngfactory'
ERROR in Entry module not found: Error: Can't resolve '.../blog/theme-##THEME##.html'

This happens only with production builds and AOT.
This is the loader chain:
['@ngtools/webpack', 'angular-router-loader?aot=true', './dummy-loader']

It works with the develop chain, without AOT and ngtools:
['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular-router-loader', './dummy-loader']

The component in question is inside a lazy loaded module, if it makes any difference. Tried lazy loading with sync options, didn't change anything.

I have tried with a bunch of string/path/regex replace loaders instead of the dummy one. None yielded results.

I have also tried using the DefinePlugin instead of preprocessing and replacing strings. In that case, the global variable is not picked up in Component definitions. It resolves to undefined. But again, it works without AOT.

Any help is appreciated, I'm totally stuck on this.
Currently I have to drop the whole theme system just to build for production.

[bbjoern]

@zolakt i see that a year passed and nothing happened. did you ever figured out a workaround for your problem ?

[zolakt]

@bbjoern Not really. It's still not working. I've changed my architecture completely to avoid this problem. They won't add it anytime soon. You can check out the discussion here #8870

[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.}