[RELEASE] - v0.0.5 - Angular 5, examples and refactor

.travis.yml

@@ -8,7 +8,7 @@ addons:
       - google-chrome-stable
 language: node_js
 node_js:
-  - stable
+  - "8"
 before_install:
   - npm i npm@^4 -g
 install:

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v 0.0.5 (2017/12/24)
+* [UPGRADE] - now using Angular 5 
+* [CHANGE] - result container now is with 'position: absolute' by default 
+
 ## v 0.0.4 (2017/11/05)
 * Replaced deprecated ngOutletContext by ngTemplateOutletContext to support Angular version 5.
 * Added taItemTpl example to Readme

README.md

@@ -6,7 +6,9 @@ Its built with **JSONP** support by default.
 Additional remote sources are soon to come.  
 
 ## Angular Support
-Supports Angular **> 4**  
+For **Angular 4.3** (With the new **HttpClient**)- please use version 0.4  
+For **Angular 2, 4** (Without **HttpClient**)- please use version 0.3    
+
 AOT compatible  
 
 ## Angular Consulting Services

build.js

@@ -1,61 +1,73 @@
 "use strict";
 
-require('shelljs/global');
+const shell = require('shelljs');
 const chalk = require('chalk');
 
 const PACKAGE = `ngx-typeahead`;
 const NPM_DIR = `dist`;
-const MODULES_DIR = `${NPM_DIR}/modules`;
+const ESM2015_DIR = `${NPM_DIR}/esm2015`;
+const ESM5_DIR = `${NPM_DIR}/esm5`;
 const BUNDLES_DIR = `${NPM_DIR}/bundles`;
+const OUT_DIR_ESM5 = `${NPM_DIR}/package/esm5`;
 
-echo('Start building...');
+shell.echo(`Start building...`);
 
-rm(`-Rf`, `${NPM_DIR}/*`);
-mkdir(`-p`, `./${MODULES_DIR}`);
-mkdir(`-p`, `./${BUNDLES_DIR}`);
+shell.rm(`-Rf`, `${NPM_DIR}/*`);
+shell.mkdir(`-p`, `./${ESM2015_DIR}`);
+shell.mkdir(`-p`, `./${ESM5_DIR}`);
+shell.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`));
+shell.echo(`Start TSLint`);
+shell.exec(`tslint -c tslint.json -t stylish src/**/*.ts`);
+shell.echo(chalk.green(`TSLint completed`));
+
+/* AoT compilation */
+shell.echo(`Start AoT compilation`);
+if (shell.exec(`ngc -p tsconfig-build.json`).code !== 0) {
+  shell.echo(chalk.red(`Error: AoT compilation failed`));
+  shell.exit(1);
+}
+shell.echo(chalk.green(`AoT compilation completed`));
+
+/* BUNDLING PACKAGE */
+shell.echo(`Start bundling`);
+shell.echo(`Rollup package`);
+if (shell.exec(`rollup -c rollup.es.config.js -i ${NPM_DIR}/${PACKAGE}.js -o ${ESM2015_DIR}/${PACKAGE}.js`).code !== 0) {
+  shell.echo(chalk.red(`Error: Rollup package failed`));
+  shell.exit(1);
+}
+
+shell.echo(`Produce ESM5 version`);
+shell.exec(`ngc -p tsconfig-build.json --target es5 -d false --outDir ${OUT_DIR_ESM5} --importHelpers true --sourceMap`);
+if (shell.exec(`rollup -c rollup.es.config.js -i ${OUT_DIR_ESM5}/${PACKAGE}.js -o ${ESM5_DIR}/${PACKAGE}.js`).code !== 0) {
+  shell.echo(chalk.red(`Error: ESM5 version failed`));
+  shell.exit(1);
+}
+
+shell.echo(`Run Rollup conversion on package`);
+if (shell.exec(`rollup -c rollup.config.js -i ${ESM5_DIR}/${PACKAGE}.js -o ${BUNDLES_DIR}/${PACKAGE}.umd.js`).code !== 0) {
+  shell.echo(chalk.red(`Error: Rollup conversion failed`));
+  shell.exit(1);
+}
+
+shell.echo(`Minifying`);
+shell.cd(`${BUNDLES_DIR}`);
+shell.exec(`uglifyjs ${PACKAGE}.umd.js -c --comments -o ${PACKAGE}.umd.min.js --source-map "filename='${PACKAGE}.umd.min.js.map', includeSources"`);
+shell.cd(`..`);
+shell.cd(`..`);
+
+shell.echo(chalk.green(`Bundling completed`));
+
+shell.rm(`-Rf`, `${NPM_DIR}/package`);
+shell.rm(`-Rf`, `${NPM_DIR}/node_modules`);
+shell.rm(`-Rf`, `${NPM_DIR}/*.js`);
+shell.rm(`-Rf`, `${NPM_DIR}/*.js.map`);
+shell.rm(`-Rf`, `${NPM_DIR}/src/**/*.js`);
+shell.rm(`-Rf`, `${NPM_DIR}/src/**/*.js.map`);
+
+shell.cp(`-Rf`, [`package.json`, `LICENSE`, `README.md`], `${NPM_DIR}`);
+
+shell.echo(chalk.green(`End building`));

example/README.md

@@ -0,0 +1,27 @@
+# Echoes
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.1.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

example/e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('echoes App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  });
+});

example/e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

example/e2e/tsconfig.e2e.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

example/karma.conf.js

@@ -0,0 +1,33 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

example/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "echoes",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --prod",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "privatce": true,
+  "dependencies": {
+    "@angular/animations": "^5.0.0",
+    "@angular/common": "^5.0.0",
+    "@angular/compiler": "^5.0.0",
+    "@angular/core": "^5.0.0",
+    "@angular/forms": "^5.0.0",
+    "@angular/http": "^5.0.0",
+    "@angular/platform-browser": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^5.0.0",
+    "@angular/router": "^5.0.0",
+    "core-js": "^2.4.1",
+    "ngx-tester": "file:../angular-library-starter/ngx-tester-0.0.1.tgz",
+    "ngx-typeahead": "file:../../ngx-typeahead/ngx-typeahead-0.0.45.tgz",
+    "rxjs": "^5.5.2",
+    "zone.js": "^0.8.14"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.6.1",
+    "@angular/compiler-cli": "^5.0.0",
+    "@angular/language-service": "^5.0.0",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "^4.0.1",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.7.0",
+    "typescript": "~2.4.2"
+  }
+}

example/protractor.conf.js

@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

example/src/app/app.component.html

@@ -0,0 +1,39 @@
+<!--The content below is only a placeholder and can be replaced.-->
+<div style="text-align:center">
+  <h1>
+    Welcome to {{ title }}!
+  </h1>
+  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+</div>
+<section>
+
+  <div class="search-results">
+    <input [value]="search" ngxTypeahead [taUrl]="url" [taParams]="params" (taSelected)="handleResultSelected($event)">
+  </div>
+
+</section>
+<h2>Here are some links to help you start: </h2>
+<ul>
+  <li>
+    <h2>
+      <a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a>
+    </h2>
+  </li>
+  <li>
+    <h2>
+      <a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a>
+    </h2>
+  </li>
+  <li>
+    <h2>
+      <a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a>
+    </h2>
+  </li>
+</ul>
+
+<h1>example using HTTP</h1>
+<section class="col-sm-12 custom">
+  <div class="search-results style-3">
+    <input type="text" [value]="query2" ngxTypeahead [taUrl]="url2" [taParams]="{}" [taApi]="http" (taSelected)="handleResult2Selected($event)">
+  </div>
+</section>