danguilherme / ng-cli-pug-loader

:sparkles: Angular schematics to add .pug to your project

npx danguilherme

ng-cli-pug-loader's Issues

Build errors when using AOT compiler

I'm getting the following error when I try to build the package (the aot compiler actually swallows this error and starts at the router-outlet).

ERROR in ./src/app/shared/Philosopher/choices/choices.component.pug
Module parse failed: Unexpected token (3:4)
You may need an appropriate loader to handle this file type.
| ol(type="A")
|   li(
|     *ngFor="let choice of choices",
|     [ngClass]="{correct: displayCorrect && choice.correct}"
|     ) 

Angular CLI and builder webpack config paths changed

Angular CLI: 11.2.0
Node: 12.18.0
OS: darwin x64

Angular: 11.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.0
@angular-devkit/build-angular   0.1102.0
@angular-devkit/core            11.2.0
@angular-devkit/schematics      11.2.0
@schematics/angular             11.2.0
@schematics/update              0.1102.0
rxjs                            6.6.3
typescript                      4.1.5
    
node ng-add-pug-loader.js
****/my-project/ng-add-pug-loader.js:12
  if (err) throw err;
           ^

[Error: ENOENT: no such file or directory, open 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js'
}

Since I am unable to create a pull-request I am writing the new paths here.

The new angular webpack config paths are:
const TARGET_COMMON_CONFIG_PATH = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js';
const TARGET_TYPESCRIPT_CONFIG_PATH = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js';

Angular 11 updated common.js and typescript.js locations

I've not enough time now for a PR, but for angular 11, common.js is now node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js and typescript.js is now at node_modules/@angular-devkit/build-angular/src/webpack/configs/typescript.js

so in ng-add-pug-loader.js, we have to update :

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';

Pug support inside angular libraries

Currently I am facing issues with using pug in angular libraries.

The ng-packgr does naivly assume that everything BUT html,htm and svg files are css files

https://github.com/ng-packagr/ng-packagr/blob/6234bafb31559cf5825d37db8d729ef3502a4ef9/src/lib/ts/cache-compiler-host.ts#L131

This results in the css processor choking on pug files and throwing errors. Adding a pug to that line fixes the issue but I am not sure if this library is the right scope for that issue.

[Feature Request] Support Integration of pug-plugin-ng

Finally this is a proper solution to use pug with angular-cli.

However it would be nice to have support for quote-less usage of angular binding syntax ([], (), [()]) as provided by https://github.com/tycho01/pug-plugin-ng.

Is there any way to register the plugin to the loader?

Problems with Angular 10

First of all, thanks @danguilherme for making this.
I really enjoy using pug, so this is essencial.

After upgrading an app from Angular 9 to 10, I got this error when building the app:

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
| ng-container
>       header-block

Any workarounds?

Attributes converted to lowercase

Someone noticed that all attributes are being converted to lowercase?

I just try to use this:
div(cdkDropList)

and becomes:
<div cdkdroplist></div>

And I expect the result with the same format case because of the proper directive bind.

ERROR in Module parse failed: Unexpected token (1:0)

Hello,
Sorry I'm new to Angular and I cannot understand why I get this error just after installing ng-cli-pug-loader in an empty brand new project.
I'm on windows 10 x64 running:
Angular CLI: 9.1.7
Node: 12.17.0
npm: 6.14.4
OS: win32 x64
Angular: 9.1.9
Just for reference I report complete stack from project creation to final error:

C:\Users\Angelo\GIT>ng new ngclipugloaderapp
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE ngclipugloaderapp/angular.json (3654 bytes)
CREATE ngclipugloaderapp/package.json (1250 bytes)
CREATE ngclipugloaderapp/README.md (1034 bytes)
CREATE ngclipugloaderapp/tsconfig.json (489 bytes)
CREATE ngclipugloaderapp/tslint.json (3125 bytes)
CREATE ngclipugloaderapp/.editorconfig (274 bytes)
CREATE ngclipugloaderapp/.gitignore (631 bytes)
CREATE ngclipugloaderapp/browserslist (429 bytes)
CREATE ngclipugloaderapp/karma.conf.js (1029 bytes)
CREATE ngclipugloaderapp/tsconfig.app.json (210 bytes)
CREATE ngclipugloaderapp/tsconfig.spec.json (270 bytes)
CREATE ngclipugloaderapp/src/favicon.ico (948 bytes)
CREATE ngclipugloaderapp/src/index.html (303 bytes)
CREATE ngclipugloaderapp/src/main.ts (372 bytes)
CREATE ngclipugloaderapp/src/polyfills.ts (2835 bytes)
CREATE ngclipugloaderapp/src/styles.css (80 bytes)
CREATE ngclipugloaderapp/src/test.ts (753 bytes)
CREATE ngclipugloaderapp/src/assets/.gitkeep (0 bytes)
CREATE ngclipugloaderapp/src/environments/environment.prod.ts (51 bytes)
CREATE ngclipugloaderapp/src/environments/environment.ts (662 bytes)
CREATE ngclipugloaderapp/src/app/app-routing.module.ts (246 bytes)
CREATE ngclipugloaderapp/src/app/app.module.ts (393 bytes)
CREATE ngclipugloaderapp/src/app/app.component.html (25757 bytes)
CREATE ngclipugloaderapp/src/app/app.component.spec.ts (1092 bytes)
CREATE ngclipugloaderapp/src/app/app.component.ts (221 bytes)
CREATE ngclipugloaderapp/src/app/app.component.css (0 bytes)
CREATE ngclipugloaderapp/e2e/protractor.conf.js (808 bytes)
CREATE ngclipugloaderapp/e2e/tsconfig.json (214 bytes)
CREATE ngclipugloaderapp/e2e/src/app.e2e-spec.ts (650 bytes)
CREATE ngclipugloaderapp/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in browserslist.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in karma.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app-routing.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/styles.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.spec.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tslint.json.
The file will have its original line endings in your working directory
Successfully initialized git.

C:\Users\Angelo\GIT>cd ngclipugloaderapp

C:\Users\Angelo\GIT\ngclipugloaderapp>ng serve --open
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-05-28T14:38:45.236Z - Hash: d8d53cbff02599a4fcfe - Time: 11767ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

C:\Users\Angelo\GIT\ngclipugloaderapp>ng add ng-cli-pug-loader
Installing packages for tooling via npm.
Installed packages for tooling via npm.
CREATE ng-add-pug-loader.js (2150 bytes)
UPDATE package.json (1413 bytes)
UPDATE node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js (22546 bytes)
UPDATE node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js (4793 bytes)
/ Installing packages...[..................] / rollbackFailedOptional: verb npm-- Installing packages...[..................] / rollbackFailedOptional: verb npm-\ Installing packages...[..................] / rollbackFailedOptional: verb npm-- Installing packages...[..................] / rollbackFailedOptional: verb npm-| Installing packages...[..................] / rollbackFailedOptional: verb npm-/ Installing packages...[..................] / rollbackFailedOptional: verb npm-| Installing packages...[..................] / rollbackFailedOptional: verb npm-/ Installing packages...[..................] / rollbackFailedOptional: verb npm-- Installing packages...[..................] / rollbackFailedOptional: verb npm-\ Installing packages...[..................] / rollbackFailedOptional: verb npm-| Installing packages...[..................] / rollbackFailedOptional: verb npm-/ Installing packages...[..................] / rollbackFailedOptional: verb npm-- Installing packages...[..................] / rollbackFailedOptional: verb npm-\ Installing packages...[..................] / rollbackFailedOptional: verb npm-| Installing packages...[..................] / rollbackFailedOptional: verb npm-/ Installing packages...[..................] / rollbackFailedOptional: verb npm-- Installing packages...[..................] / rollbackFailedOptional: verb npm-\ Installing packages...[..................] / rollbackFailedOptional: verb npm-| Installing packages...[..................] / rollbackFailedOptional: verb npm-/ Installing packages...[..................] / rollbackFailedOptional: verb npm-- Installing packages...[..................] / rollbackFailedOptional: verb npm-/ Installing packages...[..................] | loadIdealTree:loadAllDepsIntoIdea\ Installing packages...[..................] / fetchMetadata: sill resolveWithNe| Installing packages...[ .................] \ fetchMetadata: sill resolveWithNe/ Installing packages...[ .................] | fetchMetadata: sill resolveWithNe- Installing packages...[ .................] | fetchMetadata: sill resolveWithNe\ Installing packages...[ .................] / fetchMetadata: sill resolveWithNe| Installing packages...[ .................] \ fetchMetadata: sill resolveWithNenpm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
/ Installing packages...[ .................] - fetchMetadata: sill resolveWithNe- Installing packages...[ .................] - fetchMetadata: sill resolveWithNe\ Installing packages...[ .................] | fetchMetadata: sill resolveWithNe| Installing packages...[ .................] / fetchMetadata: sill resolveWithNe/ Installing packages...[ .................] | loadDep:repeat-string: sill resol- Installing packages...[ ................] - fetchMetadata: sill resolveWithNe/ Installing packages...[ ...............] / loadDep:rxjs: sill resolveWithNew- Installing packages...[ ............] / loadExtraneous: sill resolveWithN\ Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] / loadExtraneous: sill resolveWithN/ Installing packages...[ ............] / loadExtraneous: sill resolveWithN- Installing packages...[ ............] / loadExtraneous: sill resolveWithN\ Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] / loadExtraneous: sill resolveWithN/ Installing packages...[ ............] / loadExtraneous: sill resolveWithN- Installing packages...[ ............] / loadExtraneous: sill resolveWithN\ Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] / loadExtraneous: sill resolveWithN/ Installing packages...[ ............] / loadExtraneous: sill resolveWithN- Installing packages...[ ............] / loadExtraneous: sill resolveWithN\ Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] / loadExtraneous: sill resolveWithN/ Installing packages...[ ............] / loadExtraneous: sill resolveWithN- Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] / loadExtraneous: sill resolveWithN- Installing packages...[ ............] / loadExtraneous: sill resolveWithN\ Installing packages...[ ............] / loadExtraneous: sill resolveWithN/ Installing packages...[ ............] / loadExtraneous: sill resolveWithN- Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] / loadExtraneous: sill resolveWithN| Installing packages...[ ............] - diffTrees: sill install generateA/ Installing packages...[ ...........] - diffTrees: sill install generateA\ Installing packages...[ ...........] | postinstall: sill install execute| Installing packages...[ ...........] - extract:pug: verb lock using C:\U/ Installing packages...[ ...........] - extract:pug: verb lock using C:\U- Installing packages...[ ...........] - extract:pug: verb lock using C:\U\ Installing packages...[ .........] | extract:regenerator-runtime: sill| Installing packages...[ ........] / extract:fsevents: sill extract pu/ Installing packages...[ .......] / extract:loader-utils: sill extrac- Installing packages...[ .......] / extract:loader-utils: sill extrac\ Installing packages...[ ......] - extract:acorn: sill extract acorn| Installing packages...[ ......] \ extract:acorn: sill extract acorn/ Installing packages...[ ......] | extract:clean-css: sill extract c- Installing packages...[ ......] / extract:babel-runtime: sill extra\ Installing packages...[ ......] / extract:babel-runtime: sill extra| Installing packages...[ ......] / extract:babel-runtime: sill extra/ Installing packages...[ ......] / extract:babel-runtime: sill extra- Installing packages...[ ......] / extract:babel-runtime: sill extra\ Installing packages...[ ......] / extract:babel-runtime: sill extra| Installing packages...[ ......] / extract:babel-runtime: sill extra/ Installing packages...[ ......] / extract:babel-runtime: sill extra- Installing packages...[ ......] \ finalize:clean-css: sill finalize\ Installing packages...[ ......] | finalize:fsevents: sill finalize | Installing packages...[ ......] \ refresh-package-json:pug: timing / Installing packages...[ ......] - refresh-package-json:pug: timing - Installing packages...[ ......] \ build:@types/babylon: sill linkSt\ Installing packages...[ ......] \ install:constantinople: info life

[email protected] postinstall C:\Users\Angelo\GIT\ngclipugloaderapp\node_modules\babel-runtime\node_modules\core-js
node -e "try{require('./postinstall')}catch(e){}"

| Installing packages...[ ......] \ postinstall: info lifecycle pug@2\ Installing packages...[ ......] - postinstall: info lifecycle pug@2npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\ng-cli-pug-loader\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

• [email protected]
• [email protected]
• [email protected]
  added 55 packages from 130 contributors and audited 1514 packages in 18.12s
  \ Installing packages...
  50 packages are looking for funding
  run npm fund for details

found 0 vulnerabilities

√ Packages installed successfully.

C:\Users\Angelo\GIT\ngclipugloaderapp>ng serve --open

chunk {main} main.js, main.js.map (main) 2.01 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 683 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 340 kB [initial] [rendered]
Date: 2020-05-28T14:58:26.673Z - Hash: 9d620c3650df7ca0d530 - Time: 3934ms

ERROR in Module parse failed: Unexpected token (1:0)

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

|
|
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

In browser I get an empty page reporting Error "Cannot GET /"
Any help will be appreciated.
Thank you

Angelo

Some other configuration

Hi @danguilherme :) .

Execute the command ng add ng-cli-pug-loader , and change the extension to the app.component.plug file, but when you run ng 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

pug arguments

there is my code

div(class="jsonTra__box")
  article(nz-row nzType="flex" nzJustify="space-around" class="jsonTra__box__wrap")
    section(nz-col nzSpan="12" class="jsonTra__box__wrap--input")
      div(class="jsonTra__box__wrap--input__wrap")
        app-json-tree('[jsonData]'="jsonData" '(editEmitter)'="editHandle($event)")
        button(nz-button nzType="primary" class="jsonTra__box__wrap--input__wrap__button--reset") Reset
    div(nz-col nzSpan="12" class="jsonTra__box__wrap--output") col-6s
    app-multi-drawer-component(
      '[visible]'="drawerState"
      '(drawerCloseEmitter)'="drawerStateHandle($event)"
    )

but it tell me ERROR in src/app/app.component.pug(1,253): : Expected 0 arguments, but got 1.

how can i fix it, thanks

Angular's index gives plain text instead of pug output.

Very weird, here are my fields in angular.json:

"options": {
            "outputPath": "dist/angularSeed",
            "index": "src/index.pug",
            "main": "src/main.ts",

Did I make a mistake?

Create a contributing guide

Create instructions to guide users on how to open issues and submit pull requests.

• Issues with development environment info (result of ng version)
• Pull requests should be against the develop branch

Possible inspiration: https://reactjs.org/docs/how-to-contribute.html.

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

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

Double rules in webpack-configs/common.js

The module.rules in node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js has the following lines after installing new npm packages with ng-cli-pug-loader installed:

rules: [ { test: /.(pug|jade)$/, exclude: /.(include|partial).(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /.(include|partial).(pug|jade)$/, loader: "pug-loader" }, { test: /\.(pug|jade)$/, exclude: /\.(include|partial)\.(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /\.(include|partial)\.(pug|jade)$/, loader: "pug-loader" },

The resulting double rules produce errors as seen in pugjs/pug-loader#120

The issue is corrected by changing the rules to:

rules: [ { test: /\.(pug|jade)$/, exclude: /\.(include|partial)\.(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /\.(include|partial)\.(pug|jade)$/, loader: "pug-loader" },

(Note the correct escaping)

On the very first run of 'ng-add-pug-loader.js', the newly added rule in module.rules has bad escaping, which results in adding the new rule on the consecutive runs of 'ng-add-pug-loader.js':

{ test: /.(pug|jade)$/, exclude: /.(include|partial).(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /.(include|partial).(pug|jade)$/, loader: "pug-loader" }

Steps to reproduce:

1. Run ng new my-app.
2. Run ng add ng-cli-pug-loader.
3. Rename 'app.component.html' to 'app.component.pug'.
4. Run ng add @angular/material

Version info:

Angular CLI: 9.1.1
Node: 13.12.0

Angular 8

Fiz alguns testes com o Angular 8 e aparentemente o pug não está sendo identificado no mesmo. Teremos suporte para está versão ?

ng-add-pug-loader.js file generated with errors

After ng add ng-cli-pug-loader I've got this wrong formatted line:

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' },';

Angular 11 brand-new project issues

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?

Clean up dependencies

Can you please move jasmine and @types/jasmine to the dev dependencies on package.json since this creates problem with projects using Jest?

Angular (7) component accepts only html files but does not support htm file

Component is defined like this:

import {Component} from '@angular/core';
@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {

}
I would like to load in some specific components instead of "app.component.html" a file with extention htm "app.component.htm"

@component({
selector: 'app-root',
templateUrl: './app.component.htm',
styleUrls: ['./app.component.less']
})
from some reason it doesnt work it says:

ERROR in ./app.component.htm 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

app component works!

｢wdm｣: Failed to compile. Please help me find a way to load an htm file? I am aware that there is a way to bootstrap with Webpack, I would like to keep the current build of ng-serve\cli angular.json!

Thank you!

...

...

Angular 7

Trying to update to Angular 7 and now seem to have an issue with pug files. On load the templates return 404 errors.

Assuming this would be an issue with CLI changes and the updates cli pug loader does to the webpack config during post install.

Anyone tried a Angular 7 update yet and have any pointers?

Angular Cli template parse Error on *ngFor

Hi there,

if i use this code
.grid.grid-pad a.col-1-4(*ngfor='let hero of heroes') .module.hero h4 {{ hero.name }}

it compiles succesfully, but when i open the browser i get a template parse error

i found no solution to this issue

thank you

v0.2.2 has wrong NPM dependencies

Instead

"dependencies": {
  "@angular-devkit/core": "^0.5.13",
  "@angular-devkit/schematics": "^0.5.13"
},

you should define something like

"peerDependencies": {
  "@angular-devkit/core": ">=0.5.13 < 0.900.0",
  "@angular-devkit/schematics": ">=0.5.13 < 0.900.0"
},

because your script is supposed to modify the files of those packages, already installed, and defining them as dependencies, you're adding @angular-devkit/[email protected] to our angular projects, instead just work with the existing files.

Thanks for the great work.

Question: Is it possible to enhance this plugin that ng generate creates pug files?

Test the generated ng-add-pug-loader.js

Need to add CI tests to check if the generated ng-add-pug-loader.js runs smoothly in all node environments.

The motivation for that is issue #5, fixed in PR #7.

Better future-proofing?

It seems like the angular team is changing the inner workings of the common.js webpack file. Is there a possible way to add the loaders as part of the angular.json file? Relevant issue for reference:

angular/angular-cli#10879

After Angular 8 Update, Pug renders text only

Now that the struggle of the Angular 8 update is over. None of my pug files are compiling. Or they are.... to plain text.
Angular 8.1.0
"ng-cli-pug-loader": "^0.2.0",
"pug": "^2.0.4",
"pug-loader": "^2.4.0",

Did you have yo do anything different after update?

Angular 8 mixed pug and html - file type not supported

I have some html files that I am required to keep as html. I found that I needed to add the following rule to the common.js file (the file that the pug-loader rule is added to).
{ test: /\.html$/, use: "raw-loader" },
I don't know how the ng-add-pug-loader.js file should look for this, or I would do a pull request.

Add file include support

It seems there are some issues with include operator support: https://pugjs.org/language/includes.html

include test

// pug code

test.pug:

p Simple test

Error:

Interesting that I'm including also file with all mixins definition, like:

include mixins

// pug code

and it works without errors.

P.S.: It worked with webpack and pug-html-loader (I had ejected webpack before). And now, after migration to Angular CLI and ng-cli-pug-loader, I have that error.

P.P.S.: Or maybe an error in pug-loader. Just noticed that I used pug-html-loader before migration.

Question: How does this package work? Is it based off of angular-cli documentation?

Hi,
I really appreciate this package you've put together and am amazed at how easy it makes integrating pug into an Angular project. Simply installing the package, is literally the only step!

I can't find any other similar packages to this, so I'm wondering if was this is derived from Angular documentation? Or is it a hack into the angular compiler?

The reason I ask, is that I would like to do a similar package, which simply reads .txt files which are imported in angular. Because right now, importing a text file triggers an error in the angular-cli.

import data from './test.txt'

ERROR in ./src/app/test.txt 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> ### This is a test
: Failed to compile.

Can anyone help me out, or point me in the right direction?
Cheers,
Ben

[ERR_INVALID_CALLBACK]: Callback must be a function while Dockerizing

Hi danguilherme! Thank you so much for the loader. It's been working very well with Angular. It took me a while to get everything running (Angular-issues).

I'm having some issues when I try to use Docker with the loader. Whenever I run "node ./ng-add-pug-loader.js", I get:

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
 at maybeCallback (fs.js:133:9)
 at Object.writeFile (fs.js:1139:14)
 at fs.readFile (/usr/app/ng-add-pug-loader.js:20:6)
 at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
error Command failed with exit code 1.

I was able to fix it, by changing all the Asynchronous methods to Synchronous:

/**
 * 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.writeFileSync(file, output);
  fs.closeSync(file);
});

Again, thank you so much for the loader! It's been of great help 😁