Benutze Jade als angular2 template engine

Question

Ich versuche derzeit, mit Angular2 anstelle von Angular1.x MEAN Apps zu entwickeln, aber ich habe gerade ein Problem mit jade/pug als Template Engine in angular2. Ich habe einen Beitrag darüber gesehen, wie man das mit dem webpack implementiert, aber dieses Tutorial ist für eine andere Projektstruktur gedacht und nicht für den offiziellen angular/cli. Also frage ich, ob es eine Möglichkeit gibt, wie Jade/Pug als Template-Engine mit der eckigen/cli-Projektstruktur verwendet werden kann?

Answer 1

Integrieren Pug mit eckig/cli ist ziemlich einfach.

Alles, was Sie tun müssen, ist:

• Installieren pug-clinpm install pug-cli --save-dev
• mit Hinzufügen eines neuen script Linie in Ihre package.json ‚s-Skripte: "puggy": "pug src -P -w".
• Bearbeiten Sie Ihre start Aufgabe, oder erstellen Sie eine neue, zuerst puggy und dann serve: .

Ihre package.json sollte wie folgt aussehen:

"scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "puggy": "pug src -P -w", 
    "dev": "npm run puggy & ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    } 

nun einfach npm run dev laufen, oder was auch immer Namen gegeben haben Sie die Aufgabe, in Ihrem Terminal und Sie sollten alle Ihre .pug Dateien immer zusammengestellt sehen/beobachtet/gerendert und dann alles serviert.

Ich schlage vor, Sie alle Ihre .html Dateien in Ihre .gitignore/src/**/*.html hinein Hinzufügen und nur .pug Dateien auf Ihren Repo drängen hinzuzufügen. Stellen Sie sicher, dass Sie zwischengespeicherte .html Dateien mit git rm --cached *.html entfernen.

Jetzt werden Sie in der Lage sein, eine Form zu schreiben, wie

form(novalidate, '#f'='ngForm', '(ngSubmit)'='onSignin(f)') 

und kompilieren Sie es in es html

<form novalidate="novalidate" #f="ngForm" (ngSubmit)="onSignin(f)"></form>