angular · KiaraGrouwstra · Oct 21, 2016 · Nov 4, 2016 · Sep 18, 2016 · Dec 16, 2016
diff --git a/README.md b/README.md
@@ -1,3 +1,6 @@
+npm uninstall -g ng-cli
+npm i -g https://github.com/tycho01/angular-cli.git#pug-html
+
 ## Angular-CLI
 
 [![Join the chat at https://gitter.im/angular/angular-cli](https://badges.gitter.im/angular/angular-cli.svg)](https://gitter.im/angular/angular-cli?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -315,6 +318,15 @@ You use the `assets` array in `angular-cli.json` to list files or folders you wa
 ]
 ```
 
+### Template engines
+
+Template engines currently supported are HTML and [Pug](https://pugjs.org/) (née Jade).
+Template engines other than HTML require processing through webpack, so should be
+included from their own file using `templateUrl`, whereas HTML supports using
+`@Component`'s `template` property as well. Example:
+- before: `@Component({ template: '<p>Hello world</p>' })` or `@Component({ templateUrl: './foo.html' })`
+- after: `@Component({ templateUrl: './foo.pug' })`
+
 ### Global styles
 
 The `styles.css` file allows users to add global styles and supports

diff --git a/docs/documentation/overview.md b/docs/documentation/overview.md
@@ -59,6 +59,15 @@ ng e2e
 Before running the tests make sure you are serving the app via `ng serve`.
 End-to-end tests are run via [Protractor](https://angular.github.io/protractor/).
 
+### Template engines
+
+Template engines currently supported are HTML and [Pug](https://pugjs.org/) (née Jade).
+Template engines other than HTML require processing through webpack, so should be
+included from their own file using `templateUrl`, whereas HTML supports using
+`@Component`'s `template` property as well. Example:
+- before: `@Component({ template: '<p>Hello world</p>' })` or `@Component({ templateUrl: './foo.html' })`
+- after: `@Component({ templateUrl: './foo.pug' })`
+
 ### Global styles
 
 The `styles.css` file allows users to add global styles and supports

diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "@angular/compiler-cli": "^2.3.1",
     "@angular/core": "^2.3.1",
     "@angular/tsc-wrapped": "^0.5.0",
+    "apply-loader": "^0.1.0",
     "async": "^2.1.4",
     "autoprefixer": "^6.5.3",
     "chalk": "^1.1.3",
@@ -88,6 +89,9 @@
     "portfinder": "1.0.9",
     "postcss-discard-comments": "^2.0.4",
     "postcss-loader": "^0.9.1",
+    "protractor": "^3.3.0",
+    "pug": "^2.0.0-beta6",
+    "pug-loader": "^2.3.0",
     "quick-temp": "0.1.5",
     "raw-loader": "^0.5.1",
     "reflect-metadata": "^0.1.8",

diff --git a/packages/angular-cli/models/webpack-build-common.ts b/packages/angular-cli/models/webpack-build-common.ts
@@ -164,7 +164,10 @@ export function getWebpackCommonConfig(
           loader: `url-loader?name=[name]${hashFormat.file}.[ext]&limit=10000`
         },
         { test: /\.html$/, loader: 'raw-loader' },
-
+        {
+          test: /\.(pug|jade)$/,
+          loaders: ['apply-loader', 'pug-loader'],
+        },
         {
           test: /\.(otf|ttf|woff|woff2)$/,
           loader: `url-loader?name=[name]${hashFormat.file}.[ext]&limit=10000`

diff --git a/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.html b/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.html
diff --git a/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.pug b/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.pug
@@ -0,0 +1,4 @@
+div
+  h1 hello world
+  a('[routerLink]'="['lazy']") lazy
+  router-outlet
diff --git a/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.ts b/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.ts
@@ -3,7 +3,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.component.pug',
   styleUrls: ['./app.component.scss'],
   encapsulation: ViewEncapsulation.None
 })

diff --git a/tests/e2e/tests/build/templates/html.ts b/tests/e2e/tests/build/templates/html.ts
@@ -0,0 +1,16 @@
+import {
+  writeMultipleFiles,
+  expectFileToMatch,
+} from '../../../utils/fs';
+import { ng } from '../../../utils/process';
+import { stripIndents } from 'common-tags';
+
+export default function () {
+  return writeMultipleFiles({
+    'src/app/app.component.html': stripIndents`
+      <h1>foo</h1>
+    `})
+    .then(() => ng('build'))
+    .then(() => expectFileToMatch('dist/app/app.component.html',
+      /<h1>foo<\/h1>/))
+}
diff --git a/tests/e2e/tests/build/templates/pug.ts b/tests/e2e/tests/build/templates/pug.ts
@@ -0,0 +1,21 @@
+import {
+  writeMultipleFiles,
+  deleteFile,
+  expectFileToMatch,
+  replaceInFile
+} from '../../../utils/fs';
+import { ng } from '../../../utils/process';
+import { stripIndents } from 'common-tags';
+
+export default function () {
+  return writeMultipleFiles({
+    'src/app/app.component.pug': stripIndents`
+      h1 foo
+    `})
+    .then(() => deleteFile('src/app/app.component.html'))
+    .then(() => replaceInFile('src/app/app.component.ts',
+      './app.component.html', './app.component.pug'))
+    .then(() => ng('build'))
+    .then(() => expectFileToMatch('dist/app/app.component.pug', // .html?
+      /<h1>foo<\/h1>/))
+}