Angular 2 with Jade Template

Question

I have a big web application developed using the following techonologies:

• webserver: Node.js + Express
• template engine: Jade
• css engine: less
• client side framework: AngularJS (v. 1.x)
• database: MongoDB

I'm very interested to switch to Angular 2 and use Angular 2 Universal in order to take advantages of Server Side Rendering.

Since I started the project using John Papa's style guide, (in theory) the upgrade to Angular 2 will be not a big trouble.

The problem that I have not resolved right now is using Jade inside Component template of Angular 2.

Example:

@Component({
  selector: 'todo-app',
  template: `
    <h2>Todo</h2>
    <span>{{remaining}} of {{todos.length}} remaining</span>
    [ <a href="javascript: false" (click)="archive()">archive</a> ]
    <todo-list [todos]="todos"></todo-list>
    <todo-form (newTask)="addTask($event)"></todo-form>`,
  directives: [TodoList, TodoForm]
})

I would like to put Jade instead html inside the template.

Do you have any advice on this? Someone of you have any idea?

Answer 1

With Webpack raw-loader and jade-html-loader loader:

loaders: [
  { test: /\.jade$/, loader: 'raw!jade-html' },
  // ...
]

you can do:

@Component({
  selector: 'todo-app',
  template: require('./todo-app.jade'),
  directives: [TodoList, TodoForm]
})