When attempting to load HTML files as templates using require syntax, I am encountering an issue where the string [object Module] is being displayed. This seems to be stemming from module.exports.toString(), which results from calling require().
The actual content of the HTML file can be found in module.exports.default. Is there a way to resolve this configuration problem and successfully render templates from HTML files without having to modify the components themselves?
The project I am currently working on is an AngularJS project that incorporates ng-metadata (available at https://github.com/ngParty/ng-metadata). My objective is to upgrade webpack (from version 1 to 4) and TypeScript (from version 2.1 to 3.5) in order to transition towards running Angular and AngularJS together in hybrid mode before moving solely to Angular.
Following the upgrades to webpack and TypeScript, along with addressing any obvious configuration errors, template rendering for HTML files has ceased to function properly.
I have been extensively researching similar issues, delving into both configurations and experimenting with various options, but thus far have not had any success.
This is 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 specified in webpack.config (styles etc. removed for brevity)
{
test: /\.ts$/,
use: ['awesome-typescript-loader'],
exclude: [/node_modules/]
},
{
test: /\.html$/,
use: 'raw-loader',
exclude: '/index.html'
}
An example component.ts
@Component({
selector: 'app-login',
template: require('./login.component.html'),
})
The login.component.html file could contain any HTML code.
<p>login component</p>
Instead of seeing
<p>login component</p>[object Module].