CODEWITHSUNDEEP
angularwebpackangular8angular-webpack
Raz Ronen
Raz Ronen

Reputation: 2638

The template specified for component AppComponent is not a string

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.

Debug picture of loader rules

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.

Upvotes: 6

Views: 39717

Answers (4)

Jaydeep Sutradhar
Jaydeep Sutradhar

Reputation: 11

Error occurs in the template of component AppComponent.

firstly close the browser and then reopen it after that type ( npm i ) into the terminal, after completion of npm installation. then type ( ng serve).

Upvotes: 0

석광호
석광호

Reputation: 1

use to be

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

..raw-loader > 1 , because export as default.

Upvotes: 0

Raz Ronen
Raz Ronen

Reputation: 2638

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.

Upvotes: 6

dota2pro
dota2pro

Reputation: 7864

Make sure you are using 

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

instead of template: './app.component.html',

Upvotes: 2

Related Questions