Angular-cli: require html stopped working in upgrade to angular 8

[icorne]

Command (mark with an x)

- [ ] new
- [ x] build
- [x ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 7.x

Description

When trying to require an html file in using @angular/cli 8 it fails, it works in angular 7

🔬 Minimal Reproduction

I made repro branches. Be sure to npm install when switching between branches.
ng 7 generated project with node types added
https://github.com/icorne/ng-import-html/tree/ng7-import-html

same project, upgraded with ng update @angular/cli @angular/core
https://github.com/icorne/ng-import-html/tree/ng8-import-html

🔥 Exception or Error

ERROR in ./src/app/template.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> I am a required template file

🌍 Your Environment

   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.3
Node: 12.3.1
OS: linux x64
Angular: 8.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?
This is import for me because i'm using a hybrid project angular/angularJs, and for this to work, you cannot use templateUrl

[icorne]

thanks @alan-agius4 !

[icorne]

I would say "by some angularjs applications" is an understatement, unless there's another clean way to have html files imported?

[alan-agius4]

Hi, can you kindly explain why you cannot use templateUrl with AngularJs? As checked with @clydin and he mentioned that this should work.

Thanks.

[icorne]

I get the following error at runtime:
app.module.ts:38 Error: loading directive templates asynchronously is not supported at Function.push../node_modules/@angular/upgrade/fesm5/static.js.UpgradeHelper.getTemplate (static.js:1080) [angular] at UpgradeHelper.push../node_modules/@angular/upgrade/fesm5/static.js.UpgradeHelper.compileTemplate (static.js:1108) [angular] at LandingDirective.push../node_modules/@angular/upgrade/fesm5/static.js.UpgradeComponent.ngOnInit (static.js:1375) [angular] at checkAndUpdateDirectiveInline (core.js:22099) [angular] at checkAndUpdateNodeInline (core.js:23363) [angular] at checkAndUpdateNode (core.js:23325) [angular] at debugCheckAndUpdateNode (core.js:23959) [angular] at debugCheckDirectivesFn (core.js:23919) [angular] at Object.eval [as updateDirectives] (LandingComponent.html:1) [angular] at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911) [angular] at checkAndUpdateView (core.js:23307) [angular] at callViewAction (core.js:23548) [angular] at execComponentViewsAction (core.js:23490) [angular] at checkAndUpdateView (core.js:23313) [angular]

[icorne]

Furthermore, the require way was working before, but not anymore...

[Camo30]

Hi @alan-agius4, this won't work with templateUrl as there was this bug #11523. I've changed all templateUrl to template: require() and it has worked - until now.

As a temporary workaround I've added this package to the project and replaced all template: require(...) with template: require('html-loader!...'), for now it works again.

[FDIM]

For me using require('!raw-loader!./path-to-template.html') worked. Not sure how long it will work, but hopefully we will be done with upgrade of components by then

[icorne]

For me using require('!raw-loader!./path-to-template.html') worked. Not sure how long it will work, but hopefully we will be done with upgrade of components by then

That works (for now) for me as well.

[JochenDiekenbrock]

To circumvent this bug, if you have a lot of imports/requires, instead of changing them all, you could also use ngx-build-plus and add "extraWebpackConfig": "webpack.partial.js" in angular.json to extend the webpack configuration.

webpack.partial.js:

const webpack = require('webpack');

module.exports = {
    module: {
        rules: [
            { test: /\.html$/, loader: 'raw-loader' }
        ],
    }
};

[alan-agius4]

Hi all, we had a chat around this, and we think that if you want to use webpack specific stuff you can use ngx-build-plus or otherwise you can update the require statements to include the raw-loader import syntax ie: require('!raw-loader!./path-to-template.html') as suggested above.

Note: Webpack specific features might not work in the future.

We apologies for any inconvenience this might cause.

[angular-automatic-lock-bot[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._}