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 }) ] }