为组件 AppComponent 指定的模板不是字符串

Question

免责声明：是的，我看到有更多与“为组件 AppComponent 指定的模板不是字符串”相关的问题，但没有一个问题描述了我遇到的具体问题。

当我在ng build中不使用 AoT 进行编译时，出现此运行时错误：

Uncaught Error: The template specified for component AppComponent is not a string

这个错误实际上是有道理的，因为在生成的捆绑代码（main.ts）中我看到：

template: __webpack_require__(/*! raw-loader!./app.component.html */ "../node_modules/raw-loader/dist/cjs.js!../Scripts/app/app.component.html"),

在新的 Angular 应用程序中我看到：

template: __webpack_require__(/*! ./app.component.html */ "./src/app/app.component.html")

不知何故，原始加载程序作为加载程序添加到我的 .html 文件中。

现在也许重要的是要提到我正在将我的 webpack 4 AngularJs 项目迁移到 Angular 8。但是当我调试我的 webpack 构建时，我没有看到它的测试包含.html和加载器的规则。包含raw-loader。

loader规则调试图

所以我的加载器规则不会影响 app.component.html 中的原始加载器添加

应用程序组件.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
}

应用程序组件.html：

 <div></div>

我将不胜感激任何帮助，谢谢。

Answer 1

将raw-loader从 2.0.0降级到1.0.0解决了这个问题。

首先我从 Angular 源代码中了解到，从 Angular 8 开始，他们默认将 raw-loader 添加到 templateUrl 中。然后它后来在此处使用。

raw-loader 2.0.0 生成：

/***/ "../node_modules/raw-loader/dist/cjs.js!../Scripts/app/app.component.html":
/*!********************************************************************************!*\
  !*** ../node_modules/raw-loader/dist/cjs.js!../Scripts/app/app.component.html ***!
  \********************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<div>\r\n    app componenets works!\r\n</div>\r\n");

/***/ }),

raw-loader 1.0.0 生成：

    /***/ "../node_modules/raw-loader/index.js!../Scripts/app/app.component.html":
/*!********************************************************************!*\
  !*** ../node_modules/raw-loader!../Scripts/app/app.component.html ***!
  \********************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = "<div>\r\n    app componenets works!\r\n</div>\r\n"

/***/ }),

这很好。Angular 需要 module.exports 在这里是字符串。