Angular has a method for adding Pug support via the Angular CLI. However, this method is a bit brittle because of the deep file modifications it makes in node_modules directory.
This is an example of Angular 10 pug support that does not require deep file manipulation.
All necessary changes are in this commit
On an existing project, the steps are:
npm i -D apply-loader pug-loader pug @angular-builders/custom-webpack- Added angular.webpack.js
- Modified angular.json "builder" lines from
@angular-devkit/build-angular:abcd...@angular-builders/custom-webpack:abcd... - Changed templateUrl from html file to a newly built pug file. Boom!
This project was generated with Angular CLI version 10.0.6.
See a way to improve? I'm not surprised! Please submit a merge request and I will consider.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.