# angular2-inline-template-style

> Resolve styleUrls in Angular2 components.

Latest version **1.3.0** (published 2017-12-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular2-inline-template-style
pnpm add angular2-inline-template-style
yarn add angular2-inline-template-style
bun add angular2-inline-template-style
```

Provides the command `ng2-inline`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2017-12-19 |
| First published | 2016-01-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.10.0 |
| Dependencies | 6 |
| Known vulnerabilities | 0 (+3 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 21 |
| Author | Pabs |
| Maintainers | npmpabs |

## Links

- npm: https://www.npmjs.com/package/angular2-inline-template-style
- Repository: https://github.com/ghpabs/angular2-inline-template-style
- Homepage: https://github.com/ghpabs/angular2-inline-template-style#readme
- Issues: https://github.com/ghpabs/angular2-inline-template-style/issues
- npm.io page: https://npm.io/package/angular2-inline-template-style

## Dependencies (6)

- [less](https://npm.io/package/less.md) ^2.7.2
- [meow](https://npm.io/package/meow.md) ^3.6.0
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [clean-css](https://npm.io/package/clean-css.md) ^3.4.9
- [node-sass](https://npm.io/package/node-sass.md) ^4.5.3
- [html-minifier](https://npm.io/package/html-minifier.md) ^1.1.1

## Recent versions

- 1.3.0 (latest) — 2017-12-19
- 1.2.0 — 2017-10-01
- 1.1.0 — 2017-04-21
- 1.0.2 — 2017-02-21
- 1.0.1 — 2017-02-13
- 1.0.0 — 2017-02-01
- 0.2.2 — 2016-12-30
- 0.2.1 — 2016-09-19
- 0.2.0 — 2016-06-13
- 0.1.2 — 2016-01-11
- 0.1.1 — 2016-01-08
- 0.1.0 — 2016-01-07
- 0.0.1 — 2016-01-01

## README

# angular2-inline-template-style

[![Build Status](https://travis-ci.org/pablodenadai/angular2-inline-template-style.svg?branch=master)](https://travis-ci.org/pablodenadai/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 */
<h1>Hello World</h1>
```

```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: '<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](https://github.com/kangax/html-minifier) and [clean-css](https://github.com/jakubpawlowicz/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](https://github.com/sass/node-sass#includepaths)

## CLI
### Usage
```bash
ng2-inline [--outDir|-o] [--base|-b] [--relative|-r] [--flatten|-f] [--up|-u <count>] [--compress|-c] [--watch|-w] [--sourceOverwrite|-s] <path glob>
```
- --flatten: remove parent directories from source locations (all output is written to --outDir)
- --up <count>: remove `count` leading folders from the source locations when writing to --outDir
- --base: as above
- --compress: as above
- --watch: runs [chokidar](https://github.com/paulmillr/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

### Examples
```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](https://github.com/m-architek/grunt-ng2-inline)
 - [gulp-angular-inline](https://github.com/dfenstermaker/gulp-angular-inline)

## Help wanted
Help wanted for implementing:

- [ ] Jade
- [x] ~~Less~~ thanks [@synarque](https://github.com/synarque)
- [x] ~~Scss/Sass~~ thanks [@dfenstermaker](https://github.com/dfenstermaker)
- [x] ~~Relative file path~~
- [x] ~~Grunt plugin~~ thanks [@m-architek](https://github.com/m-architek)
- [x] ~~Gulp plugin~~ thanks [@dfenstermaker](https://github.com/dfenstermaker/gulp-angular-inline)
- [x] ~~CLI~~ thanks [@jiminys](https://github.com/jiminys)
- [x] ~~Compression~~ thanks [@jiminys](https://github.com/jiminys)

## License
MIT

---
_Source: https://npm.io/package/angular2-inline-template-style · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._