Some other configuration

[GeometryRamiroGarcia]

Hi @danguilherme :) .

Execute the command ng add ng-cli-pug-loader , and change the extension to the app.component.plug file, but when you runng serve, the file is not compiled.

app.component.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

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

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

ng-add-pug-loader.js

/**
 * Adds the pug-loader inside Angular CLI's webpack config, if not there yet.
 * @see https://github.com/danguilherme/ng-cli-pug-loader
 */
const fs = require('fs');
const commonCliConfig = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js';
const pugRule = '{ test: /.pug$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] },';

fs.readFile(commonCliConfig, (err, data) => {
  if (err) { throw err; }

  const configText = data.toString();
  // make sure we don't add the rule if it already exists
  if (configText.indexOf(pugRule) > -1) { return; }

  // Insert the pug webpack rule
  const position = configText.indexOf('rules: [') + 8;
  const output = [configText.slice(0, position), pugRule, configText.slice(position)].join('');
  const file = fs.openSync(commonCliConfig, 'r+');
  fs.writeFile(file, output);
  fs.close(file);
});

Project

[danguilherme]

Hello;

Would you mind to show your package.json?

Maybe you're using an outdated version of this plugin (current one is 0.1.3).

Also, is there any error?

[danguilherme]

Closing due to inactivity.