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

[benwinding]

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

[benwinding]

After more research, it seems you can do this with the new recommended package from the angular-cli called ngx-build-plus. Thanks anyway.

https://github.com/manfredsteyer/ngx-build-plus

[danguilherme]

Or is it a hack into the angular compiler?

It's exactly this. This project is based on a hacky solution, and that's why it has issues with new versions of the compiler (#19, #20).

You can check the linked blog post for details on how it is implemented: https://medium.com/@MarkPieszak/using-pug-or-jade-templates-with-the-angular-cli-9e37334db5bc.

Worth to mention:

Note: The original article was for Angular 5 (and lower / older versions of the Angular CLI) It was more of a temporary/hacky solution until there is more formal support within the Angular-CLI or with Schematics.

There are interesting projects aiming to add custom loaders to Angular CLI's Webpack config, it may be worth trying them out (I haven't tried myself).

I hope this gives you enough info, good luck!