带有 Haml 的 Angular2

Question

是否可以在 Angular 2 中使用 HAML 作为模板引擎？

在 Angular 2(版本 2.3.1)中，您可以使用 scss/sass 而不是 css。这是 angular-cli 使用 --style 给定的选项。对于模板，cli 仅允许通过设置 --inline-template 在内联模板之间进行更改。

除非它被支持，否则我如何配置我的 Angular 2 应用程序(由 angular-cli 版本 1.0.0-beta.26 创建)来编写 HAML，将其编译为HTML，并将component中的HTML用作templateUrl?

编辑Angular/cli 使用 webpack。我不知道如何配置 webpack 以在捆绑所有内容之前将 haml 呈现为 html。我如何在 Angular 中使用 haml-loader？

Answer 1

是的，这绝对是可能的。如果您使用的是 angular-cli，您首先需要访问 webpack.config.js 文件。您可以通过键入来执行此操作

$ ng eject

这将公开您需要编辑的配置文件。请注意，在此之后您将需要使用“npm start”而不是“ng serve”来启动您的服务器。

对于 haml，您可以使用 haml-haml-loader

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

然后在 webpack.config.js 文件中的模块规则下添加以下规则:

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

最后按以下方式修改您的组件以使用您的“haml”文件:

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

或者你可以使用

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

这应该让你开始使用 haml