为组件AppComponent指定的模板不是字符串 [英] The template specified for component AppComponent is not a string

问题描述

免责声明:是的，我看到还有更多与为组件AppComponent指定的模板不是字符串"相关的问题，但是没有一个问题描述了我遇到的特定问题.

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

I get this runtime error when I compile without AoT in ng build:

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

此错误实际上是有道理的，因为在生成的捆绑代码(main.ts)中，我看到了:

This error actually make sense because in the generated bundled code (main.ts) I see:

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

在新的Angular应用中，我看到:

while in a new Angular app I see:

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

以某种方式将 raw-loader 作为加载程序添加到我的.html文件中.

Somehow the raw-loader gets added as a loader to my .html files.

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

Now maybe it's important to mention that i'm migrating my webpack 4 AngularJs project to Angular 8. BUT When I debug my webpack build I see no rule that its test contains .html and a loader. that contains raw-loader.

调试加载程序规则图片

因此，我的加载程序规则不会影响到app.component.html中此原始加载程序的添加

app.component.ts:

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:

app.component.html:

 <div></div>

感谢您的帮助.

推荐答案

将 raw-loader 从2.0.0降级到 1.0.0 可以解决此问题.

Downgrading raw-loader from 2.0.0 to 1.0.0 fixed this issue.

首先，我从角度源代码中了解到，默认情况下，他们在这里，自Angular 8起. 然后在此处 a>.

First I learned from angular source code that they added raw-loader to templateUrl by default in here since Angular 8. Then it's later used in here.

原始加载程序2.0.0生成:

raw-loader 2.0.0 generated:

/***/ "../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");

/***/ }),

原始加载程序1.0.0生成:

And raw-loader 1.0.0 generates:

    /***/ "../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在这里为字符串.

which is good. Angular needs module.exports to be string here.

这篇关于为组件AppComponent指定的模板不是字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！