tomwayson / esri-angular-cli-example

Example of how to to use the ArcGIS API for JavaScript in an Angular CLI app
https://tomwayson.github.io/esri-angular-cli-example
29 stars 23 forks source link

Extract loader service #17

Closed tomwayson closed 7 years ago

tomwayson commented 7 years ago

Sweet lord this one almost killed me.

@jwasilgeo would very much appreciate your review (and @kgs916 if you're interested).

More importantly if you could pull this into clean folder and see if it works for you. I had to link/unlink and un/reinstall deps so many times in 3 different repos I have no way of knowing what I've pushed.

resolves #16

deployed to gh-pages: https://tomwayson.github.io/esri-angular-cli-example/

TLDR: NEVER, under ANY circumstances should you set "module": "umd", in tsconfig.json if you plan to consume the library w/ Angular 2 (CLI only?) and/or TS. There's 4hrs of my life I'll never get back.

tomwayson commented 7 years ago

also resolves #13

TheKeithStewart commented 7 years ago

@tomwayson One issue that I'm seeing with this is the dependency that the esri-loader-service package has on @types/core-js. @types/core-js is not getting installed when installing esri-loader-service on a clean project. I installed the loader service on a project I'm working on and got the following message when serving it:

ERROR in [default] C:\dev\tt_mapping\src\client\node_modules\angular2-esri-loader\src\esri-loader.service.d.ts:1:0
Cannot find type definition file for 'core-js'.
TheKeithStewart commented 7 years ago

If you switch @types/core-js to @types/es6-shim in the devDependencies for angular2-esri-loader the above issue seems to be resolved. @types/es6-shim comes with all of the things that you are getting from @types/core-js (i.e. Promise) and there are other dependencies on this typings library throughout Angular 2 so the package will most likely already exist in any project that uses this.

tomwayson commented 7 years ago

Thanks @kgs916, I really appreciate your help with this. I've been struggling to find out how to do this correctly. I tried your suggestion, but now I see this in ng serve's webpack output:

ERROR in [default] /Users/tom6947/code/angular-cli-esri/node_modules/angular2-esri-loader/src/esri-loader.service.d.ts:1:0 
Cannot find type definition file for 'es6-shim'.

A also see this in the site's console:

/code/angular-cli-esri/node_modules/angular2-esri-loader/src/esri-loader.service.d.ts:1:0 
Cannot find type definition file for 'es6-shim'.

I'm really at a loss here and having a hard time finding up to date guidance on this kind of thing for Angular2 library authors.

tomwayson commented 7 years ago

Maybe I just need to include "core-js": "^2.4.1", as a (dev)? dependency of angular2-ersi-loader instead of the types?

tomwayson commented 7 years ago

Nope - that doesn't work.

This is why I can't stand TypeScript.

tomwayson commented 7 years ago

OK, I think it is that I have to make @types/core-js a dep, not a dev dep... testing.

TheKeithStewart commented 7 years ago

I think if you do that you could potentially run into some issue with there being duplicate type definitions because many projects (I know this would be the case in some of mine) the es6-shim library is doing the same thing. If you don't find a solution I can take another look at it tomorrow.

On Wed, Nov 23, 2016 at 3:42 PM Tom Wayson notifications@github.com wrote:

OK, I think it is that I have to make @types/core-js a dep, not a dev dep... testing.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tomwayson/esri-angular-cli-example/pull/17#issuecomment-262636933, or mute the thread https://github.com/notifications/unsubscribe-auth/ACGGZgvEH1A0Ca9AKhRRXnZUXq6SjImBks5rBLM3gaJpZM4K6SLC .

tomwayson commented 7 years ago

yep - tons of them if I use either @types/es6-shim or @types/core-js as dependencies. So, I reverted to using @types/core-js as a devDependency and burned through about 4 patch versions in the process (feels like I get no probs when npm linked, so I'm republishing w/ every change).

I'm sure the answer is somewhere in http://stackoverflow.com/questions/35660498/angular-2-cant-find-promise-map-set-and-iterator/35660772, but I'm too fried right now by all this to try anything else.

If you get a chance to look at it sometime, I'd really appreciate that. No rush. If you're in the states like me tomorrow is all about family and 🦃 so Happy T-Day - I won't be looking at this any time soon.

Thanks again.

TheKeithStewart commented 7 years ago

I'm in the states as well so the majority of today will definitely be about family and food.

I did however take another look at this issue with the core-js and es6-shim TS libraries. From what I can tell the Angular 2 dependencies on es6-shim are mainly in earlier versions of ng2 but sometime in the last 9 months it was removed and replaced with core-js. This, and the fact that when you install the angular2-esri-loader it informs you if you are missing core-js, I think point to this being ok as is right now.

I went back to the project that was having the issue with this and installed it again. I replaced the @types/es6-shim with @types/core-js and everything worked fine.

tomwayson commented 7 years ago

Thanks @kgs916 it works!

I'm very grateful that you were able to pick up after TypeScript had beaten me down and left me for dead.

jwasilgeo commented 7 years ago

Awesome work @kgs916 and @tomwayson! How convenient that I return to look at this after the holiday weekend and it is all taken care of.