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

Question

免责声明：是的，我看到还有更多 "The template specified for component AppComponent is not a string" 相关问题，但其中 none 描述了我遇到的具体问题。

在 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")

不知何故 raw-loader 作为加载器添加到我的 .html 文件中。

现在可能重要的是要提到我正在将我的 webpack 4 AngularJs 项目迁移到 Angular8。但是当我调试我的 webpack 构建时，我看不到它的规则 test 包含 .html 和一个 loader. 包含 raw-loader.

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

确保您使用的是

  templateUrl: './app.component.html', // or whatever filename

而不是template: './app.component.html',

Answer 2

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

首先，我从 angular 源代码中了解到，自 Angular 8 以来，他们在 here 中默认将 raw-loader 添加到 templateUrl。之后在here.

中使用

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 在这里成为字符串。

Answer 3

曾经是

templateUrl: require('./app.component.html').default

..raw-loader > 1 ，因为默认导出。

Answer 4

组件AppComponent模板错误

先关闭浏览器再重新打开在完成 npm 安装后，在终端中输入（ npm i ）。然后输入 ( ng serve).

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

The template specified for component AppComponent is not a string

webpack

angular

angular-webpack

angular8