cebor / rollup-plugin-angular

Angular2 template and styles inliner

Hi there 👋

rollup-plugin-angular's Issues

SourceMap support

• Add magic-string

When use replace, and styleUrls have no content there is an error from rollup

module.id and the wrong template path

When I use module.id in my component angular plugin wants to load the template html from inside the component dir and the module.id dir and the resul is no such file or directory. It is correct, but how can I tell the plugin the correct path or the plugin can solve this module.id path somehow?

Is it possible to customize the template and styles folder?

I'm trying to create 2 different layouts with 2 different UI frameworks but they share the same ts file. The files are put in /ui/ui-A and /ui/ui-B, is it good to open an option which will allow loading html/style from given folder?

rollup cache is not invalidated when external templates or styles are edited

If I enable rollup's cache option then changes to html files and css files will be ignored until their component is edited. e.g. with the following gulpfile

var gulp = require('gulp');
var rollup = require('rollup').rollup;
var angular = require('rollup-plugin-angular');
var typescript = require('rollup-plugin-typescript');
var nodeResolve = require('rollup-plugin-node-resolve');
var commonjs = require('rollup-plugin-commonjs');

var rollUpBundle;
gulp.task('rollup', function () {
    var rollupConfig = {
        entry: 'src/app.component.ts',
        cache: rollUpBundle,
        plugins: [
            angular(),
            typescript(),
            nodeResolve({ jsnext: true, main: true }),
            commonjs({include: 'node_modules/rxjs/**'})]
    };

    return rollup(rollupConfig)
        .then(function (bundle) {
            rollUpBundle = bundle;

            return bundle.write({
                format: 'iife',
                dest: 'dist/app.js'
            });
        });
});

gulp.task('default', ['rollup'], function () {
    gulp.watch('src/**', ['rollup']);
});

and the following component

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: 'app.component.html'
})
class AppComponent {

}

editing app.component.html will not change the bundle that rollup outputs.

Attached is a minimal app that reproduces the issue
rollup-angular.zip

Reproduce by running

npm install
gulp

edit app.component.html and note that the changes are not added to the app.js bundle unless you edit app.component.ts

Template strings are not considered as a string in stringRegex

Given a template such as:

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'naics-lookup',
    templateUrl: 'naics-lookup.component.html',
    styleUrls: ['naics-lookup.component.css']
})
export class NaicsLookupComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

The plugin works fine. However, given the component:

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: `naics-lookup`,
    templateUrl: `naics-lookup.component.html`,
    styleUrls: [`naics-lookup.component.css`]
})
export class NaicsLookupComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

The plugin fails to recognize the backticks as strings.

ENOENT: no such file or directory, open node_modules\@angular\core\esm\src\animation\my-component-tpl.html

I am trying to get rollup to work with a simple site using Angular RC4, however I get this error:

Error transforming C:\GIT\tests\ng2-site\node_modules\@angular\core\esm\src\animation\metadata.js with 'angular' plugin: ENOENT: no such file or directory, open 'C:\GIT\tests\ng2-site\node_modules\@angular\core\esm\src\animation\my-component-tpl.html'
Error: Error transforming C:\GIT\tests\ng2-site\node_modules\@angular\core\esm\src\animation\metadata.js with 'angular' plugin: ENOENT: no such file or directory, open 'C:\GIT\tests\ng2-site\node_modules\@angular\core\esm\src\animation\my-component-tpl.html'
    at Error (native)
    at Object.fs.openSync (fs.js:640:18)
    at Object.fs.readFileSync (fs.js:508:33)
    at C:\GIT\tests\ng2-site\node_modules\rollup-plugin-angular\dist\rollup-plugin-angular.js:16:19
    at RegExp.[Symbol.replace] (native)
    at String.replace (native)
    at insertText (C:\GIT\tests\ng2-site\node_modules\rollup-plugin-angular\dist\rollup-plugin-angular.js:15:13)
    at C:\GIT\tests\ng2-site\node_modules\rollup-plugin-angular\dist\rollup-plugin-angular.js:37:34
    at RegExp.[Symbol.replace] (native)
    at String.replace (native)

My rollup config looks like this:

import angular from 'rollup-plugin-angular';
import nodeResolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript';

class RollupNG2 {
    constructor(options){
        this.options = options;
    }
    resolveId(id, from){
        if(id.startsWith("rxjs/")){
            return `${__dirname}/node_modules/rxjs-es/${id.replace("rxjs/", "")}.js`;
        }
    }
}
const rollupNG2 = (config) => new RollupNG2(config);

export default {
    entry: 'src/tmp/app/main.js',
    dest: 'src/tmp/app/bundle.js',

    format: 'iife',

    plugins: [
        rollupNG2(),
        angular(),
        nodeResolve({
            module: true,
            jsnext: true,
            main: true,
            skip: [],
            browser: true,
            extensions: ['.js'],
            preferBuiltins: false
        }),
        typescript()
    ]
};

And my entry file, compiled from TS to ES6:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { SDK_SAMPLE_PROVIDERS } from 'ng2-library';
if (ENV === 'production') {
    enableProdMode();
}
bootstrap(AppComponent, [
    disableDeprecatedForms(),
    provideForms(),
    APP_ROUTER_PROVIDERS,
    SDK_SAMPLE_PROVIDERS
]);

//# sourceMappingURL=main.js.map

The only mentions of my-component-tpl.html I can find are in comments in @angular/core (within animation).

Any idea what's going on here? Thanks.

options.exclude.includes is not a function

v0.2.4 seems to break bundling a very simple angular web application, only has app.module defined and one other @Injectable. Rolling back to v0.2.2 bundles the same application.

rollup -c rollup.config.js

TypeError: options.exclude.includes is not a function
at angular (/Users/steve/www/synth-iframe/node_modules/rollup-plugin-angular/dist/rollup-plugin-angular.js:31:24)
at Object. (/Users/steve/www/synth-iframe/rollup.config.js:18:5)
at Module._compile (module.js:413:34)
at Object.require.extensions..js (/Users/steve/.nvm/versions/node/v5.5.0/lib/node_modules/rollup/bin/rollup:729:8)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at /Users/steve/.nvm/versions/node/v5.5.0/lib/node_modules/rollup/bin/rollup:736:19
at process._tickCallback (node.js:401:9)

Rollup watch doesn't watch non-ts files

I'm using a default rollup configuration for develop an Angular 4+ library, but when I make a change to a .html, .scss or .css file, no event is raised for waking up the rollup-watch-plugin and so the building.

Plugin causes sourcemap error

When sourceMap is equal to true, the plugin generates a lot of warnings in console, however appears to still work. Thanks for the example, it got me up and running with Rollup! My project's build was failing due to 404 from missing html and css because this crucial piece that was missing.

export default {
  entry: 'src/main.ts',
  format: 'iife',
  dest: 'dist/bundle.es2015.js',
  sourceMap: true,
  plugins: [
    angular(),
    typescript(),
    alias({ rxjs: __dirname + '/node_modules/rxjs-es' }),
    resolve({ jsnext: true,
              main: true,
              browser: true }),
    replace({
      ENV: JSON.stringify(process.env.NODE_ENV || 'dev'),
    })
  ],

Here is the error :

Sourcemap is likely to be incorrect: a plugin ('angular') was used to transform files, but didn't generate a sourcemap for the transformation. Consult https://github.com/rollup/rollup/wiki/Troubleshooting and the plugin documentation for more information

ENOENT: no such file or directory

Hi,

(angular plugin) Error: ENOENT: no such file or directory, open '/package/markdown/node_modules/@angular/core/@anular/my-component-tpl.html'
../../markdown/node_modules/@angular/core/@angular/core.es5.js

I see that rollup-plugin-angular is trying to open files from commented fragments like for example from file core.es5.js

 * ```typescript
 * \@Component({
 *   selector: 'my-component',
 *   templateUrl: 'my-component-tpl.html',
 *   animations: [
 *     trigger("myAnimationTrigger", [
 *       state(...),
 *       state(...),
 *       transition(...),
 *       transition(...)
 *     ])
 *   ]
 * })
 * class MyComponent {
 *   myStatusExp = "something";
 * }
 * ```

When i remove all sentences with templateUrl from core.es5.js everything seems to be okay.

Is it possible to include the inlined html/css in the sourcemap?

I love to see all source artifacts in chrome devtools and it would be great if I could see the inlined html in the source-map. Any idea on how to achieve this?