在 webpack 4 中加载 AngularJS html 模板呈现 [object Module]答案

【问题标题】：Loading AngularJS html templates in webpack 4 renders [object Module]在 webpack 4 中加载 AngularJS html 模板呈现 [object Module]
【发布时间】：2019-12-20 06:34:13
【问题描述】：

我正在尝试使用 require 语法将 HTML 文件加载为模板。但是，正在呈现字符串 [object Module]。这是module.exports.toString()的结果，调用require()的结果。

HTML 文件的内容存在于module.exports.default 中。如何修复配置以从 html 文件呈现模板？理想情况下，无需更改组件。

我正在进行的项目是一个包含 ng-metadata (https://github.com/ngParty/ng-metadata) 的 AngularJS 项目。我正在升级 webpack (1 > 4) 和 typescript (2.1 > 3.5)。目标是让应用程序可以混合运行 Angular 和 AngularJS，这是迈向 Angular 的第一步。

升级 webpack 和 typescript 并修复更明显的配置错误后，渲染不再适用于 HTML 文件中的模板。

我一直在寻找类似的问题，深入研究这两个配置并尝试各种选项，但到目前为止没有任何运气。

我当前的 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
}

webpack.config 中的加载器（为简洁起见，排除了样式等）

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

一个示例组件.ts

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

<p>login component</p>

我希望 <p>login component</p> 被渲染。实际呈现的是文本[object Module]。

【问题讨论】：

标签： angularjs typescript webpack

【解决方案1】：

raw-loader 现在返回默认模块。

我假设，如果您将 require('./login.component.html') 更改为 require('./login.component.html').default，您的组件现在将呈现。

【讨论】：

非常感谢！