Angular と Pug の設定の事例を参考にしました

参考

Using PUG (or Jade) templates with the Angular-CLI

記載の通りに行ったところ Angular と Pug の連携ができました

Angular のプロジェクト作成

Node.js のインストール後

# Angular インストール
npm install -g @angular/cli
# Angular プロジェクト作成
ng new my-app

NPM

pug-cli

pug-cli についてのインストールの記載はなかったのでpug-cli インストール

npm install pug-cli --save-dev

pug-loader

npm i --D apply-loader pug-loader

スクリプト？

pug-rule-insert.js

プロジェクトのルートにpug-rule-insert.jsを用意して

とりあえず実行

node pug-rule-insert.js

Pug のファイルを用意

Angular の HTML のファイルを Pug 形式に

(app.component.pug)ng_new_したhtmlをpugに

<!--The content below is only a placeholder and can be replaced.-->
div(
  style="text-align:center"
)
  h1 Welcome to {{ title }}!
  img(
    width="300"
    alt="Angular Logo"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
  )
h2 Here are some links to help you start:
ul
  li
    h2
      a(
        target="_blank"
        rel="noopener"
        href="https://angular.io/tutorial"
      ) Tour of Heroes
  li
    h2
      a(
        target="_blank"
        rel="noopener"
        href="https://github.com/angular/angular-cli/wiki"
      ) CLI Documentation
  li
    h2
      a(
        target="_blank"
        rel="noopener"
        href="https://blog.angular.io/"
      ) Angular blog

app.component.ts(参照をhtmlから用意したpugへ)

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  //templateUrl: './app.component.html',
  templateUrl: './app.component.pug',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

Angular の挙動確認

ng serve -o

いちおうかくにんしたものです
https://github.com/ysKuga/angular-nue