Angular resource inlining for Gulp build system and Rollup bundler. https://dev.belin.io/ngx-inline-resources
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Cédric Belin 064e974cf9 Updated the Coveralls dependency 5 months ago
bin Disabled the CLI 7 months ago
doc Updated the Coveralls dependency 5 months ago
lib Fixed the `fs` promises usage 7 months ago
test Fixed the `fs` promises usage 7 months ago
var Initial commit 1 year ago
.editorconfig Added the repository settings 1 year ago
.esdoc.json Updated the repository settings 7 months ago
.eslintrc.yaml Updated the repository settings 7 months ago
.gitattributes Updated the repository settings 7 months ago
.gitignore Updated the repository settings 7 months ago
.npmignore Updated the repository settings 7 months ago
.nycrc Updated the repository settings 7 months ago
.travis.yml Updated the repository settings 7 months ago
AUTHORS.txt Added the legal files 1 year ago
CHANGELOG.md Updated the changelog 7 months ago
LICENSE.md Raised the required Node.js version 7 months ago
README.md Updated the Coveralls dependency 5 months ago
gulpfile.js Fixed the linter warnings 7 months ago
mkdocs.yml Updated the project URL 7 months ago
package.json Updated the Coveralls dependency 5 months ago

README.md

Resource inlining for Angular

Runtime Release License Downloads Dependencies Coverage Build

Angular resource inlining for Gulp build system and Rollup bundler.

Requirements

The latest Node.js and npm versions. If you plan to play with the sources, you will also need the latest Gulp version.

Installing via npm

From a command prompt, run:

$ npm install --save-dev @cedx/ngx-inline-resources

Usage

This package provides a set of plug-ins allowing to inline the resources of Angular components. These are the files specified by the styleUrls and templateUrl metadata properties.

Each plug-in takes a list of JavaScript or TypeScript files as input, and inlines the external styles and templates referenced by the components back into their source code.

For example, given a component like this:

@Component({
  moduleId: module.id,
  selector: 'my-component',
  styleUrls: ['component.css'],
  templateUrl: 'component.html'
})
export class AppComponent {}

And the following component.css and component.html files:

.my-component { margin: 0; }
<div class="my-component"></div>

The plug-ins will apply the following transformation:

@Component({
  selector: 'my-component',
  styles: [`.my-component { margin: 0; }`],
  template: `<div class="my-component"></div>`
})
export class AppComponent {}

Further transformations can be applied: see the section dedicated to the plug-in options.

Gulp plug-in

If you haven’t used Gulp before, be sure to check out the related documentation, as it explains how to create a gulpfile.js as well as install and use plug-ins.

Once you’re familiar with that process, you may enable the plug-in inside your gulpfile.js file. It is exported as the gulp function by this package:

const {gulp: inlineResources} = require('@cedx/ngx-inline-resources');
const gulp = require('gulp');

gulp.task('inlineResources', () => gulp.src('path/to/lib/**/*.{js,ts}')
  .pipe(inlineResources(/* options */))
  .pipe(gulp.dest('path/to/out'))
);

Rollup plug-in

If you haven’t used Rollup before, be sure to check out the related documentation, as it explains how to create a rollup.config.js as well as install and use plug-ins.

Once you’re familiar with that process, you may enable the plug-in inside your rollup.config.js file. It is exported as the rollup function by this package:

import {rollup as inlineResources} from '@cedx/ngx-inline-resources';

export default {
  input: 'path/to/lib/main.js',
  output: {
    file: 'path/to/out/bundle.js',
    format: 'iife'
  },
  plugins: [
    inlineResources(/* options */)
  ]
};

Common options

All plug-ins can be customized using the following settings.

basePath: string = ""

When a component uses resource URLs that start by "./" or "../", or defines a moduleId metadata property, the location of these resources is resolved relative to the processed component file.

For a component defined in the source file located at src/app/dashboard.js:

  • "./views/dashboard.html" will be resolved to "src/app/views/dashboard.html".
  • "../styles/dashboard.css" will be resolved to "src/styles/dashboard.css".
  • "views/dashboard.html" will also be resolved to "src/app/views/dashboard.html" if the component includes a moduleId metadata property.

When the plug-ins encounter a resource URL that is not relative to the component file, they treat this URL as relative to the application root, which is usually the location of the index.html web page that hosts the application.

In such case, you must provide the path of the application root by setting the basePath option:

inlineResources({
  basePath: 'www/ui'
})

With a "www/ui" base path, a "views/dashboard.html" URL will be resolved to "www/ui/views/dashboard.html".

compressStyles: boolean|object = true

By default, the contents of styles is compressed using the cssnano package. You can disable this feature by setting the compressStyles option to false:

// Disable the CSS compression.
inlineResources({
  compressStyles: false
})

You can also provide an object that will be used to customize the settings of the cssnano processor:

// Customize the CSS compression.
inlineResources({
  compressStyles: {
    autoprefixer: {add: true},
    normalizeUrl: {stripWWW: false},
    safe: false
  }
})

compressTemplates: boolean|object = true

By default, the contents of templates is compressed using the html-minifier package. You can disable this feature by setting the compressTemplates option to false:

// Disable the HTML compression.
inlineResources({
  compressTemplates: false
})

You can also provide an object that will be used to customize the settings of the html-minifier processor:

// Customize the HTML compression.
inlineResources({
  compressTemplates: {
    collapseWhitespace: false,
    decodeEntities: true,
    removeComments: true
  }
})

quoteStyle: string = "backtick"

By default, the resources are inlined using backtick characters:

@Component({
  template: `<div class="my-component">
  <h1>Hello World!</h1>
</div>`
})

You can change this behavior by setting the quoteStyle option with one of the following values:

  • "backtick": use the backtick character (e.g. `) for inlining the resource contents.
  • "double": use the double quote (e.g. ") for inlining the resource contents.
  • "single": use the single quote (e.g. ') for inlining the resource contents.

For example:

inlineResources({
  quoteStyle: 'single'
})

Using single quotes, you will get the following output:

@Component({
  template: '<div class="my-component"></div>\n' +
'  <h1>Hello World!</h1>\n' +
'</div>'
})

Using double quotes, you will get the following output:

@Component({
  template: "<div class=\"my-component\"></div>\n" +
"  <h1>Hello World!</h1>\n" +
"</div>"
})

Rollup options

The following settings are specific to the Rollup plug-in.

exclude: string[] = ["node_modules/**"]

This option let you specifically exclude files from the parsing using a list of file patterns:

inlineResources({
  exclude: ['lib/**/*.min.js']
})

By default, all files from the node_modules directory are excluded.

include: string[] = []

This option let you specifically include files to the parsing using a list of file patterns:

inlineResources({
  include: ['lib/**/*.js']
})

License

Resource inlining for Angular is distributed under the MIT License.