Loading AngularJS html templates in webpack 4 renders [object Module]

Question

I'm trying to load HTML files as a template using require syntax. However, the string [object Module] is being rendered. This is the result of module.exports.toString(), the result of calling require().

The content of the HTML file is present in module.exports.default. How can I fix the configuration to render templates from html files? Ideally, without changing the components.

The project I'm working on is an AngularJS project with ng-metadata (https://github.com/ngParty/ng-metadata) included. I'm upgrading webpack (1 > 4) and typescript (2.1 > 3.5). The goal is to get to a point where the application can run Angular and AngularJS in hybrid, as a first step towards Angular.

After upgrading webpack and typescript, and fixing the more obvious config errors, the rendering no longer works for templates in HTML files.

I've been searching for similar issues, digging into both configs and trying various options, but without any luck so far.

My current tsconfig:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "lib": ["dom", "es2015"],
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "pretty": true,
    "stripInternal": true,
    "noEmitHelpers": false,
    "outDir": "ts-out"
  },
  "exclude": [
    "node_modules","test"
  ],
  "compileOnSave": false
}

The loaders in webpack.config (styles etc. excluded for brevity)

{
  test: /\.ts$/,
  use: ['awesome-typescript-loader'],
  exclude: [/node_modules/]
},
{
  test: /\.html$/,
  use: 'raw-loader',
  exclude: '/index.html'
}

A sample component.ts

@Component({
  selector: 'app-login',
  template: require('./login.component.html'),
})

login.component.html can be any html

<p>login component</p>

I expect <p>login component</p> to be rendered. What's actually being rendered is the text [object Module].

Answer 1

raw-loader now returns the module under default.

I assume, if you change require('./login.component.html') to require('./login.component.html').default, your component will now render.