Huge News!Announcing our $40M Series B led by Abstract Ventures.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
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
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