Angular2 with Haml

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


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