ng-pug-inline-template-loader

0.12.0 • Public • Published

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 {
 
...
 
}

Package Sidebar

Install

npm i ng-pug-inline-template-loader

Weekly Downloads

1

Version

0.12.0

License

MIT

Unpacked Size

11.3 kB

Total Files

15

Last publish

Collaborators

  • hfahlstedt