Angular-cli: How can I use pug in @angular/cli

[baihech]

I see that the loader is not loaded from .angular-cli.json
https://github.com/angular/angular-cli/blob/master/packages/%40angular/cli/models/webpack-configs/common.ts#L29
https://github.com/angular/angular-cli/blob/master/packages/%40angular/cli/models/webpack-configs/common.ts#L93

[delasteve]

See comment: https://github.com/angular/angular-cli/issues/1886#issuecomment-281332399

We currently do not support pug in the CLI. This will be most likely added in 2.0 via a plug-in system. To add pug to your project, you will need to do customization to the build process yourself. It's possible to use ng eject, but I am going to warn you, there is no going back from the eject command. From there, your best bet is to ask StackOverflow after as we don't support ejected applications.

My suggestion? Don't use pug.

[sumitarora]

Closing as above.

[svallory]

EDIT: Don't use this. My project is over and I'm not maintaing it.

@baihech I made a pull request to allow tweaking webpack config with a file in the project root. For now, you can use the cli at https://github.com/cashfarm/angular-advanced-cli (branch 1.2.x)

Install pug, pug-ng-html-loader and add a webpack.config.js with this to root of your project:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(pug|jade)$/,
        use: ['pug-ng-html-loader']
      }
    ]
  }
}

Then your components can use pug

@Component({
  selector: 'app-root',
  templateUrl: './app.component.pug',
  styleUrls: ['./app.component.styl']
})

But your index has to stay in html.

[zhekaus]

@delasteve , Can't see any problem with _going back_ after ejecting. They always can restore package.json and .angular-cli.json and use ng serve as before.

[zhekaus]

@svallory , however you sacrifice aot

[superjose]

Just in case someone came lurking here for answers. If you're using Angular CLI 6, you can now:

ng add ng-cli-pug-loader

Got it from here.

[angular-automatic-lock-bot[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._}