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
– harkesh kumar, Commented Dec 26, 2019 at 10:41
There is a process to use a custom builder 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
– Claies, Commented Dec 29, 2019 at 7:05
also bear in mind, this appears to be changing in 8.x so it might be a dead end as well.... — Claies
– Claies, Commented Dec 29, 2019 at 7:07

MHS · Accepted Answer · 2019-12-30 09:50:35Z

2

+100

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, 2019 at 9:50

MHS

9491 gold badge14 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

Collectives™ on Stack Overflow

Angular (7) component accepts only html files

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related