Skip to content

cebor/rollup-plugin-angular

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Ścibor Rudnicki
Aug 23, 2017
95849eb · Aug 23, 2017
Aug 23, 2017
Aug 23, 2017
Jul 21, 2016
Aug 4, 2017
Aug 9, 2017
Jul 21, 2016
Aug 23, 2017
Aug 22, 2017
Aug 23, 2017
Aug 23, 2017
Aug 22, 2017
Aug 22, 2017

Repository files navigation

Build Status

rollup-plugin-angular

Angular2 template and styles inliner for rollup

Looking for new maintainer

I have no time to maintain this plugin anymore. So im looking for a new Maintainer. Feel free to create an issue, when you want to maintain this plugin.

Installation

npm install --save-dev rollup-plugin-angular

Example

// rollup.config.js
import angular from 'rollup-plugin-angular';
import typescript from 'rollup-plugin-typescript';
import alias from 'rollup-plugin-alias';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
  entry: 'src/main.ts',
  format: 'iife',
  dest: 'dist/bundle.js',
  plugins: [
    angular(),
    typescript(),
    alias({ rxjs: __dirname + '/node_modules/rxjs-es' }), // rxjs fix (npm install rxjs-es)
    nodeResolve({ jsnext: true, main: true })
  ]
}

Template & Style preprocessing

You may need to do some preprocessing on your templates & styles such as minification and/or transpilation.

To do this you can pass a preprocessors object as an option, containing a style and/or template preprocessor.

If you are using rollup on a source that has already been transpiled to JavaScript you will also need to set the sourcetype.

Signature

sourcetype: 'js' //defaults to 'ts'
preprocessors: {
  template: (source: string, path: string) => string,
  style: (source: string, path: string) => string,
}

source - The contents of the style or template's file.

path - The path to the loaded file. Can be useful for checking file extensions for example.

returns the manipulated source as a string.

Example

The following example shows how you can use sass, clean-css (for css minification), and htmlmin.

// rollup.config.js
import angular from 'rollup-plugin-angular';
import typescript from 'rollup-plugin-typescript';
import nodeResolve from 'rollup-plugin-node-resolve';
import sass from 'node-sass';
import CleanCSS from 'clean-css';
import { minify as minifyHtml } from 'html-minifier';

const cssmin = new CleanCSS();
const htmlminOpts = {
    caseSensitive: true,
    collapseWhitespace: true,
    removeComments: true,
};

export default {
  input: 'src/main.ts',
  output: {
    format: 'umd',
    file: 'dist/bundle.js'
  },
  plugins: [
    angular({
      // additional replace `templateUrl` and `stylesUrls` in every `.js` file
      // default: true
      replace: false, 
      preprocessors: {
        template: template => minifyHtml(template, htmlminOpts),
        style: scss => {
            const css = sass.renderSync({ data: scss }).css;
            return cssmin.minify(css).styles;
        },
      }
    })
    typescript(),
    nodeResolve({ jsnext: true, main: true })
  ]
}