为组件 AppComponent 指定的模板不是字符串 [英] The template specified for component AppComponent is not a string
问题描述
免责声明:是的,我看到有更多为组件 AppComponent 指定的模板不是字符串"相关问题,但没有一个描述我遇到的具体问题.
当我在 ng build 中不使用 AoT 进行编译时出现此运行时错误:
未捕获的错误:为组件 AppComponent 指定的模板不是字符串
这个错误实际上是有道理的,因为在生成的捆绑代码(main.ts)中我看到:
template: __webpack_require__(/*!raw-loader!./app.component.html */"../node_modules/raw-loader/dist/cjs.js!../Scripts/app/app.component.html"),
在一个新的 Angular 应用程序中,我看到:
模板:__webpack_require__(/*!./app.component.html */"./src/app/app.component.html")
以某种方式将 raw-loader 作为加载器添加到我的 .html 文件中.
现在也许重要的是要提到我正在将我的 webpack 4 AngularJs 项目迁移到 Angular 8.但是当我调试我的 webpack 构建时,我看不到它的 test 包含 .html 的规则 和一个 loader. 包含 raw-loader.
所以我的加载器规则不会影响这个添加到 app.component.html 的原始加载器
app.component.ts:
import { Component } from '@angular/core';@成分({选择器:'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']})导出类 AppComponent {}
app.component.html:
我将不胜感激,谢谢.
将 raw-loader 从 2.0.0 降级到 1.0.0 修复了这个问题.
首先我从 angular 源代码中了解到,他们默认在 从 Angular 8 开始.然后它稍后在这里.
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 ***!\************************************************************************************//*!提供的出口:默认 *//***/(功能(模块,__webpack_exports__,__webpack_require__){严格使用";__webpack_require__.r(__webpack_exports__);/* 和谐默认导出 */__webpack_exports__["default"] = ("<div>\r\n app 组件工作!\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 ***!\***********************************************************************//*!没有找到静态导出 *//***/(功能(模块,出口){module.exports = "\r\n 应用组件有效!\r\n\r\n"/***/}),
哪个好.Angular 需要在这里将 module.exports 设为字符串.
disclaimer: Yes, I saw that there are more "The template specified for component AppComponent is not a string" related questions but none of them describes the specific problem I'm experiencing.
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
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"),
while in a new Angular app I see:
template: __webpack_require__(/*! ./app.component.html */ "./src/app/app.component.html")
Somehow the raw-loader gets added as a loader to my .html files.
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.
So my loaders rules doesn't affect this raw-loader addition to 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>
I'll appreciate any help, thanks.
Downgrading raw-loader from 2.0.0 to 1.0.0 fixed this issue.
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.
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");
/***/ }),
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"
/***/ }),
which is good. Angular needs module.exports to be string here.
这篇关于为组件 AppComponent 指定的模板不是字符串的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!