When Template Engine Can be used via Angular 2?

Question

I decide to use template engine (Like JADE/PUG) for using via Angluar 2.0 for clarity and cleaning the code for developing a big single page application (SPA) and just I want to reach a very good performance application.

My Combination is : HTML5+CSS (SASS)+ ANGULAR 2 + Bootstrap

My question is that, is it reasonable to use template engine for clarity and cleaning the code for developing a big single page application (SPA) along with Angular 2.0? I read about JADE but now in a doubt.

Answer 1

JADE is not suitable for a SPA.

JADE is a server side view technology, which renders HTML with the required data, that is suitable for a traditional non-SPA application.

In SPA, you just get only data (not HTML every time) from the server.

Answer 2

... What i suggest to you (based on my current stack) is to use HTML but in External files ...and link it to your component via require ... so webpack can do the magic rest for you.

for example:

 import { Component, AfterViewInit, ElementRef } from '@angular/core';
    import "fullcalendar";


    require('style!fullcalendar/dist/fullcalendar.css');


    @Component({
        selector: 'about',
        template: require('./about.component.html'),
        styles: [String(require('./about.component.scss'))]
    })

    export default class AboutComponent implements AfterViewInit {
        calendarElement: any;
        public message: string;

        constructor(private elementRef: ElementRef) { }

        ngAfterViewInit() {
            this.calendarElement = jQuery(this.elementRef.nativeElement);
            this.calendarElement.fullCalendar({});
        }

    }

As you can see I'm also using same thing for include external sass files in my component