How to: use javascript library with Angular2 + Rollup ?

[samikhaled]

I want to use leaflet library in this project

when I use:
npm run roll

I have an error like:
'TileLayer' does not exist on type 'typeof L'

[jkuri]

does that also happen when running npm run serve?

[nedhsieh]

I want to use "angular2-cookie 1.2.4" in this project.

when I use: "npm run serve"

I have an Compile error :
Compile error: Error: 'CookieService' is not exported by node_modules\angular2-cookie\services\cookies.service.js

[jkuri]

@nedhsieh I think for that specific example the best way would be to import it like
import { CookieService } from 'angular2-cookie/src/cookies.service'

[nedhsieh]

@jkuri thinks response. it's work on "angular2-cookie 1.2.4".

but when i use "angular2-jwt 0.1.24", have a same error.

and i mandatory point to "angular2-jwt.ts", have another err：

'Base64' is not exported by node_modules\js-base64\base64.js

[playground]

I'm getting these errors when npm run roll & npm run roll:prerender

▁ Building...✖ Compile error: Error: Error encountered resolving symbol values statically. Could not resolve events relative to /Users/ljeff/git_repo/sandbox/angular/angular-rollup-starter/node_modules/@types/chokidar/index.d.ts., resolving symbol FSWatcher in /Users/ljeff/git_repo/sandbox/angular/angular-rollup-starter/node_modules/@types/chokidar/index.d.ts

And will you be upgrading this to angular 4?

[jkuri]

hi, just remove @types/chokidar and it should work

[playground]

removing @types/chokida and/or "chokidar": "^1.6.1",

▁ Building...✖ Compile error: Error: Error at /Users/ljeff/git_repo/sandbox/angular/angular-rollup-starter/node_modules/@types/browser-sync/index.d.ts:6:1: Cannot find type definition file for 'chokidar'.
Error at /Users/ljeff/git_repo/sandbox/angular/angular-rollup-starter/node_modules/@types/lodash/index.d.ts:12898:29: Cannot find name 'object'.
Error at /Users/ljeff/git_repo/sandbox/angular/angular-rollup-starter/node_modules/@types/lodash/index.d.ts:19638:15: All declarations of 'WeakMap' must have identical type parameters.
Error at /Users/ljeff/git_repo/sandbox/angular/angular-rollup-starter/node_modules/@types/lodash/index.d.ts:19638:33: Cannot find name 'object'.

[jkuri]

it works for me with a fresh npm install.

[playground]

hmm. I have done that several times. Same errors. I think this will work great with my next project if I can get it running with Angular 4. Can you help me get it set up?

[jkuri]

oh you are running with Angular 4... sorry never tried that. I personally switch to @ngtools/webpack while ago, recommend you to do so too. there was a time when rollup was faster but that does not stands true at this point.
if you are looking for Angular 4 Universal seed, feel free to check this out: https://github.com/bleenco/angular-webpack-seed.

[playground]

Thanks @jkur, I'm looking at https://github.com/bleenco/angular-webpack-seed, I ran npm run build:prod, can you explains what 0.app.bundle.js, 0.server.js & server.js are for since the app will run with just app.bundle.js?

[jkuri]

its the sample lazy route.