Angular 11 brand-new project issues

TheNemus commented 3 years ago

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 commented 3 years ago

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

lxandrexl commented 3 years ago

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

ChickenRunVN commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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](https://github.com/danguilherme/ng-cli-pug-loader/blob/master/src/files/ng-add-pug-loader.js).
- Open the file, find and replace the content for some variables as below:
```json
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.
1. 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 commented 3 years ago

What happens next?

mp3por commented 3 years ago

Sooo ... did we lose this project ?

guilmarc commented 2 years ago

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

lekhmanrus commented 2 years ago

@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 commented 2 years ago

@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 commented 10 months ago

@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 commented 10 months ago

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 commented 10 months ago

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

danguilherme commented 10 months ago

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

lekhmanrus commented 10 months ago

Hi @danguilherme, sure, thanks. 🙂

danguilherme commented 10 months ago

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

danguilherme / ng-cli-pug-loader

Angular 11 brand-new project issues #38