angular2-inline-template-style


Resolve templateUrl and styleUrls in Angular2 components.

Install

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

Build from source

Just clone the repository and run:

`
npm install

npm link
`

Linking requires administration rights, e.g. sudo on Mac.
After the package has been linked, you should be able to call ng2-inline from command line.




Usage

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

`html
/ component.html /


Hello World


`

`js
const ng2Inline = 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() {}
}
;

ng2Inline(content, {});
`

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

@Component({
selector: 'foo',
template: '

Hello World

',
styles: ['h1 { color: #ff0000; }']
})
export class ComponentX {
constructor() {}
}
`

API

$3

#### 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.
##### includePaths
Type: string[]
Default: []
Alternate folder paths for node-sass to search for @imports
Use node-sass

CLI

$3

`bash
ng2-inline [--outDir|-o] [--base|-b] [--relative|-r] [--flatten|-f] [--up|-u ] [--compress|-c] [--watch|-w] [--sourceOverwrite|-s]
`
- --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
- --sourceOverwrite: allows overwriting input .js files with the respective output file. This only works in case --outDir is not set.
- --relative: keeps the relative path
- --silent: output only errors

$3

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

It 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.

Important! note that glob pattern "src/components/*/.js" is surrounded with quotation marks. Without it, only a single file will get matched and passed down to ng2-inline`.

Plugins

- grunt-ng2-inline
- gulp-angular-inline

Help wanted

Help wanted for implementing:

- [ ] Jade
- [x] ~~Less~~ thanks @synarque
- [x] ~~Scss/Sass~~ thanks @dfenstermaker
- [x] ~~Relative file path~~
- [x] ~~Grunt plugin~~ thanks @m-architek
- [x] ~~Gulp plugin~~ thanks @dfenstermaker
- [x] ~~CLI~~ thanks @jiminys
- [x] ~~Compression~~ thanks @jiminys

License

MIT