Angular (7) component accepts only html files

Question

Component is defined like this:

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {

}

I would like to load in some specific components instead of "app.component.html" a file with extention htm "app.component.htm"

@Component({
  selector: 'app-root',
  templateUrl: './app.component.htm',
  styleUrls: ['./app.component.less']
})

from some reason it doesnt work it says:

ERROR in ./app.component.htm 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
<p>
  app component works!
</p>
｢wdm｣: Failed to compile.

Please help me find a way to load an htm file? I am aware that there is a way to bootstrap with Webpack, I would like to keep the current build of ng-serve\cli angular.json!

Thank you!

becuause according to angular there is no file like htm so not support it only work if you are using angularjs — harkesh kumar, Dec 26 '19 at 10:41
There is a process to use a [custom builder](https://github.com/just-jeb/angular-builders/tree/7.x.x/packages/dev-server#builders) to generate a custom webpack configuration that is merged with the existing configuration, allowing you to specify custom loaders for non-standardized file types. I've never actually done it myself, however, so I don't know the exact syntax for what you are needing.... — Claies, Dec 29 '19 at 07:05
also bear in mind, this appears to be changing in 8.x so it might be a dead end as well.... — Claies, Dec 29 '19 at 07:07
what is your angular and angular cli version? I try in angular 8 and it is working! @Mike — MHS, Dec 29 '19 at 14:39
please paste your `webpack.config.js` file here, This can be helpful @Mike — MHS, Dec 29 '19 at 14:44

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

It may be hard to modify how angular load its template files but you can use @angular-builders/custom-webpack combined with raw-loader import your htm file in component.ts and instead using templateUrl in your component config use template and set it with imported value. The solution is almost described in this SO question with some changes it works for you too :

npm i -D @angular-builders/custom-webpack raw-loader install required packages

Configure angular.json like below :

"build": {
          "builder": "@angular-builders/custom-webpack:browser", // change builder
            "options": {
                "customWebpackConfig": { // add custom config
                     "path": "./extra-webpack.config.js"
                  }, // keep the rest same

Add extra-webpack.config.js file into same directory with angular.json with contents like below :

module.exports = {
  module: {
    rules: [
      {
        test: /\.htm$/, // this just tells use raw-loader to load *.htm files
        use: 'raw-loader'
      }
    ]
  }
};

Add typings.d.ts file into your src folder with content (this will avoid typescript import errors):

declare module '*.htm' {
  const value: string;
  export default value;
}

And in your component import htm file with raw loader

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

import str from 'raw-loader!./app.component.htm';

@Component({
  selector: 'app-root',
  template: str, // notice not url just string
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

I have managed to run this configuration in my local but can't manage to make it work in stackblitz. Non working Stackblitz example

score 2 · Accepted Answer · answered Dec 30 '19 at 09:50

2

Upgrade your angular version to angular 8, this is fixed in angular 8.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.htm',
  styleUrls: ['./app.component.less']
})

answered Dec 30 '19 at 09:50

MHS

881
1
13
30

Angular (7) component accepts only html files

2 Answers2