在 webpack 4 中加载 AngularJS html 模板渲染 [object Module]

Question

我正在尝试使用 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

{
  "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
}

login.component.html 可以是任何 html

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

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

Answer 1

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

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