README
ng-pug-inline-template-loader
Loder for webpack to make it possible to use pug in angularjs component inline templates.
It is meant to be used as a precompile step before transpiling Typescript into JavaScript. It has, currently, only been tested with webpack 3.
If the Typescript file doesn't include a template or the template starts with '<' (indicating that the template is in html) the loader will just pass the source along.
Installation
npm
npm install ng-pug-inline-template-loader
yarn
yarn add ng-pug-inline-template-loader
Usage
Webpack 3
Add this loader before you transpile the Typescript files:
module.exports = {
module: {
rules: [
{
test: /\.ts$/,
use: [
'ts-loader',
'ng-pug-inline-template-loader'
]
}
]
}
}
In your Typescript file you need to use back-ticks (`) surrounding the template, to make this loader convert the markup:
import { app } from './app.module';
const selector = 'someCoolComponent';
@Component(app, selector, {
template: `
.cool-component
p Some text paragraph
#footer
span This is the footer
`
})
export class SomeCoolComponent {
...
}
The above code will be converted like this:
import { app } from './app.module';
const selector = 'someCoolComponent';
@Component(app, selector, {
template: `<div class="cool-component">
<p>Some text paragraph</p>
</div>
<div id="footer"><span>This is the footer</span></div>`
})
export class SomeCoolComponent {
...
}