angular-cli (webpack/pug)

[launcelot66]

Versions

Angular CLI: 6.0.1
Node: 10.1.0
OS: darwin x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.1
@angular-devkit/core         0.6.1
@angular-devkit/schematics   0.6.1
@angular/cli                 6.0.1
@schematics/angular          0.6.1
@schematics/update           0.6.1
rxjs                         6.1.0
typescript                   2.7.2

Repro steps

work in 5.2 version, that version used webpack

• Step 1
  create file pug-rule-insert.js:

const fs = require('fs');
const commonCliConfig = 'node_modules/@angular/cli/models/webpack-configs/common.js';
const pug_rule = `\n\t\t\t\t\t\t\t\t{ test: /.(pug|jade)$/, loader: 'apply-loader!pug-loader?self' },`;

fs.readFile(commonCliConfig, (err, data) => {
  if (err) { throw err; }

  const configText = data.toString();
  if (configText.indexOf(pug_rule) > -1) { return; }

  const position = configText.indexOf('rules: [') + 8;
  const output = [configText.slice(0, position), pug_rule, configText.slice(position)].join('');
  let file = fs.openSync(commonCliConfig, 'r+');
  fs.writeFile(file, output, () => {});
  fs.close(file, () => {});
});

• Step 2
  node pug-rule-insert.js

Observed behavior

Error: ENOENT: no such file or directory, open 'node_modules/@angular/cli/models/webpack-configs/common.js'

Desired behavior

That script adds support of pug for webpack, how i can make the same in version 6 of angular(cli)?

NOTE:

Don't wont use webpack (previous solution works for angular-cli)

[Brocco]

While this may have worked in previous versions it was not supported. Your script is changing the installed CLI package...

const commonCliConfig = 'node_modules/@angular/cli/models/webpack-configs/common.js';

The newest version does not use that file and therefore no longer works.

[launcelot66]

sad( back to html = (
thanks

[krivochenko]

@Brocco maybe there is another file with webpack config which we have to change instead of node_modules/@angular/cli/models/webpack-configs/common.js?

[krivochenko]

I found it: node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js

[launcelot66]

@krivochenko Thanks! But i don't have "build-angular" folder in @angular-devkit = (
Can u please show our package.json file?

[launcelot66]

i have "architect", "core" & "schematics"

[usman-vqode]

@krivochenko I was using common.d.ts but renaming it to .js fixed my issue, Thanks

[usman-vqode]

For angular 6+ you can use this code..

`const fs = require('fs');

const commonCliConfig = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js';
const pug_rule = \n{ test: /\\.(pug|jade)$/, use: [ 'apply-loader', { loader: 'pug-loader', options: { pretty: true, doctype: 'html', plugins: ["pug-plugin-ng", "raw-loader", "pug"] } } ] },;

fs.readFile(commonCliConfig, (err, data) => {
if (err) {
throw err;
}

const configText = data.toString();

if (configText.indexOf(pug_rule) > -1) {
    console.log('Pug webpack rule already inserted.');
    return;
}

console.log('Inserting pug webpack rule...');

const position = configText.indexOf('rules: [') + 8;
const output = [configText.slice(0, position), pug_rule, configText.slice(position)].join('');

const file = fs.openSync(commonCliConfig, 'r+');
fs.writeFile(file, output, (err) => {
    console.log('Pug webpack rule inserted.');
    if (err) {
        console.error('Error when inserting pug webpack rule.');
    }
});
fs.close(file, (err) => {
    if (err) {
        console.error('Error when inserting pug webpack rule.');
    }
});

});
`

[launcelot66]

@usman-vqode big thanks!
but i already convert all templates to html = (((( sad(

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}