# ng-asset-inline

> Used for Angular libraries to inline 'templateUrl' and 'styleUrls' to 'template' and 'styles'. Can be used from Node and as a CLI tool.

Latest version **1.1.7** (published 2017-06-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-asset-inline
pnpm add ng-asset-inline
yarn add ng-asset-inline
bun add ng-asset-inline
```

Provides the commands `ngai`, `ng-asset-inline`.

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.7 |
| Published | 2017-06-01 |
| First published | 2017-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=7.0.0 <8.0.0 |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Christian Svensson |
| Maintainers | csvn |
| Keywords | Angular, CLI |

## Links

- npm: https://www.npmjs.com/package/ng-asset-inline
- npm.io page: https://npm.io/package/ng-asset-inline

## Dependencies (4)

- [glob](https://npm.io/package/glob.md) ^7.1.1
- [yargs](https://npm.io/package/yargs.md) ^8.0.1
- [node-sass](https://npm.io/package/node-sass.md) ^4.5.3
- [@reactivex/rxjs](https://npm.io/package/@reactivex/rxjs.md) ^5.4.0

## Alternatives

- [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads
- [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads
- [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads
- [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads
- [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads

## Recent versions

- 1.1.7 (latest) — 2017-06-01
- 1.1.6 — 2017-05-24
- 1.1.5 — 2017-05-24
- 1.1.4 — 2017-05-24
- 1.1.3 — 2017-05-24
- 1.1.2 — 2017-05-24
- 1.1.1 — 2017-05-23
- 1.0.1 — 2017-05-23
- 1.1.0 — 2017-05-23
- 1.0.0 — 2017-05-22

## README

[![build status](https://gitlab.com/csvn/ng-asset-inline/badges/master/build.svg)](https://gitlab.com/csvn/ng-asset-inline/commits/master)

# ng-asset-inline

Helpful CLI tool for inlining Angular component `templateUrl` and `styleUrls` when bundling library code.

## Highlights
* Supports `includeStylePaths` (mirrors Angular CLI functionality)
* No need to copy `.js/.html/.css` files over build folder
* Inlines URLS for both `.js` and `.metadata.json` files, supporting both AOT and JIT modes for Angular
* Written with Typescript and Rxjs

## Example

```bash
ng-asset-inline build src/lib --styles 'src/styles,src/mixins'
```

```ts
import { ngAssetInline } from 'ng-asset-inline';
// or standard Node require:
// const { ngAssetInline } = require('ng-asset-inline');

ngAssetInline({
  build: 'build',
  source: 'src/lib',
  includeStylePaths: ['src/styles', 'src/mixins']
})
  .subscribe({
    error: err => console.log(err),
    complete: () => console.log('Angular assets inlined!');
  });
```

## Usage

```bash
npm i -D ng-asset-inline
# equivalent to:
npm install --save-dev ng-asset-inline
```

All paths are relative to the console working directory that `ng-asset-inline` is run from.

```bash
ng-asset-inline build src/lib
ng-asset-inline <build-folder> <source-folder>
```
This will inline templates/styles for all `.js` and `.metadata.json` files in the `build` folder, using the `.html`/`.css`/`.scss` files from `src/lib`. E.g. for the component in `build/datepicker/datepicker.component.js`, asset paths will be resolved relative to folder `src/lib/datepicker`.

### IncludeStyles option

```bash
ng-asset-inline --styles '<comma-separated-paths>'
```

Angular CLI has an option named `stylePreprocessorOptions.includePaths`, which is an array of folders where style pre-processors should also look for files. This CLI option mirrors that functionality.

## Angular library guide

This guide will be a pretty high level step-by-step guide, but check out [this video from ng-conf](https://youtu.be/unICbsPGFIA) for more insight into the how's and why's.


### 1. Compile Typescript files
Before using `ng-asset-inline`, use the Angular compiler to generate `.js`, `.d.ts` and `.metadata.json` files from your `.ts` files. This can be done like below:

```bash
ngc -p src/lib/tsconfig.build.json
```

```json
// tsconfig.build.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": ".",
    "outDir": "./build",
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "strict": true,
    "declaration": true,
    "experimentalDecorators": true
  },
  "files": [
    "my-lib.ts"
  ],
  "angularCompilerOptions": {
    "strictMetadataEmit": true,
    "skipTemplateCodegen": true,
    "flatModuleOutFile": "my-lib.js",
    "flatModuleId": "my-lib"
  }
}
```

This will generate a bunch of files in the `build` folder. For this example, the folder structure will look something like this:

```
my-lib
\___ build
 |  \____ my-lib.d.ts
 |   |___ my-lib.js
 |   |___ my-lib.metadata.json
 |   |___ awesome.component.d.ts
 |   |___ awesome.component.js
 |    \__ ...
  \_ src
      \___ lib
       |  \____ my-lib.ts
       |   |___ awesome.component.html
       |   |___ awesome.component.scss
       |   |___ awesome.component.ts
       |    \__ ...
        \_ styles
```

If we would look at `awesome.component.js` and `my-lib.metadata.json` we would be able to see that the component metadata are still in the URL format (the `.js` file shown below):

```js
AwesomeComponent.decorators = [
    { type: Component, args: [{
                selector: 'mylib-awesome',
                templateUrl: './awesome.component.html',
                styleUrls: ['./awesome.component.scss']
            },] },
];
```

And that is what this library will solve! It replaces `templateUrl` and `styleUrls` with `template` and `styles`respectively.

```js
AwesomeComponent.decorators = [
    { type: Component, args: [{
                selector: 'mylib-awesome',
                template: '<h1>This component is awesome!</h1>\n',
                styles: ['h1 { color: goldenrod; }\n']
            },] },
];
```

### 2. Inline templates

`ng-asset-inline` should make this step easy! For the above example, we only need to run the following command:

```bash
ng-asset-inline build src/lib --styles src/styles
```

If there are any `.scss` files with e.g. `@import 'mixins';`, they will also be looked for in the `src/styles` folder.

### 3. Rollup into FESM

Next up, is to roll all `.js` files up into one by using `Rollup`.

-- TODO --


#### License
MIT

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