angularjs - 在 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

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

login.component.html 可以是任何 html

<p>login component</p>

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

Answer 1

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

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