带有 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

应该可以，但只能使用外部模板文件(templateUrl)。你必须设置你的构建系统（webpack，gulp）来预处理所有模板，然后它们将被 angular

使用

Answer 2

是的，绝对有可能。如果您使用 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

Angular2 with Haml