Utilisation de Jade en tant que moteur de gabarit angulaire2

Question

J'essaye actuellement de migrer vers le développement d'applications MEAN avec Angular2 à la place de Angular1.x mais j'ai actuellement un problème basé sur l'utilisation de jade/pug comme moteur de gabarit dans angular2. J'ai vu un post sur la façon de l'implémenter avec webpack, mais ce tutoriel est destiné à une autre structure de projet et non à l'angulaire/cli officiel. Donc, je demande si jade/pug peut être utilisé comme moteur de template avec la structure de projet angular/cli?

Answer 1

L'intégration Pug avec angulaire/cli est assez facile.

Tout ce que vous devez faire est:

• Installation pug-cli utilisant npm install pug-cli --save-dev
• Ajouter une nouvelle ligne script dans les scripts de votre package.json de: "puggy": "pug src -P -w".
• Modifiez votre tâche start ou créez-en une nouvelle pour exécuter d'abord puggy puis serve: "dev": "npm run puggy & ng serve".

Votre package.json devrait ressembler à ceci:

"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" 
    } 

Maintenant, il suffit de lancer npm run dev, ou quel que soit le nom que vous avez donné à la tâche, dans votre terminal et vous devriez voir tous vos .pug fichiers se compilé/regardé/rendu, puis tout servi.

Je vous suggère d'ajouter tous vos fichiers dans votre .html.gitignore ajoutant /src/**/*.html en elle et seulement pousser .pug fichiers à votre repo. Assurez-vous de supprimer les fichiers .html mis en cache à l'aide de .

vous allez maintenant être en mesure d'écrire une forme comme

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

Et compiler dans c'est html

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