0

I am trying to bundle my Angular2 app using RollupJS but I have been running into a few issues:

  1. The css file referenced by my AppComponent couldn't be found and throws an error.

Error transforming /demo-app.ts with 'angular' plugin: ENOENT: no such file or directory, open /demo-app.css

To fix this I wrote a gulp task to compile my scss files to css. But I was under the impression that Rollup was able to do this.

  1. An rxjs module is causing me errors.

Module /node_modules/rxjs/observable/of.js does not export of (imported by /@angular/router/src/apply_redirects.js)

I have tried to use rollup-plugin-alias and writing a specific resolveRxJS function to fix this but no luck.

const babel = require('rollup-plugin-babel');
const eslint = require('rollup-plugin-eslint');
const commonjs = require('rollup-plugin-commonjs');
const typescript = require('rollup-plugin-typescript');
const angular = require('rollup-plugin-angular');
const alias = require('rollup-plugin-alias');
const resolve = require('rollup-plugin-node-resolve');
const progress = require('rollup-plugin-progress');
const postcss = require('rollup-plugin-postcss');

export default {
    entry: 'src/demo-app/main.ts',
    dest: 'dist/demo-app/bundle.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
        {
            resolveRxJS: id => {
                if (id.startsWith('rxjs/') || id.startsWith('rxjs\\')) {
                    let result = `${__dirname}/node_modules/rxjs-es/${id.replace('rxjs/', '')}.js`;
                    return result.replace(/\//g, "\\");
                }
            }
        },
        angular(),
        typescript({
            typescript: require('typescript'),
            tsconfig: tsOptions
        }),
        //alias({
        //    rxjs: __dirname + '/node_modules/rxjs'
        //}),
        babel({
            exclude: '/node_modules/**',
            include: '/node_modules/tslint-no-unused-var/**',
            // include: '/node_modules/rxjs/**'
        }),
        resolve({
            module: true,
            jsnext: true
        }),
    ]
}

The commented out code is other things I have tried. note: I have also tried using preprocessors in the rollup-plugin-angular function which also didn't compile my css.

So to recap 1) do I always have to compile my scss files with gulp before running the rollup code? 2) How do I fix the rxjs module issue?

Thanks

BradBeighton
  • 83
  • 1
  • 9

2 Answers2

0

Check my working repo , aot build with rollup enabled, https://github.com/beginor/angular-seed

zhimin
  • 2,740
  • 12
  • 22
  • I actually get a similar error with your code: Unexpected token node_modules/rxjs/util/isArrayLike.js (2:78) this happens during the rollup code – – BradBeighton Feb 25 '17 at 22:04
  • I am sure my sample works, it maybe caused by some libraries. Does it works for you now? – zhimin Feb 27 '17 at 05:46
  • @BradBeighton It is caused by `rxjs:~5.2.0` , please use `rxjs:~5.1.1` – zhimin Feb 28 '17 at 06:49
0

I managed to get this working by adding the rollup-plugin-commonjs module and including the rxjs node_module library.

commonjs({
    include: 'node_modules/rxjs/**',
),
BradBeighton
  • 83
  • 1
  • 9