angular - 为组件 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 和一个加载器的规则。包含原始加载程序。

Debug picture of loader rules

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

app.component.ts:

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

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

app.component.html:

 <div></div>

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

Answer 1

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

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

原始加载器 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 在这里是字符串。