rollup/rollup-plugin-typescript

Interface Export Throws Error

silentsod opened this issue · 4 comments

Hello, if I declare an interface and import it for use (implementation is done elsewhere) I receive an error that the module where the interface is declared does not export the interface when I run my rollup.
Module C:/Project/app/shared/search-modal.service.ts does not export ISearchModalService (imp
orted by C:/Project/app/shared/search-modal.component.ts)

I was unable to find any issue related to this in the plugin issues or on Stack Overflow, forgive me if this was the wrong location to make this. I know that interfaces are development time only and not concrete, and I would like to be able to leverage their usefulness in separating declaration and implementation and gain the benefits of using rollup to bundle my code for deployment. Worst case scenario, I suppose I make my interfaces classes and override them.

search-modal.service.ts:

import { ColumnDefinition } from "./column-definition";
import { Observable } from "rxjs/Observable";

export interface ISearchModalService {
    searchUrl: string;
    search(searchTerm: string, page?: number): Observable<any>;
    filterName: string;
    includePaging: boolean;
}

search-modal.component.ts pertinent line:
import { ISearchModalService } from "./search-modal.service";

tsconfig:

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules", "typings"
  ] 
}

rollup config file:

// rollup.config.js
import typescript from 'rollup-plugin-typescript';
import commonjs from 'rollup-plugin-commonjs';

// Custom Rollup Plugin to resolve rxjs deps
// Thanks to https://github.com/IgorMinar/new-world-test/blob/master/es6-or-ts-bundle/rollup.config.js
class RollupNG2 {
    constructor(options){
        this.options = options;
    }
    resolveId(id, from){
        if(id.startsWith('rxjs/')){
            return `${__dirname}/node_modules/rxjs/${id.replace('rxjs/', '')}.js`;
        }
    }
}
const rollupNG2 = (config) => new RollupNG2(config);

export default {
    entry: 'Areas/Epd/app/main.ts',
    dest: 'dist/bundle.es2015.js',
    format: 'iife',
    sourceMap: true,

    plugins: [
        typescript(),
  rollupNG2(),
  commonjs({ // https://github.com/rollup/rollup-plugin-commonjs
      exclude: ['node_modules/@angular/**', 'node_modules/rxjs', 'node_modules/@ng-bootstrap/**'],
      ignoreGlobal: false,
      sourceMap: false
  })
],
 // This is how you exclude code from the bundle
external: [
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/core',
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@ng-bootstrap/ng-bootstrap',
  'angular2-toaster', 'ng2-toastr'
],
// This is how you link the referenced module ids to the
// global variables exposed by the vendor bundle.
globals: {
    '@angular/core': 'vendor._angular_core',
    '@angular/http': 'vendor._angular_http',
    '@angular/platform-browser-dynamic': 
    'vendor._angular_platformBrowserDynamic',
}
}

Given that interfaces are a TypeScript feature I am wondering if either my set up in the rollup config is incorrect or if this is simply missing from the plugin.

This is probably a bug with this plugin. Is there any way to use TypeScript language service to remove references to interface imports?

I have encountered the same problem bundling with Rx.js. You can try to use the ES6 build file from dist/es6/%file%.js instead of src/%file%.ts.

I'm afraid this is a known issue with no good solution ATM. See #2.

@Victorystick is this and the one I just referenced from ionic0 interrelated?