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?