Angular's index gives plain text instead of pug output.

[Kompwu]

Very weird, here are my fields in angular.json:

"options": {
            "outputPath": "dist/angularSeed",
            "index": "src/index.pug",
            "main": "src/main.ts",

Did I make a mistake?

[danguilherme]

I don't understand the problem 🤔 index.pug is not being parsed into HTML?

[Kompwu]

@danguilherme Well... you're smart.

[danguilherme]

Please help me to understand the issue or I'll have to close it.

[Kompwu]

@danguilherme Angular's index gives plain text instead of pug output.

[chumaumenze]

@danguilherme I am having this issue as well. When you rewrite the index file as pug, it simply gets rendered as text.

[danguilherme]

@chumaumenze oh, thanks, now I get it. I don't have the environment ready to test this, but will take a look as soon as possible.

While it isn't fixed, I recommend using plain old HTML for the index file, if that's an option.

[ibqn]

I have the same issue :-(

[Kompwu]

@ibqn Any fix??

[ibqn]

@Kompwu nope, I simply have stopped using it...

[kmvi]

For me, this patch fixes the issue in Angular 8.1.1:

--- node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/index-file/write-index-html.js
+++ node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/index-file/write-index-html.js
@@ -13,8 +13,12 @@ const operators_1 = require("rxjs/operators");
 const package_chunk_sort_1 = require("../package-chunk-sort");
 const strip_bom_1 = require("../strip-bom");
 const augment_index_html_1 = require("./augment-index-html");
+const pug = require("pug");
 function writeIndexHtml({ host, outputPath, indexPath, files = [], noModuleFiles = [], moduleFiles = [], baseHref, deployUrl, sri = false, scripts = [], styles = [], postTransform, crossOrigin, }) {
-    return host.read(indexPath).pipe(operators_1.map(content => strip_bom_1.stripBom(core_1.virtualFs.fileBufferToString(content))), operators_1.switchMap(content => augment_index_html_1.augmentIndexHtml({
+    const pugMap = /\.pug$/.test(indexPath)
+        ? operators_1.map(content => pug.render(content))
+        : operators_1.map(x => x);
+    return host.read(indexPath).pipe(operators_1.map(content => strip_bom_1.stripBom(core_1.virtualFs.fileBufferToString(content))), pugMap, operators_1.switchMap(content => augment_index_html_1.augmentIndexHtml({
         input: core_1.getSystemPath(outputPath),
         inputContent: content,
         baseHref,
@@ -31,7 +35,7 @@ function writeIndexHtml({ host, outputPath, indexPath, files = [], noModuleFiles
                 .pipe(operators_1.map(data => core_1.virtualFs.fileBufferToString(data)))
                 .toPromise();
         },
-    })), operators_1.switchMap(content => (postTransform ? postTransform(content) : rxjs_1.of(content))), operators_1.map(content => core_1.virtualFs.stringToFileBuffer(content)), operators_1.switchMap(content => host.write(core_1.join(outputPath, core_1.basename(indexPath)), content)));
+    })), operators_1.switchMap(content => (postTransform ? postTransform(content) : rxjs_1.of(content))), operators_1.map(content => core_1.virtualFs.stringToFileBuffer(content)), operators_1.switchMap(content => host.write(core_1.join(outputPath, core_1.basename(indexPath.replace(/\.pug$/, '.html'))), content)));
 }
 exports.writeIndexHtml = writeIndexHtml;
 function filterAndMapBuildFiles(files, extensionFilter) {
--- node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/index-html-webpack-plugin.js
+++ node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/index-html-webpack-plugin.js
@@ -11,6 +11,7 @@
 const webpack_sources_1 = require("webpack-sources");
 const augment_index_html_1 = require("../utilities/index-file/augment-index-html");
 const strip_bom_1 = require("../utilities/strip-bom");
+const pug = require("pug");
 function readFile(filename, compilation) {
     return new Promise((resolve, reject) => {
         compilation.inputFileSystem.readFile(filename, (err, data) => {
@@ -37,7 +38,8 @@
     apply(compiler) {
         compiler.hooks.emit.tapPromise('index-html-webpack-plugin', async (compilation) => {
             // Get input html file
-            const inputContent = await readFile(this._options.input, compilation);
+            let inputContent = await readFile(this._options.input, compilation);
+            inputContent = /\.pug$/.test(this._options.input) ? pug.render(inputContent) : inputContent;
             compilation.fileDependencies.add(this._options.input);
             // Get all files for selected entrypoints
             const files = [];

[RamiroCampa]

Hello, I Have the same problem, Steps to reproduce the problem: ng new ng add ng-cli-pug-loader in angular.json: "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/Folderproject", "index": "src/index.pug",

and it will just break on ng serve everything that is inside the index.pug doctype 5 html head meta(charset="utf-8") base(href="/") title MyTitle body h1 {{ title }} app-root h2 Hello Just renders raw inside the prerendered angular file. Attached screenshot of google chrome Thanks for the good tools you develops.

[pedrohms]

Some update on this issue ?

[danguilherme]

This project is no longer maintained. Check out ngx-pug-builders to add support to pug files to your Angular project.