Angular2与Haml

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并使用HTML中的component为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

Answer 2

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