Angular2 with Haml

Question

Is it possible to use HAML as template engine in Angular 2?

In Angular 2 (version 2.3.1) you can use scss/sass instead of css. This is a given option by angular-cli with --style. For templates the cli only allows to change between inline template by setting --inline-template.

Unless it is supported, how do I have to configure my Angular 2 App (created by the angular-cli version 1.0.0-beta.26) to write HAML, compile it to HTML and use the HTML in the component as a templateUrl?

EDIT Angular/cli uses webpack. I do not know how to configure webpack to render haml to html before everything will be bundled. How do I use haml-loader inside of Angular?

Answer 1

Yes, it is definitely possible. If you are using angular-cli you will first need to get access to the webpack.config.js file. You can do this by typing

$ ng eject

This will expose the config file, which you need to edit. Notice that after this you will need to start your server with "npm start" instead of "ng serve".

For haml you can use the haml-haml-loader

npm install haml-haml-loader --save-dev

Then under your module rules in the webpack.config.js file add the following rule:

module: {
  rules: [
    ...
    {
      test: /\.haml$/, 
      loaders: ['haml-haml-loader']
    },
    ...

Finally modify your component to use your "haml" file in the following way:

@Component({
  selector: 'app',
  template: require('./app.component.haml'),
  styleUrls: ['./app.component.sass'],
})

Alternatively you can use

templateUrl: './app.component.haml',

This should get you up and running with haml

Answer 2

It should be possible but only with external template files(templateUrl). You have to set up your building system(webpack, gulp) to preprocess all templates before they will be used by angular