Feature Description

Hi,

A lot of new templating features will come with Angular 17.
https://blog.angular.io/meet-angulars-new-control-flow-a02c6eee7843

On first sight, I don't think that they'll be compatibles with Ngx Pug Builders and particularly Pug.

What do you think about this ?

Thanks for all,

Use Case

No response

Feature Description

Some infos on ngx-pug-builders and ng15

Tested with new angular 15, build / serve are OK.

ng test have problems as ng test outputs "Error: Specified patterns: "" did not match any spec files."

this is because of angular/angular-cli@dbcea96

two steps needed :

• adding the missing line "default": ["**/*.spec.ts"] in ngx-pug-builders karma/schema.json as in angular/angular-cli@dbcea96#diff-e4ee8d37e407771a03c6d8120841d855c106bf48c969a5dc5ef8a0db41bbe79c
• removing the lines in tests.ts as in angular/angular-cli@dbcea96#diff-93fac08c03cc68a6a3217be53262dccc4ccc6bd6909c397fb1ca32f18fae5182

The first one is a one-liner into ngx-pug-builders code, the second one is changed by ng update, but not when using ngx-pug-builders, so it would eventually need a note in README ?

Until an ngx-pug-builders v15, changing tests.ts and calling ng test --include '**/*.ts' should be enough

Use Case

Use ngx-pug-builders with ng 15

Documentation Feedback

Dear fellows,

I start by apologize as I know this might not be the best place to seek help.

Just noticed that your lib accomplish something I was looking for.

I need to get angular to concatenate templates in a component, and I could do that until v9- by simply using import template from './temp.html' and then at @component directive by template: template1 + template2 .. it used to work.

However I cant do that more in v13+

Could you provide me some help in order to achieve that?

Thank you so much

Feature Description

Angular 14 seems to be well supported by ngx-pug-builders using --force

warning " > [email protected]" has incorrect peer dependency "@angular-devkit/build-angular@^13.1.4".
warning " > [email protected]" has incorrect peer dependency "@angular/compiler-cli@^13.1.3".

could you release a ngx-pug-builders with 14 as peer dep ?
thank you for this valuable piece of code

Use Case

No response

Feature Description

ngx-pug-builders works perfectly with angular 16 (tested with all rc versions, and today with final 16.0.0), without any change. Could you bump the angular peer dep to allow smooth ng16 ng update without --force ? Thank you !

Use Case

No response

Feature Description

First of all, thank you for your work on this project. I am migrating from ng-cli-pug-loader (thanks to your helpful reply on one of its issue threads) following the upgrade to Angular 12 and think this implementation is very nice. I did run into one big issue however but it seems like it should be pretty easy to solve.

Pug allows the use of 'include" to import pug templates from elsewhere in the source code. It is very convenient to be able to use absolute paths, relative to the root or base of the project, for these includes.

The former solution, ng-cli-pug-loader, did allow this style for includes, my project relied on it heavily. Btw, this project also had some issues with pug includes, see below for more info on that.

The dependency simple-pug-loader allows this style as well, however you have to provide that value for the basedir or root option in the loader config:

...
const addPugRules = (config) => {
     return webpack_merge_1.merge(config, {
        module: {
            rules: [
                {
                    test: /\.(pug|jade)$/,
                    use: [
                        { loader: 'apply-loader' },
                        { 
                            loader: 'simple-pug-loader', 
                            options: {
                                basedir: config.context // '/srv/deeply/nested/path/to/project/app'
                            }
                        }
                    ]
                }
            ]
        }
     });
  };
...

I am not entirely sure if this is actually an issue with the simple-pug-loader dependency or what, but it seems modifying the loader rules created by ngx-pug-builder's util.js file takes care of the problem for me at least.

FYI, I also noticed that the former project, ng-cli-pug-loader, had some issues with includes, specifically with apply-loader per this issue, and this was their solution:

function getPugLoaderRules(): string {
  const partialRegex = /\.(include|partial)\.(pug|jade)$/;
  return `
    {
      test: /\\.(pug|jade)$/,
      exclude: ${partialRegex},
      use: [
        { loader: "apply-loader" },
        { loader: "pug-loader" }
      ]
    },
    {
      test: ${partialRegex},
      loader: "pug-loader"
    },`.replace(/\s+/gm, ' ');
}

I'm not 100% clear on the why and how or if this even address the problem I am discussing or a different one, but hoping you know more than me, maybe you can make use of this information.

Let me know if there is anything else I can do, am interested to see how you think this should be addressed if at all.

Thanks again.

Use Case

I can keep my includes like so:

include /src/theme/templates/mixins/shared.include.pug

Instead of what would otherwise be a nightmare:

include ../../../../../../theme/templates/mixins/shared.include.pug

Feature Description

Any progress to add new build for Angular18?
Thanks

Use Case

No response

Feature Description

Hi, is there plan to support @angular-devkit/build-angular:jest ?

Use Case

No response

Feature Description

Hello.
I have the following karma configuration in karma.conf.js:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false,
      jasmine: {
        random: false
      }
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    failOnEmptyTestSuite: false
  });
};

In angular.json:

...
"test": {
          "builder": "ngx-pug-builders:karma",
          "options": {
            "main": "src/main/angular/src/test.ts",
            "polyfills": "src/main/angular/src/polyfills.ts",
            "tsConfig": "src/main/angular/src/tsconfig.spec.json",
            "karmaConfig": "src/main/angular/src/karma.conf.js",
            "styles": [
              "src/main/angular/src/styles.styl"
            ],
            "scripts": [
              "node_modules/perfect-scrollbar/dist/perfect-scrollbar.js",
              "node_modules/@hrp/metronic-scripts/dist/scripts.bundle.js"
            ],
            "assets": [
              "src/main/angular/src/favicon.ico",
              "src/main/angular/src/assets"
            ],
            "fileReplacements": [
              {
                "replace": "src/main/angular/src/environments/environment.ts",
                "with": "src/main/angular/src/environments/environment.test.ts"
              }
            ]
          }
        }
...

Tests not working and print the following errors:

Error: Errors during JIT compilation of template for FinancialServicesComponent: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
	ag-grid-angular.ag-theme-balham(appAgGrid, [gridOptions]="gridOptions", [columnDefs]="columnDefs")
	[ERROR ->]"): ng:///FinancialServicesComponent/template.html@22:0, Invalid ICU message. Missing '}'. (" type of documentTypes")
	        i.mr-3.fas.fa-business-time([ngClass]="type.color")
	        span [ERROR ->]{{type.name}}
	
	app-ag-grid-filters([gridOptions]="gridOptions")
	"): ng:///FinancialServicesComponent/template.html@18:13
	Error: Errors during JIT compilation of template for FinancialServicesComponent: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
	ag-grid-angular.ag-theme-balham(appAgGrid, [gridOptions]="gridOptions", [columnDefs]="columnDefs")
	[ERROR ->]"): ng:///FinancialServicesComponent/template.html@22:0, Invalid ICU message. Missing '}'. (" type of documentTypes")
	        i.mr-3.fas.fa-business-time([ngClass]="type.color")
	        span [ERROR ->]{{type.name}}
	
	app-ag-grid-filters([gridOptions]="gridOptions")
	"): ng:///FinancialServicesComponent/template.html@18:13
	    at parseJitTemplate (node_modules/@angular/compiler/fesm2015/compiler.js:22746:1)
	    at CompilerFacadeImpl.compileComponent (node_modules/@angular/compiler/fesm2015/compiler.js:22555:43)
	    at Function.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27408:1)
	    at getComponentDef (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:1120:1)
	    at node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27206:1
	    at Array.forEach (<anonymous>)
	    at setScopeOnDeclaredComponents (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27202:1)
	    at flushModuleScopingQueueAsMuchAsPossible (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26887:1)
	    at TestBedRender3.checkGlobalCompilationFinished (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1815:53)
	    at TestBedRender3.resetTestingModule (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1665:1)

It's looks like that pug templates not compiling to the html code. But in development and production everything works ok. Thank you!

ngx-pug-builders version: 12.0.0
Angular version: 12

Use Case

No response

Feature Description

Hello,
Is a option to support pug template with angular on vs code ? Now is a problem with go to component by template reference (tag)

Is any option to resolve this problem in vs code ?

Use Case

If we have small project with a few component is not a problem because can use a vs code command line, but when we change a project to large/new where we have a lot of components is problem to find component, yes we can use a command line but sometimes the file name is not the same as template selector or we have multiple selector with the same name but in other modules.

Feature Description

Just upgraded to Angular v13 from v11, and was using another package for pug. I found your library, and it allows me to compile! thanks for all the work I am sure this took!

One thing that is driving me a little crazy though and even just using ng serve the compile result is like prod mode in that its all minified and what not. Makes debugging super annoying. I used to be able to put debuggers in the code and hit them, and Id love to be able to do so again.

Am I missing something in a config somewhere, or is this not supported?

Use Case

No response