Angular 11 brand-new project issues

[TheNemus]

I just created a brand-new angular project with

ng new my-app

The app runs without problems. Then I add the schematics:

ng add ng-cli-pug-loader

this is what I got back:

Installing packages for tooling via npm.
Installed packages for tooling via npm.
CLI's Webpack config was not found. Try running `npm install` before running this tool.

I then run npm i as suggested, then the schematics:

Skipping installation: Package already installed
CLI's Webpack config was not found. Try running `npm install` before running this tool.

If I try to run the app with pug inside, I get some errors in console:

Error: Module parse failed: Unexpected token (10:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
| style.
>   :host {
|   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|   font-size: 14px;

While the app works fine in browser. What does those issues mean? How can I avoid them?

[ChickenRunVN]

Please check this error #37, maybe this can help you.

[lxandrexl]

new angular-devkit not include common.js we need change config in ng-add-pug-loader,js

[ChickenRunVN]

new angular-devkit not include common.js we need change config in ng-add-pug-loader,js

@lxandrexl The common.js file only move location, you can check #37 for more detail. Here is the new location:

const commonCliConfig = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js';

const typescriptCliConfig = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/typescript.js';

[TheNemus]

new angular-devkit not include common.js we need change config in ng-add-pug-loader,js

@lxandrexl The common.js file only move location, you can check #37 for more detail. Here is the new location:

const commonCliConfig = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js';

const typescriptCliConfig = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/typescript.js';

after trying to install the schematics I've got no ng-add-pug-loader.js in my project, maybe because the schematics itself failed

[ChickenRunVN]

after trying to install the schematics I've got no ng-add-pug-loader.js in my project, maybe because the schematics itself failed

Hi @TheNemus , could you please commit your repository or guide me try to reproduce it step-by-step so I can take a look at it?

[TheNemus]

after trying to install the schematics I've got no ng-add-pug-loader.js in my project, maybe because the schematics itself failed

Hi @TheNemus , could you please commit your repository or guide me try to reproduce it step-by-step so I can take a look at it?

sure. Upgrade your ng CLI to 11.0.x, then:

ng new my-app ng add ng-cli-pug-loader

that's all

[ChickenRunVN]

sure. Upgrade your ng CLI to 11.0.x, then:

ng new my-app ng add ng-cli-pug-loader

that's all

Well, I have tried and found the problem with the detail as below:

• When you take a look at the source file of this project, you can see

const TARGET_COMMON_CONFIG_PATH = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js';
const TARGET_TYPESCRIPT_CONFIG_PATH = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js';
const NG_ADD_PUG_LOADER_SCRIPT_NAME = 'ng-add-pug-loader.js';

....

if (!commonConfigFile || !typescriptConfigFile)
  return throwError(new Error(`CLI's Webpack config was not found. Try running \`npm install\` before running this tool.`));

which will cause the error because the path for common.js and typescript.js has been changed, and that means you will not able to create a new project using ng add ng-cli-pug-loader command. The Author @danguilherme of this project hadn't been updated for a while so I think we won't have a new version to fix this soon.

• So, here is the way to work around and make your new project work with Angular 11:

1. Init new project with ng new <your app name> command.
2. Navigate to your new project folder.
3. Instead of using ng add ng-cli-pug-loader, you will have to install project dependency and script for pug manually.

• First, install dependency with this command npm install apply-loader@~2.0.0 pug-loader@~2.4.0 pug@~2.0.3 --save-dev
• Create new script file ng-add-pug-loader.js in your project. You can find the initial for the file content here.
• Open the file, find and replace the content for some variables as below:

const commonCliConfig = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js';
const pugRules = '{test:/\\.(pug|jade)$/,exclude:/\\.(include|partial)\\.(pug|jade)$/,use:[{loader:"apply-loader" },{loader:"pug-loader"}]},{test:/\\.(include|partial)\\.(pug|jade)$/,loader:"pug-loader"},';
const typescriptCliConfig = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/typescript.js';

• Open your package.json, add "postinstall": "node ./ng-add-pug-loader.js" in the scripts section.

4. Run npm i command.

I have created a sample for you to check if needed, you can find it here. Hope that will help to solve your problem. Happy coding!

[David-van-der-Sluijs]

What happens next?

[mp3por]

Sooo ... did we lose this project ?

[guilmarc]

I can't believe this project has been abandoned. Any other way of using .pug file with Angular ?

[lekhmanrus]

@guilmarc, Angular Pug Builders - it could be used for Angular >=v12. It uses @angular-devkit/build-angular native builders as a dependency and extends them with webpack pug rules.

To use it with the current Angular version just run:

  ng add ngx-pug-builders

or for Angular 12:

  ng add ngx-pug-builders@12

See details here.

[vitoneto]

@guilmarc, Angular Pug Builders - it could be used for Angular >=v12. It uses @angular-devkit/build-angular native builders as a dependency and extends them with webpack pug rules.

To use it with the current Angular version just run:

  ng add ngx-pug-builders

or for Angular 12:

  ng add ngx-pug-builders@12

See details here.

Man, thank you so much, my application it's working now. I spent days trying to use pug and you helped me!!

[jrgleason]

@lekhmanrus Looks like that project is abandoned now too? I see that it has not been released in a while an no 17 support?

[jrgleason]

NM now I see this so it sounds like it will be some time before 17 support

https://github.com/lekhmanrus/ngx-pug-builders/issues/10

[lekhmanrus]

Hi @jrgleason, new version just released. Btw, see currently supported builders.

[danguilherme]

Hey there @lekhmanrus, as this repo is not maintained I'll link to your project in the README if that's alright.

[lekhmanrus]

Hi @danguilherme, sure, thanks. 🙂

[danguilherme]

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