Changes for ng-packagr

README.md

@@ -59,12 +59,12 @@ The html template packaged with this component is based on Bootstap 3; however i
 
 ```typescript
 import { Component } from '@angular/core';
-import { DualListComponent } from 'angular-dual-listbox/dual-list.component';
+import { DualListComponent } from 'angular-dual-listbox';
 
 @Component({
     selector: 'custom-dual-list',
     templateUrl: './custom-dual-list.component.html',
-    styleUrls: [ './custom-dual-list.component.css' ]
+    styleUrls: [ './custom-dual-list.component.scss' ]
 })
 export class CustomDualListComponent extends DualListComponent {
 }

demo/systemjs.config.js

@@ -7,14 +7,14 @@
     'app':  'app', // 'dist',
     'rxjs': 'https://unpkg.com/rxjs@5.5.2',
     '@angular': 'https://unpkg.com/@angular',
-    'angular-dual-listbox': 'lib'
+    'angular-dual-listbox': 'lib/src'
   };
 
   // packages tells the System loader how to load when no filename and/or no extension
   var packages = {
     'app':  { main: 'main.ts',  defaultExtension: 'ts' },
     'rxjs': { defaultExtension: 'js' },
-    'angular-dual-listbox': { main: 'index.ts', defaultExtension: 'ts' }
+    'angular-dual-listbox': { main: '../index.ts', defaultExtension: 'ts' }
   };
 
   var ngPackageNames = [
@@ -39,7 +39,14 @@
 //	transpiler: 'typescript',
 	transpiler: 'ts',
     typescriptOptions: {
-      emitDecoratorMetadata: true
+      emitDecoratorMetadata: true,
+      experimentalDecorators: true,
+      module: "commonjs",
+    },
+    meta: {
+      'typescript': {
+        "exports": "ts"
+      }
     },
     map: map,
     packages: packages

lib/index.ts

@@ -1,3 +1,3 @@
-export * from './basic-list';
-export * from './dual-list.component';
-export * from './angular-dual-listbox.module';
+export * from './src/basic-list';
+export * from './src/dual-list.component';
+export * from './src/angular-dual-listbox.module';

lib/package.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "../../node_modules/ng-packagr/package.schema.json",
+  "name": "angular-dual-listbox",
+  "description": "Angular 4+ component for a dual listbox control.",
+  "version": "4.6.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/czeckd/angular-dual-listbox.git"
+  },
+  "bugs": {
+    "url": "https://github.com/czeckd/angular-dual-listbox/issues"
+  },
+  "author": "David Czeck",
+  "license": "MIT",
+  "keywords": [
+    "angular",
+    "listbox"
+  ],
+  "peerDependencies": {
+    "@angular/core": ">=4.0.0",
+    "@angular/forms": ">=4.0.0"
+  },
+  "ngPackage": {
+    "lib": {
+      "entryFile": "index.ts"
+    },
+    "dest": "dist"
+  }
+}

lib/src/dual-list.component.ts

@@ -3,14 +3,19 @@ import { Component, DoCheck, EventEmitter, Input, IterableDiffers, OnChanges,
 
 import { BasicList } from './basic-list';
 
+// Kludge to make work relative paths with both webpack for distribution builds
+// and SystemJS for gh_pages transpiled demo.
+var __moduleName:string;
+
 export type compareFunction = (a:any, b:any) => number;
 
 var nextId = 0;
 
 @Component({
+	moduleId: __moduleName,
 	selector: 'dual-list',
-	styleUrls: [ 'lib/dual-list.component.css' ],
-	templateUrl: 'lib/dual-list.component.html'
+	templateUrl: './dual-list.component.html',
+	styleUrls: [ './dual-list.component.css' ]
 })
 
 export class DualListComponent implements DoCheck, OnChanges {
@@ -20,7 +25,14 @@ export class DualListComponent implements DoCheck, OnChanges {
 	static LTR = 'left-to-right';
 	static RTL = 'right-to-left';
 
-	static DEFAULT_FORMAT = { add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: DualListComponent.LTR, draggable: true };
+	static DEFAULT_FORMAT = {
+		add: 'Add',
+		remove: 'Remove',
+		all: 'All',
+		none: 'None',
+		direction: DualListComponent.LTR,
+		draggable: true
+	};
 
 	@Input() id = `dual-list-${nextId++}`;
 	@Input() key = '_id';