All geek questions in one place

Angular2 with Haml

Can I use HAML as a template engine in Angular 2?

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

If this is not supported, how can I configure my Angular 2 application (created by angular-cli version 1.0.0-beta.26 ) to write HAML , compile it into HTML and use HTML in component as a templateUrl ?

EDIT Angular / cli uses webpack. I don't know how to configure webpack to render haml in html before everything is bundled. How to use haml-loader inside Angular?

+6
source share
2 answers

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

 $ ng eject

This will display the configuration file that you need to modify. Please note that after that you will need to start your server with "npm start" instead of "ng serve".

For haml you can use haml-haml-loader

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

Then, in accordance with the rules of your module in the webpack.config.js file , add the following rule:

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

Finally, modify your component to use the "haml" file as follows:

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

Alternatively you can use

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

This should make you work with haml

+4
source

This should be possible, but only with external template files ( templateUrl ). You must configure your building system (webpack, gulp) to pre-process all the templates before they are used by angular

+2
source

Source: https://habr.com/ru/post/1014380/

More articles:


All Articles