Angular 9 ng serve with aot does not recompile pug to html after first time

[gabynevada]

On Angular 9 if aot is enabled, ng serve will not recompile pug to html files when making changes.

Workarounds are:

• Stop and restart ng serve each time
• Turn off aot in angular.json

Any ideas on what the problem might be? Thanks

[burner]

Which --aot=false I get

Error: Errors parsing template: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use

Even if all the file contains is

h1 Hello World

ng build --prod works without problems and the resulting files pass all the tests. without --aot=false in ng serve it works until a pug files changes then I get the above mentioned error

Error: Errors parsing template: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use

[gabynevada]

@burner I made it work by modifying the angular.json to turn off aot in ng serve and turn it on for production builds.

Example angular.json

{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          "options": {
            "aot": false
          }
        },
        "configurations": {
          "production": {
            "aot": true
          }
        }
      }
    }
  }
}

[burner]

@gabynevada I got build.options set to true now and it still kind of works, every once a while I get the above mentioned error. Setting the value to false generates an error every time.

[helder-a-reis]

I have a similar issue, in my case it fails when I access fields inside an ngFor loop, example: in the .ts: things = [ {id: 1, name: 'thing one'}, {id: 2, name: 'thing two'}, ]

in the template: div(*ngFor='let thing of things') p {{ thing.name }}

It will work fine until I change something, then it recompiles and some 5 seconds later I get an error:

ERROR in src/app/app.component.pug:3:8 - error TS2551: Property 'thing' does not exist on type 'AppComponent'. Did you mean 'things'?

3   p {{ thing.name }}
         ~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.pug',
                     ~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

Starting with ng serve --aot=false or setting aot to false as suggested here works.

[Rush]

Any better fixes since 2020?

[gabynevada]

Any better fixes since 2020?

@Rush Yes, I've been using the @angular-builders/custom-webpack

You can follow the instructions in their package page for installation and use the below script for the pug configuration, utilizing the pretty option to benefit a bit from the angular template check errors.

custom-webpack.config.ts

import * as webpack from 'webpack';

export default (config: webpack.Configuration): webpack.Configuration => {
  config.module?.rules?.push({
    test: /\.pug$/,
    use: [{ loader: 'apply-loader' }, { loader: 'pug-loader', options: 'pretty' }],
  });

  return config;
};

Also just in case, here are the relevant angular.json sections that generally change for the installation

angular.json

{
    "projects": {
      "your-project": {
        "architect": {
          "build": {
            "builder": "@angular-builders/custom-webpack:browser",
            "options": {
              "customWebpackConfig": {
                "path": "./custom-webpack.config.ts"
              },
            "defaultConfiguration": "production"
          },
          "serve": {
            "builder": "@angular-builders/custom-webpack:dev-server",
            "defaultConfiguration": "development"
          },
          "extract-i18n": {
            "builder": "@angular-builders/custom-webpack:extract-i18n"
          },
          "test": {
            "builder": "@angular-builders/custom-webpack:karma"
          },
          "lint": {
            "builder": "@angular-eslint/builder:lint"
          },
          "e2e": {
            "builder": "@angular-builders/custom-webpack:protractor"
          }
        }
      }
    }
  }
}

[matheo]

@gabynevada it worked with Angular 11 but with Angular 12 and Webpack 5 isn't working for me :(

[gabynevada]

@matheo it worked for me on Angular 12 and Webpack 5 and now on Angular 13.

What error are you experiencing?

One notable change I made is switching from pug-loader to simple-pug-loader, the reason being that pug-loader has not been updated in a while now, although some effort is being made by the webpack team to take over the project.

Here's my new webpack config

import * as webpack from 'webpack';

export default (config: webpack.Configuration): webpack.Configuration => {
  config.module?.rules?.push({
    test: /\.pug$/,
    use: [{ loader: 'apply-loader' }, { loader: 'simple-pug-loader', options: { pretty: true } }],
  });

  return config;
};

[matheo]

@gabynevada I had to disable the directTemplateLoading too: https://github.com/just-jeb/angular-builders/issues/417#issuecomment-962638957

[gabynevada]

@matheo I did not have to change anything else in my projects for it to work. Maybe there's another configuration that's interfering with your build.

[danguilherme]

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