upgrade to ng4 and angular-library-starter

.gitignore

@@ -50,4 +50,11 @@ typings
 
 src/ngFactory
 *.metadata.json
-dist
+
+$ cat .gitignore
+/node_modules
+/dist
+/documentation
+
+*.log
+*.tgz

.travis.yml

@@ -1,14 +1,23 @@
+sudo: required
+dist: trusty
+addons:
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
 language: node_js
-sudo: false
 node_js:
-- '5.9.1'
-
+  - stable
+before_install:
+  - npm i npm@^4 -g
 install:
-- npm install
-
-after_script: 
-- process.exit()
-
-cache:
-  directories:
-  - $HOME/.nvm
+  - npm install
+script:
+  - npm test
+before_script:
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+  - sleep 3
+notifications:
+  email: false

CHANGELOG.md

@@ -1,27 +1,13 @@
-## v 0.3.3 (2017/03/01) 
+## Angular library starter Changelog
 
-### Updates
-* reverted the fix of #126
+<a name="Mar 25, 2017"></a>
+### Mar 25, 2017
+* Upgrade to Angular 4 configuration
 
-## v 0.3.2 (2017/03/01) 
-
-### Updates
-* fixes [#126](https://github.com/orizens/angular2-infinite-scroll/issues/126)
-
-## v 0.3.1 (2017/02/15) 
-
-### Updates
-* added custom scrollable container from [#108](https://github.com/orizens/angular2-infinite-scroll/pull/108/files)
-
-## v 0.3.0 (2017/01/31) 
-
-### Updates
-* refactored infinite scroller to smaller modules with composition
-* added "models" - includes interfaces for development
-
-## v 0.2.9 (2017/01/13)
-
-### Updates
-* added changelog.md
-* ([refactor(scroll): replaces throttle with debounce](https://github.com/orizens/angular2-infinite-scroll/pull/82))
+<a name="Mar 6, 2017"></a>
+### Mar 6, 2017
+* Add _compodoc_ for generating documentation 
 
+<a name="Feb 5, 2017"></a>
+### Feb 5, 2017
+* Create library

Development Instructions.md

@@ -0,0 +1,161 @@
+# angular-library-starter
+[![Build Status](https://travis-ci.org/robisim74/angular-library-starter.svg?branch=master)](https://travis-ci.org/robisim74/angular-library-starter)
+>Build an Angular library compatible with AoT compilation & Tree shaking.
+
+This starter allows you to create a library for **Angular 2+** apps written in _TypeScript_, _ES6_ or _ES5_. 
+The project is based on the official _Angular_ packages.
+
+Get the [Changelog](https://github.com/robisim74/angular-library-starter/blob/master/CHANGELOG.md).
+
+## Contents
+* [1 Project structure](#1)
+* [2 Customizing](#2)
+* [3 Unit testing](#3)
+* [4 Building](#4)
+* [5 Publishing](#5)
+* [6 Documentation](#6)
+* [7 Using the library](#7)
+* [8 What it is important to know](#8)
+
+## <a name="1"></a>1 Project structure
+- Library:
+    - **src** folder for the classes
+    - **public_api.ts** entry point for all public APIs of the package
+    - **package.json** _npm_ options
+    - **rollup.config.js** _Rollup_ configuration for building the bundles
+    - **tsconfig-build.json** _ngc_ compiler options for _AoT compilation_
+    - **build.js** building process using _ShellJS_
+- Unit testing:
+    - **tests** folder for unit tests
+    - **karma.conf.js** _Karma_ configuration that uses _webpack_ to build the tests
+    - **spec.bundle.js** defines the files used by _webpack_
+    - **tsconfig.json** _TypeScript_ compiler options
+- Extra:
+    - **tslint.json** _TypeScript_ linter rules with _Codelyzer_
+    - **travis.yml** _Travis CI_ configuration
+
+## <a name="2"></a>2 Customizing
+1. Update [Node & npm](https://docs.npmjs.com/getting-started/installing-node).
+
+2. Rename `angular-library-starter` and `angularLibraryStarter` everywhere to `my-library` and `myLibrary`.
+
+3. Update in `package.json` file:
+    - version: [Semantic Versioning](http://semver.org/)
+    - description
+    - urls
+    - packages
+
+    and run `npm install`.
+
+4. Create your classes in `src` folder, and export public classes in `my-library.ts`.
+
+5. You can create only one _module_ for the whole library: 
+I suggest you create different _modules_ for different functions, 
+so that the user can import only those he needs and optimize _Tree shaking_ of his app.
+
+6. Update in `rollup.config.js` file `external` & `globals` libraries with those that actually you use.
+
+7. Create unit tests in `tests` folder. 
+_Karma_ is configured to use _webpack_ only for `*.ts` files: if you need to test different formats, you have to update it.
+
+## <a name="3"></a>3 Unit testing
+```Shell
+npm test 
+```
+
+## <a name="4"></a>4 Building
+The following command:
+```Shell
+npm run build
+```
+- starts _TSLint_ with _Codelyzer_
+- starts _AoT compilation_ using _ngc_ compiler
+- creates `dist` folder with all the files of distribution
+
+To test locally the npm package:
+```Shell
+npm run pack-lib
+```
+Then you can install it in an app to test it:
+```Shell
+npm install [path]my-library-[version].tgz
+```
+
+## <a name="5"></a>5 Publishing
+Before publishing the first time:
+- you can register your library on [Travis CI](https://travis-ci.org/): you have already configured `.travis.yml` file
+- you must have a user on the _npm_ registry: [Publishing npm packages](https://docs.npmjs.com/getting-started/publishing-npm-packages)
+
+```Shell
+npm run publish-lib
+```
+
+## <a name="6"></a>6 Documentation
+To generate the documentation, this starter uses [compodoc](https://github.com/compodoc/compodoc):
+```Shell
+npm run compodoc
+npm run compodoc-serve 
+```
+
+## <a name="7"></a>7 Using the library
+### Installing
+```Shell
+npm install my-library --save 
+```
+### Loading
+#### Using SystemJS configuration
+```JavaScript
+System.config({
+    map: {
+        'my-library': 'node_modules/my-library/bundles/my-library.umd.js'
+    }
+});
+```
+#### Angular-CLI
+No need to set up anything, just import it in your code.
+#### Rollup or webpack
+No need to set up anything, just import it in your code.
+#### Plain JavaScript
+Include the `umd` bundle in your `index.html`:
+```Html
+<script src="node_modules/my-library/bundles/my-library.umd.js"></script>
+```
+and use global `ng.myLibrary` namespace.
+
+### AoT compilation
+The library is compatible with _AoT compilation_.
+
+## <a name="8"></a>8 What it is important to know
+1. `package.json`
+
+    * `"main": "./bundles/angular-library-starter.umd.js"` legacy module format 
+    * `"module": "./bundles/angular-library-starter.es5.js"` flat _ES_ module, for using module bundlers such as _Rollup_ or _webpack_: 
+    [package module](https://github.com/rollup/rollup/wiki/pkg.module)
+    * `"es2015": "./bundles/angular-library-starter.js"` _ES2015_ flat _ESM_ format, experimental _ES2015_ build
+    * `"peerDependencies"` the packages and their versions required by the library when it will be installed
+
+2. `tsconfig-build.json` file used by _ngc_ compiler
+
+    * Compiler options:
+        * `"declaration": true` to emit _TypeScript_ declaration files
+        * `"module": "es2015"` & `"target": "es2015"` are used by _Rollup_ to create the _ES2015_ bundle
+
+    * Angular Compiler Options:
+        * `"skipTemplateCodegen": true,` skips generating _AoT_ files
+        * `"annotateForClosureCompiler": true` for compatibility with _Google Closure compiler_
+        * `"strictMetadataEmit": true` without emitting metadata files, the library will not compatible with _AoT compilation_
+
+3. `rollup.config.js` file used by _Rollup_
+
+    * `format: 'umd'` the _Universal Module Definition_ pattern is used by _Angular_ for its bundles
+    * `moduleName: 'ng.angularLibraryStarter'` defines the global namespace used by _JavaScript_ apps
+    * `external` & `globals` declare the external packages
+
+4. Server-side prerendering
+
+    If you want the library will be compatible with server-side prerendering:
+    * `window`, `document`, `navigator` and other browser types do not exist on the server
+    * don't manipulate the _nativeElement_ directly
+
+## License
+MIT

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 Oren Farhi
+Copyright (c) 2017 Roberto Simonetti
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -4,7 +4,7 @@
 Inspired by [ng-infinite-scroll](https://github.com/sroze/ngInfiniteScroll) directive for angular (> 2).
 
 ## Angular Support
-Supports in Angular - **Final - 2.x.x**
+Supports in Angular **> +2, 4**
 
 ## Angular Consulting Services
 I'm a Senior Javascript Engineer & A Front End Consultant at [Orizens](http://orizens.com).
@@ -144,15 +144,5 @@ export class AppComponent {
 }
 ```
 
-## Testing
-To start developing tdd/bdd style: ```npm run dev```
-This will: compile ts files, watch for changes and start the test task. Whenever a ts file is changed, it will rerun the tests.
-
-Travis-ci is integrated
-
-### Credits For Tests Setup
-[ng2-test-seed](https://github.com/juliemr/ng2-test-seed) has been a huge help and source of inspiration. At first, copy & paste, then, customisation to adapt to this code repository.
-Thanks [@juliemr](https://github.com/juliemr)!
-
 # Showcase Examples
 * [Echoes Player Ng2 Version](http://orizens.github.io/echoes-ng2) ([github repo for echoes player](http://github.com/orizens/echoes-ng2))

build.js

@@ -0,0 +1,61 @@
+"use strict";
+
+require('shelljs/global');
+const chalk = require('chalk');
+
+const PACKAGE = `ngx-infinite-scroll`;
+const NPM_DIR = `dist`;
+const MODULES_DIR = `${NPM_DIR}/modules`;
+const BUNDLES_DIR = `${NPM_DIR}/bundles`;
+
+echo('Start building...');
+
+rm(`-Rf`, `${NPM_DIR}/*`);
+mkdir(`-p`, `./${MODULES_DIR}`);
+mkdir(`-p`, `./${BUNDLES_DIR}`);
+
+/* TSLint with Codelyzer */
+// https://github.com/palantir/tslint/blob/master/src/configs/recommended.ts
+// https://github.com/mgechev/codelyzer
+echo(`Start TSLint`);
+exec(`tslint --project ./tsconfig.json --type-check ./src/**/*.ts`);
+echo(chalk.green(`TSLint completed`));
+
+/* Aot compilation: ES2015 sources */
+echo(`Start AoT compilation`);
+exec(`ngc -p tsconfig-build.json`);
+echo(chalk.green(`AoT compilation completed`));
+
+/* Creates bundles: ESM/ES5 and UMD bundles */
+echo(`Start bundling`);
+echo(`Rollup package`);
+exec(`rollup -i ${NPM_DIR}/index.js -o ${MODULES_DIR}/${PACKAGE}.js --sourcemap`, {silent: true});
+exec(`node scripts/map-sources -f ${MODULES_DIR}/${PACKAGE}.js`);
+
+echo(`Downleveling ES2015 to ESM/ES5`);
+cp(`${MODULES_DIR}/${PACKAGE}.js`, `${MODULES_DIR}/${PACKAGE}.es5.ts`);
+exec(`tsc ${MODULES_DIR}/${PACKAGE}.es5.ts --target es5 --module es2015 --noLib --sourceMap`, {silent: true});
+exec(`node scripts/map-sources -f ${MODULES_DIR}/${PACKAGE}.es5.js`);
+rm(`-f`, `${MODULES_DIR}/${PACKAGE}.es5.ts`);
+
+echo(`Run Rollup conversion on package`);
+exec(`rollup -c rollup.config.js --sourcemap`, {silent: true});
+exec(`node scripts/map-sources -f ${BUNDLES_DIR}/${PACKAGE}.umd.js`);
+
+echo(`Minifying`);
+cd(`${BUNDLES_DIR}`);
+exec(`uglifyjs -c --screw-ie8 --comments -o ${PACKAGE}.umd.min.js --source-map ${PACKAGE}.umd.min.js.map --source-map-include-sources ${PACKAGE}.umd.js`, {silent: true});
+exec(`node ../../scripts/map-sources -f ${PACKAGE}.umd.min.js`);
+cd(`..`);
+cd(`..`);
+
+echo(chalk.green(`Bundling completed`));
+
+rm(`-Rf`, `${NPM_DIR}/*.js`);
+rm(`-Rf`, `${NPM_DIR}/*.js.map`);
+rm(`-Rf`, `${NPM_DIR}/src/**/*.js`);
+rm(`-Rf`, `${NPM_DIR}/src/**/*.js.map`);
+
+cp(`-Rf`, [`package.json`, `LICENSE`, `README.md`], `${NPM_DIR}`);
+
+echo(chalk.green(`End building`));