New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
angular-esri-loader
Advanced tools
angular-esri-loader - npm Package Compare versions
Comparing version 1.1.0 to 1.1.1
| import { Injectable, NgModule } from '@angular/core'; | ||
| import { bootstrap, dojoRequire, isLoaded } from 'esri-loader'; | ||
| var EsriLoaderService = (function () { | ||
| var EsriLoaderService = /** @class */ (function () { | ||
| function EsriLoaderService() { | ||
@@ -57,26 +57,26 @@ } | ||
| }; | ||
| EsriLoaderService.decorators = [ | ||
| { type: Injectable }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| EsriLoaderService.ctorParameters = function () { return []; }; | ||
| return EsriLoaderService; | ||
| }()); | ||
| EsriLoaderService.decorators = [ | ||
| { type: Injectable }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| EsriLoaderService.ctorParameters = function () { return []; }; | ||
| var EsriLoaderModule = (function () { | ||
| var EsriLoaderModule = /** @class */ (function () { | ||
| function EsriLoaderModule() { | ||
| } | ||
| EsriLoaderModule.decorators = [ | ||
| { type: NgModule, args: [{ | ||
| providers: [EsriLoaderService] | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| EsriLoaderModule.ctorParameters = function () { return []; }; | ||
| return EsriLoaderModule; | ||
| }()); | ||
| EsriLoaderModule.decorators = [ | ||
| { type: NgModule, args: [{ | ||
| providers: [EsriLoaderService] | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| EsriLoaderModule.ctorParameters = function () { return []; }; | ||
@@ -83,0 +83,0 @@ /** |
| { | ||
| "name": "angular-esri-loader", | ||
| "version": "1.1.0", | ||
| "version": "1.1.1", | ||
| "description": "An Angular service to help you load ArcGIS API for JavaScript modules", | ||
@@ -5,0 +5,0 @@ "repository": { |
161
README.md
| # angular-esri-loader | ||
| An [Angular](https://angular.io/) library to help you load [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/) modules. | ||
| This _was_ an [Angular](https://angular.io/) library to help you load [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/) modules. | ||
| Exposes a service that wraps the functions from the [esri-loader](https://github.com/tomwayson/esri-loader) library in new functions that return promises. | ||
| However, this has been deprectated. Instead, you should use the functions from the [esri-loader](https://github.com/esri/esri-loader) library directly in your application instead. | ||
| To understand why this is needed, and the benefits of using esri-loader over other techniques, see the [esri-loader README](https://github.com/tomwayson/esri-loader#why-is-this-needed). | ||
| ## Install | ||
| For Angular 4 and above: | ||
| ```bash | ||
| npm install angular-esri-loader | ||
| ``` | ||
| For Angular 2: | ||
| ```bash | ||
| npm install angular2-esri-loader esri-loader | ||
| ``` | ||
| **NOTE**: for AngularJS use [angular-esri-map](https://github.com/Esri/angular-esri-map). | ||
| ## Usage | ||
| Below is an example of using the loader service in a component to lazy load the ArcGIS API and create a map. | ||
| First you need to import the `EsriLoaderModule` into your application: | ||
| ```ts | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { NgModule } from '@angular/core'; | ||
| import { EsriLoaderModule } from 'angular-esri-loader'; | ||
| import { AppComponent } from './app.component'; | ||
| import { EsriMapComponent } from './esri-map.component'; | ||
| @NgModule({ | ||
| declarations: [ | ||
| AppComponent, | ||
| EsriMapComponent | ||
| ], | ||
| imports: [ | ||
| BrowserModule, | ||
| EsriLoaderModule, | ||
| ], | ||
| bootstrap: [AppComponent] | ||
| }) | ||
| export class AppModule { } | ||
| ``` | ||
| Then you can use the `EsriLoaderService` in a component to load a map: | ||
| ```ts | ||
| import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; | ||
| import { EsriLoaderService } from 'angular-esri-loader'; | ||
| @Component({ | ||
| selector: 'app-esri-map', | ||
| templateUrl: './esri-map.component.html', | ||
| styleUrls: ['./esri-map.component.css'] | ||
| }) | ||
| export class EsriMapComponent implements OnInit { | ||
| @ViewChild('map') mapEl: ElementRef; | ||
| map: any; | ||
| constructor(private esriLoader: EsriLoaderService) { } | ||
| ngOnInit() { | ||
| // only load the ArcGIS API for JavaScript when this component is loaded | ||
| return this.esriLoader.load({ | ||
| // use a specific version of the API instead of the latest | ||
| url: '//js.arcgis.com/3.18/' | ||
| }).then(() => { | ||
| // load the map class needed to create a new map | ||
| this.esriLoader.loadModules(['esri/map']).then(([Map]) => { | ||
| // create the map at the DOM element in this component | ||
| this.map = new Map(this.mapEl.nativeElement, { | ||
| center: [-118, 34.5], | ||
| zoom: 8, | ||
| basemap: 'dark-gray' | ||
| }); | ||
| }); | ||
| }); | ||
| } | ||
| } | ||
| ``` | ||
| ### In an Angular CLI Application | ||
| To use this library in an [Angular CLI](https://github.com/angular/angular-cli) application, the best place to start is to follow the instructions in [this gist](https://gist.github.com/tomwayson/e6260adfd56c2529313936528b8adacd). | ||
| For an example of how to use this service to lazy load the ArcGIS API and resolve modules in a route, see | ||
| [esri-angular-cli-example's esri-map-resolve.service.ts](https://github.com/tomwayson/esri-angular-cli-example/blob/ab4540912904cf78ccfd904fb3bfa4c69b4aa1da/src/app/esri-map/esri-map-resolve.service.ts). | ||
| ### In an angular2-webpack-starter Application | ||
| See [this gist](https://gist.github.com/jwasilgeo/00855ee002aca822e33abd8a7a031f56) for instructions on how to use this library in an [AngularClass/angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter) application. | ||
| ### In an Angular 2 Application | ||
| Example of using the loader service in a component to lazy load the ArcGIS API and create a map | ||
| ```ts | ||
| import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; | ||
| import { EsriLoaderService } from 'angular-esri-loader'; | ||
| @Component({ | ||
| selector: 'app-esri-map', | ||
| templateUrl: './esri-map.component.html', | ||
| styleUrls: ['./esri-map.component.css'] | ||
| }) | ||
| export class EsriMapComponent implements OnInit { | ||
| @ViewChild('map') mapEl: ElementRef; | ||
| map: any; | ||
| constructor(private esriLoader: EsriLoaderService) { } | ||
| ngOnInit() { | ||
| // only load the ArcGIS API for JavaScript when this component is loaded | ||
| return this.esriLoader.load({ | ||
| // use a specific version of the API instead of the latest | ||
| url: '//js.arcgis.com/3.18/' | ||
| }).then(() => { | ||
| // load the map class needed to create a new map | ||
| this.esriLoader.loadModules(['esri/map']).then(([Map]) => { | ||
| // create the map at the DOM element in this component | ||
| this.map = new Map(this.mapEl.nativeElement, { | ||
| center: [-118, 34.5], | ||
| zoom: 8, | ||
| basemap: 'dark-gray' | ||
| }); | ||
| }); | ||
| }); | ||
| } | ||
| } | ||
| ``` | ||
| ## ArcGIS Types | ||
| This service doesn't make any assumptions about which version of the ArcGIS API you are using, so you will have to manually install the appropriate types. | ||
| ### 4.x Types | ||
| Follow [these instructions](https://github.com/Esri/jsapi-resources/tree/master/4.x/typescript) to install the 4.x types. | ||
| For Angular CLI applications, you will also need to add "arcgis-js-api" to `compilerOptions.types` in src/tsconfig.app.json and src/tsconfig.spec.json [as shown here](https://gist.github.com/tomwayson/e6260adfd56c2529313936528b8adacd#adding-the-arcgis-api-for-javascript-types). | ||
| Then you can use the `__esri` namespace for the types as seen in [this example](https://github.com/kgs916/angular2-esri4-components/blob/68861b286fd3a4814c495c2bd723e336e917ced2/src/lib/esri4-map/esri4-map.component.ts#L20-L26). | ||
| ### 3.x Types | ||
| Unfortunately the `__esri` namespace is not defined for 3.x types. You can use [these instructions](https://github.com/Esri/jsapi-resources/tree/master/3.x/typescript) to install the 3.x types, but then [you will still need to use `import` statements to get the types](https://github.com/Esri/jsapi-resources/issues/60). This may cause build errors that may or may not result in actual runtime errors depending on your environment. | ||
| ## Examples | ||
| This service is in use in these applications: | ||
| - [esri-angular-cli-example](https://github.com/tomwayson/esri-angular-cli-example) | ||
| ## Resources | ||
| * [Using the ArcGIS API for JavaScript in Applications built with webpack](http://tomwayson.com/2016/11/27/using-the-arcgis-api-for-javascript-in-applications-built-with-webpack/) | ||
| * [esri-loader](https://github.com/tomwayson/esri-loader) | ||
| ## Credit | ||
| Thanks to [@kgs916](https://github.com/kgs916) for helping me figure out how to publish a TypeScript library for Angular 2. I'll never do that again. |
| export declare class EsriLoaderService { | ||
| constructor(); | ||
| isLoaded(): Element; | ||
| isLoaded(): HTMLScriptElement; | ||
| load(options?: Object): Promise<Function>; | ||
| loadModules(moduleNames: string[]): Promise<any[]>; | ||
| require(moduleNames: string[], callback: Function): void; | ||
| require(moduleNames: string[], callback: (...modules: any[]) => void): void; | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-36.97%
9854
- Number of lines in readme file
- decreased by-95.73%
7
No dependency changes