angular2-inline-template-style

Resolve templateUrl and styleUrls in Angular2 components.

Install

$ npm install --save angular2-inline-template-style

Usage

/* component.css */
h1 {
  color: #ff0000;
}

/* component.html */
<h1>Hello World</h1>

const styleUrls = require('angular2-inline-template-style');

let content = `
  import {Component} from 'angular2/core';

  @Component({
    selector: 'foo',
    templateUrl: 'component.html'
    styleUrls: ['component.css']
  })
  export class ComponentX {
    constructor() {}
  }
`;

styleUrls(content, {});

// Output
import {Component} from 'angular2/core';

@Component({
	selector: 'foo',
	template: '<h1>Hello World</h1>',
	styles: ['h1 { color: #ff0000; }']
})
export class ComponentX {
	constructor() {}
}

API

styleUrls(content, [options])

content

Type: string
The file content to be processed.

options

base

Type: string
Default: './'
Base folder for templates and stylesheet files.

compress

Type: boolean
Default: false
Use html-min and clean-css to compress the templates before they are inlined.

CLI

Usage

ng2-inline [--outDir|-o] [--base|-b] [--flatten|-f] [--up|-u <count>] [--compress|-c] [--watch|-w] <path glob>

• --flatten : remove parent directories from source locations (all output is written to --outDir)
• --up : remove count leading folders from the source locations when writing to --outDir
• --base : as above
• --compress: as above
• --watch runs chokidar on the glob and on change runs a single file inline

Examples

ng2-inline -o dist -f -b src/components src/components/**/*.js

will take all .js files (recursively) from src/components and insert template/style URLs, found relative to src/components, and output them to ./dist/ with leading paths removed.

Help wanted

Help wanted for implementing:

• Jade
• Less
• Scss/Sass
• File base path
• Gulp and Grunt plugins
• ES5 or 6 outcome options

License

MIT