Import 3rd Party Library: Pikaday Datepicker with no dependencies

[bryanpyle]

OSX El Capitan
angular-cli: 1.0.0-beta.8
node: 6.2.2
os: darwin x64

Pikaday is a simple datepicker that uses only JavaScript and CSS. No other dependencies are necessary. The import process seems nearly identical to the tutorial for Underscore.

Here is my repo

I created my project using the angular-cli and added a single component called PikadayComponent then made sure it was connected properly to app.component.

I followed the steps from the underscore tutorial for both pikaday and underscore:

1. Install pikaday via npm
npm install pikaday --save
npm install underscore --save

1a. Install typings for library
typings install dt~pikaday --global --save
typings install dt~underscore --global --save

2. Add pikaday to angular-cli-build.js file to vendorNpmFiles array

//angular-cli-build.js
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      'pikaday/pikaday.js',
      'underscore/underscore.js',
      '@angular/**/*.+(js|js.map)'
    ]
  });
};

3. Configure SystemJS mappings to know where to look for pikaday

//system-config.ts
/** Map relative paths to URLs. */
const map: any = {
  'pikaday': 'vendor/pikaday/pikaday.js',
  'underscore': 'vendor/underscore/underscore.js'
};

/** User packages configuration. */
const packages: any = {
  'pikaday':{
    format: 'cjs'
  },
  'underscore':{
    format:'cjs'
  }
};

4. Importing and using underscore library in your project source files

//pikaday.component.ts

import { Component } from '@angular/core';

//Place this at the top near your imports
/// <reference path="../../../typings/globals/pikaday/index.d.ts" />
declare var Pikaday; //unsure how to initialized with properties set

/// <reference path="../../../typings/globals/underscore/index.d.ts" />
declare var _;


@Component({
  moduleId: module.id,
  selector: 'app-pikaday',
  templateUrl: 'pikaday.component.html',
  styleUrls: ['pikaday.component.css']
})

export class PikadayComponent {
  _.each([1,2,3], alert);
}

When looking at underscore's index.d.ts file, the very bottom exports _. So I figured the exported variable is what I should use in the declare var statement. The export at the bottom of pikaday's index.d.ts file was Pikaday, so that's what I used: declare var Pikaday;

Problem
When I ng serve the project I get the following error report:

Error: Typescript found the following errors:
  /Users/admin/Documents/draganddroptest/tmp/broccoli_type_script_compiler-input_base_path-k5E2q9gv.tmp/0/src/app/pikaday/pikaday.component.ts (20, 4): ';' expected.
  /Users/admin/Documents/draganddroptest/tmp/broccoli_type_script_compiler-input_base_path-k5E2q9gv.tmp/0/src/app/pikaday/pikaday.component.ts (20, 11): Array element destructuring pattern expected.
  /Users/admin/Documents/draganddroptest/tmp/broccoli_type_script_compiler-input_base_path-k5E2q9gv.tmp/0/src/app/pikaday/pikaday.component.ts (20, 13): Parameter declaration expected.
  /Users/admin/Documents/draganddroptest/tmp/broccoli_type_script_compiler-input_base_path-k5E2q9gv.tmp/0/src/app/pikaday/pikaday.component.ts (20, 14): ';' expected.
  /Users/admin/Documents/draganddroptest/tmp/broccoli_type_script_compiler-input_base_path-k5E2q9gv.tmp/0/src/app/pikaday/pikaday.component.ts (20, 16): ';' expected.
  /Users/admin/Documents/draganddroptest/tmp/broccoli_type_script_compiler-input_base_path-k5E2q9gv.tmp/0/src/app/pikaday/pikaday.component.ts (20, 17): Unexpected token. A constructor, method, accessor, or property was expected.
  /Users/admin/Documents/draganddroptest/tmp/broccoli_type_script_compiler-input_base_path-k5E2q9gv.tmp/0/src/app/pikaday/pikaday.component.ts (20, 24): ';' expected.
  /Users/admin/Documents/draganddroptest/tmp/broccoli_type_script_compiler-input_base_path-k5E2q9gv.tmp/0/src/app/pikaday/pikaday.component.ts (20, 10): A parameter initializer is only allowed in a function or constructor implementation.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/admin/Documents/draganddroptest/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (/Users/admin/Documents/draganddroptest/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /Users/admin/Documents/draganddroptest/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/Users/admin/Documents/draganddroptest/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/admin/Documents/draganddroptest/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/Users/admin/Documents/draganddroptest/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/Users/admin/Documents/draganddroptest/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Nothing is printed in the console.

Another Question
For pikaday, It seems that I must declare it with the field property set to an input element. See Here.
Given that underscore is declared like declare var _; how would I include field for declare var Pikaday?

Any help or insight would be great.

[MarkStruik]

you could just import the type like you do with 'Component' and than use something like ->

---

import { Pikaday } from 'picaday'

/and then maybe in the constructor of the class add your references.
* From documentation of the linke provided **
*/
var picker = new Pikaday({
field: document.getElementById('datepicker'),
format: 'D MMM YYYY',
onSelect: function() {
console.log(this.getMoment().format('Do MMMM YYYY'));
}
});

---

above is not tested by me. and i guess you should add something like input binding or something for the element you bind to the 'field'.

Hope this helps you a bit

[saransh94]

did the above solution work?

[bryanpyle]

The above solution did not work. The issue is that the cli is not staying up to date with typings. In the readme, it says it is using typings v1.0.0 or greater. But the package.json shows it's using typings v0.8.1. There was a pretty important change between these two versions: v1.0.0 uses the keyword global in it's typings.json. v0.8.1 uses ambient instead. So everytime I use typings install, it references it incorrectly. I have tried different combinations of the typings cli and typings dependency, but I can't get it to work on the Ang-cli. I gave up and just started using the quickstart guide. The Quickstart Repo has updated its package.json to the most recent versions of all dependencies. It is a little more tedious to set up, but it is working for me so far. Also look into Module Resolution on TypeScripts website.

[MarkStruik]

You could try the 'tsd' instead of 'typings' ?

Met vriendelijke groet,

Mark Struik

Op 19 jul. 2016 om 19:12 heeft bpyle0092 notifications@github.com het volgende geschreven:

The above solution did not work. The issue is that the cli is not staying up to date with typings. In the readme, it says it is using typings v1.0.0 or greater. But the package.json shows it's using typings v0.8.1. There was a pretty important change between these two versions: v1.0.0 uses the keyword global in it's typings.json. v0.8.1 uses ambient instead. So everytime I use typings install, it references it incorrectly. I have tried different combinations of the typings cli and typings dependency, but I can't get it to work on the Ang-cli. I gave up and just started using the quickstart guide. The Quickstart Repo has updated its package.json to the most recent versions of all dependencies. It is a little more tedious to set up, but it is working for me so far. Also look into Module Resolution on TypeScripts website.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[saransh94]

What I did is, I added the pikaday module in angular-cli.build file, system-config file and gave the path of the module in index.html file (explicitly including the css paths in the html file). Once you have these things in place, you can globally use the pikaday module.

[bryanpyle]

@saransh94 Do you have a gist or example repo? Did you actually get it to work? I would like to see it.

[saransh94]

@bpyle0092 The project I'm working on is confidential. But I can definitely assist you on your project, just do the above steps and let me know. I'll take a look at it and will modify it if needed.

[bryanpyle]

I really appreciate the help. But part of the issue I'm having is how exactly to add the modules to certain files. Could you be more specific? For example:

"In angular-cli.build file in vendorNpmFiles add pikaday/**/*.+(js|js.map) "

And then to use globally do I just import 'pikaday'; ?

[filipesilva]

Closed as issue was made obsolete by #1455. You should be able to just import it on the next release, and get typings out of @types/*.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}