├── src
    ├── assets
    │   └── .gitkeep
    ├── app
    │   ├── app.component.css
    │   ├── header
    │   │   ├── header.component.css
    │   │   ├── header.component.ts
    │   │   ├── header.component.html
    │   │   └── header.component.spec.ts
    │   ├── index.ts
    │   ├── esri-map
    │   │   ├── esri-map.component.css
    │   │   ├── esri-map.component.html
    │   │   ├── esri-map-routing.module.ts
    │   │   ├── esri-map.module.ts
    │   │   ├── esri-map.component.ts
    │   │   └── esri-map.component.spec.ts
    │   ├── app.component.html
    │   ├── home
    │   │   ├── home.component.css
    │   │   ├── home.component.ts
    │   │   ├── home.component.html
    │   │   └── home.component.spec.ts
    │   ├── app.component.ts
    │   ├── app-routing.module.ts
    │   ├── app.module.ts
    │   └── app.component.spec.ts
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── typings.d.ts
    ├── index.html
    ├── main.ts
    ├── styles.css
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    ├── test.ts
    └── polyfills.ts
├── e2e
    ├── app.po.ts
    ├── tsconfig.e2e.json
    └── app.e2e-spec.ts
├── .editorconfig
├── tsconfig.json
├── .gitignore
├── protractor.conf.js
├── CONTRIBUTING.md
├── CHANGELOG.md
├── karma.conf.js
├── .angular-cli.json
├── package.json
├── README.md
└── tslint.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/header/header.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/index.ts:
--------------------------------------------------------------------------------
1 | export * from './app.component';
2 | export * from './app.module';
3 | 


--------------------------------------------------------------------------------
/src/app/esri-map/esri-map.component.css:
--------------------------------------------------------------------------------
1 | .map {
2 |     height: calc(100% - 64px);
3 | }
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tomwayson/esri-angular-cli-example/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <app-header [title]="title"></app-header>
2 | 
3 | <router-outlet></router-outlet>


--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 |   id: string;
5 | }


--------------------------------------------------------------------------------
/src/app/home/home.component.css:
--------------------------------------------------------------------------------
1 | .container {
2 |   padding: 15px; 
3 | }
4 | .home-button-view-map {
5 |   width: 100%;
6 |   max-width: 370px;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/app/esri-map/esri-map.component.html:
--------------------------------------------------------------------------------
1 | <div class="map">
2 |   <esri-map [webMapProperties]="webMapProperties" [mapViewProperties]="mapViewProperties" (mapInit)="onMapInit($event)"></esri-map>
3 | </div>


--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, element, by } from 'protractor';
 2 | 
 3 | export class AngularCliEsriPage {
 4 |   navigateTo() {
 5 |     return browser.get('/home');
 6 |   }
 7 | 
 8 |   getTitleText() {
 9 |     return element(by.id('title')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types":[
 8 |       "jasmine",
 9 |       "node",
10 |       "arcgis-js-api"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.css']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'Esri Angular CLI Example';
10 | }
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-home',
 5 |   templateUrl: './home.component.html',
 6 |   styleUrls: ['./home.component.css']
 7 | })
 8 | export class HomeComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>esri-angular-cli-example</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <app-root>Loading...</app-root>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 2 | import { enableProdMode } from '@angular/core';
 3 | import { environment } from './environments/environment';
 4 | import { AppModule } from './app/app.module';
 5 | 
 6 | if (environment.production) {
 7 |   enableProdMode();
 8 | }
 9 | 
10 | platformBrowserDynamic().bootstrapModule(AppModule);
11 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | 
 3 | @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 4 | 
 5 | @import '//fonts.googleapis.com/icon?family=Material+Icons';
 6 | 
 7 | html, body {
 8 |   height: 100%;
 9 |   width: 100%;
10 |   margin: 0px;
11 |   padding: 0px;
12 | }
13 | 
14 | .fill-space {
15 |   flex: 1 1 auto;
16 | }
17 | 


--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AngularCliEsriPage } from './app.po';
 2 | 
 3 | describe('esri-angular-cli-example App', function() {
 4 |   let page: AngularCliEsriPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AngularCliEsriPage();
 8 |   });
 9 | 
10 |   it('should display the title', () => {
11 |     page.navigateTo();
12 |     expect(page.getTitleText()).toEqual('Esri Angular CLI Example');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "baseUrl": "src",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "moduleResolution": "node",
 9 |     "emitDecoratorMetadata": true,
10 |     "experimentalDecorators": true,
11 |     "target": "es5",
12 |     "typeRoots": [
13 |       "node_modules/@types"
14 |     ],
15 |     "lib": [
16 |       "es2016",
17 |       "dom"
18 |     ]
19 |   }
20 | }


--------------------------------------------------------------------------------
/src/app/esri-map/esri-map-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | 
 4 | import { EsriMapComponent } from './esri-map.component';
 5 | 
 6 | export const MAP_ROUTES: Routes = [
 7 |   { path: '', component: EsriMapComponent }
 8 | ]
 9 | 
10 | @NgModule({
11 |   imports: [
12 |     RouterModule.forChild(MAP_ROUTES)
13 |   ],
14 |   exports: [
15 |     RouterModule
16 |   ]
17 | })
18 | export class EsriMapRoutingModule { }


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "sourceMap": true,
 4 |     "declaration": false,
 5 |     "moduleResolution": "node",
 6 |     "emitDecoratorMetadata": true,
 7 |     "experimentalDecorators": true,
 8 |     "target": "es5",
 9 |     "lib": [
10 |       "es2016",
11 |       "dom"
12 |     ],
13 |     "outDir": "../out-tsc/app",
14 |     "module": "es2015",
15 |     "baseUrl": "",
16 |     "types": []
17 |   },
18 |   "exclude": [
19 |     "test.ts",
20 |     "**/*.spec.ts"
21 |   ]
22 | }


--------------------------------------------------------------------------------
/src/app/header/header.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, Input, ViewChild } from '@angular/core';
 2 | import { MdMenuTrigger} from '@angular/material';
 3 | 
 4 | @Component({
 5 |   selector: 'app-header',
 6 |   templateUrl: './header.component.html',
 7 |   styleUrls: ['./header.component.css']
 8 | })
 9 | export class HeaderComponent implements OnInit {
10 |   @Input() title: string;
11 |   @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;
12 | 
13 |   constructor() { }
14 | 
15 |   ngOnInit() {
16 |   }
17 | 
18 | }
19 | 


--------------------------------------------------------------------------------
/src/app/header/header.component.html:
--------------------------------------------------------------------------------
 1 | <md-toolbar color="primary">
 2 |   <span id="title">{{ title }}</span>
 3 | 
 4 |   <!-- navigation menu should be on the far right of the toolbar -->
 5 |   <span class="fill-space"></span>
 6 |   <button md-icon-button [md-menu-trigger-for]="menu">
 7 |     <md-icon>more_vert</md-icon>
 8 |   </button>
 9 | 
10 |   <md-menu #menu="mdMenu" x-position="before">
11 |     <button md-menu-item routerLink="/home"> Home </button>
12 |     <button md-menu-item routerLink="/map"> Map </button>
13 |   </md-menu>
14 | </md-toolbar>


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | 
 4 | import { HomeComponent } from './home/home.component';
 5 | 
 6 | const APP_ROUTES: Routes = [
 7 |   { path: 'home', component: HomeComponent },
 8 |   { path: 'map', loadChildren: './esri-map/esri-map.module#EsriMapModule' },
 9 |   { path: '**', redirectTo: '/home' }
10 | ]
11 | 
12 | @NgModule({
13 |   imports: [
14 |     RouterModule.forRoot(APP_ROUTES)
15 |   ],
16 |   exports: [
17 |     RouterModule
18 |   ]
19 | })
20 | export class AppRoutingModule { }


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "sourceMap": true,
 4 |     "declaration": false,
 5 |     "moduleResolution": "node",
 6 |     "emitDecoratorMetadata": true,
 7 |     "experimentalDecorators": true,
 8 |     "lib": [
 9 |       "es2016",
10 |       "dom"
11 |     ],
12 |     "outDir": "../out-tsc/spec",
13 |     "module": "commonjs",
14 |     "target": "es5",
15 |     "baseUrl": "",
16 |     "types": [
17 |       "jasmine",
18 |       "node",
19 |       "arcgis-js-api"
20 |     ]
21 |   },
22 |   "files": [
23 |     "test.ts"
24 |   ],
25 |   "include": [
26 |     "**/*.spec.ts",
27 |     "**/*.d.ts"
28 |   ]
29 | }


--------------------------------------------------------------------------------
/src/app/esri-map/esri-map.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { EsriMapComponent } from './esri-map.component';
 4 | import { EsriMapRoutingModule } from './esri-map-routing.module';
 5 | 
 6 | import { EsriLoaderModule } from 'angular-esri-loader';
 7 | import { AngularEsriModule } from 'angular-esri-components';
 8 | 
 9 | @NgModule({
10 |   imports: [
11 |     CommonModule,
12 |     AngularEsriModule,
13 |     EsriMapRoutingModule,
14 |     EsriLoaderModule
15 |   ],
16 |   declarations: [EsriMapComponent],
17 |   exports: [EsriMapComponent]
18 | })
19 | export class EsriMapModule { }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | 
 7 | # dependencies
 8 | /node_modules
 9 | 
10 | # IDEs and editors
11 | /.idea
12 | .project
13 | .classpath
14 | .c9/
15 | *.launch
16 | .settings/
17 | 
18 | # IDE - VSCode
19 | .vscode/*
20 | !.vscode/settings.json
21 | !.vscode/tasks.json
22 | !.vscode/launch.json
23 | !.vscode/extensions.json
24 | 
25 | # misc
26 | /.sass-cache
27 | /connect.lock
28 | /coverage/*
29 | /libpeerconnection.log
30 | npm-debug.log
31 | testem.log
32 | /typings
33 | 
34 | src/typings
35 | debug.log
36 | 
37 | # e2e
38 | /e2e/*.js
39 | /e2e/*.map
40 | 
41 | #System Files
42 | .DS_Store
43 | Thumbs.db
44 | 


--------------------------------------------------------------------------------
/src/app/esri-map/esri-map.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-esri-map',
 5 |   templateUrl: './esri-map.component.html',
 6 |   styleUrls: ['./esri-map.component.css']
 7 | })
 8 | export class EsriMapComponent implements OnInit {
 9 |   webMapProperties: __esri.WebMapProperties = {
10 |     portalItem: {
11 |       id: 'ad5759bf407c4554b748356ebe1886e5'
12 |     }
13 |   };
14 |   mapViewProperties: __esri.MapViewProperties = {
15 |     zoom: 16
16 |   };
17 |   map: __esri.Map;
18 |   mapView: __esri.MapView;
19 | 
20 |   constructor() { }
21 | 
22 |   ngOnInit() { }
23 | 
24 |   onMapInit(mapInfo: {map: __esri.Map, mapView: __esri.MapView}) {
25 |     this.map = mapInfo.map;
26 |     this.mapView = mapInfo.mapView;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.html:
--------------------------------------------------------------------------------
1 | <div class="container">
2 |   <p>This is an example of how to use the <a href="https://developers.arcgis.com/javascript/" target="_blank">ArcGIS API for JavaScript</a>
3 |     in an application generated with the <a href="https://github.com/angular/angular-cli" target="_blank">Angular CLI</a>.</p>
4 |   <p>One of the key benefits of the approach demonstrated in this application is that you can lazy load the map.
5 |     Notice how fast this page loaded? That's because we haven't loaded the map yet. Click the button below to load and view the map.</p>
6 |   <button md-raised-button routerLink="/map" routerLinkActive="active" color="primary" class="home-button-view-map">View Map</button>
7 |   <p>The source code for this project can be found <a href="https://github.com/tomwayson/esri-angular-cli-example" target="_blank">here</a>.</p>
8 | </div>


--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './e2e/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   beforeLaunch: function() {
23 |     require('ts-node').register({
24 |       project: 'e2e/tsconfig.e2e.json'
25 |     });
26 |   },
27 |   onPrepare() {
28 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
29 |   }
30 | };
31 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 5 | 
 6 | import { HomeComponent } from './home.component';
 7 | 
 8 | describe('HomeComponent', () => {
 9 |   let component: HomeComponent;
10 |   let fixture: ComponentFixture<HomeComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ HomeComponent ],
15 |       schemas: [CUSTOM_ELEMENTS_SCHEMA]
16 |     })
17 |     .compileComponents();
18 |   }));
19 | 
20 |   beforeEach(() => {
21 |     fixture = TestBed.createComponent(HomeComponent);
22 |     component = fixture.componentInstance;
23 |     fixture.detectChanges();
24 |   });
25 | 
26 |   it('should create', () => {
27 |     expect(component).toBeTruthy();
28 |   });
29 | });
30 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | import { FormsModule } from '@angular/forms';
 4 | import { HttpModule } from '@angular/http';
 5 | import { MaterialModule } from '@angular/material';
 6 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 7 | 
 8 | // hammerjs is a required import for some of the features in Angular Material
 9 | import 'hammerjs';
10 | 
11 | import { AppComponent } from './app.component';
12 | import { AppRoutingModule } from './app-routing.module';
13 | 
14 | import { HomeComponent } from './home/home.component';
15 | import { HeaderComponent } from './header/header.component';
16 | 
17 | @NgModule({
18 |   declarations: [
19 |     AppComponent,
20 |     HomeComponent,
21 |     HeaderComponent
22 |   ],
23 |   imports: [
24 |     BrowserModule,
25 |     FormsModule,
26 |     HttpModule,
27 |     MaterialModule,
28 |     AppRoutingModule,
29 |     BrowserAnimationsModule
30 |   ],
31 |   bootstrap: [AppComponent]
32 | })
33 | export class AppModule { }
34 | 


--------------------------------------------------------------------------------
/src/app/esri-map/esri-map.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 3 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 4 | import { By } from '@angular/platform-browser';
 5 | import { DebugElement } from '@angular/core';
 6 | 
 7 | import { EsriMapComponent } from './esri-map.component';
 8 | 
 9 | describe('EsriMapComponent', () => {
10 |   let component: EsriMapComponent;
11 |   let fixture: ComponentFixture<EsriMapComponent>;
12 | 
13 |   beforeEach(async(() => {
14 |     // provide a mock map class to the component via a mock route
15 |     TestBed.configureTestingModule({
16 |       declarations: [
17 |         EsriMapComponent
18 |       ],
19 |       schemas: [CUSTOM_ELEMENTS_SCHEMA]
20 |     })
21 |       .compileComponents();
22 |   }));
23 | 
24 |   beforeEach(() => {
25 |     fixture = TestBed.createComponent(EsriMapComponent);
26 |     component = fixture.componentInstance;
27 |     fixture.detectChanges();
28 |   });
29 | 
30 |   it('should create', () => {
31 |     expect(component).toBeTruthy();
32 |   });
33 | 
34 | });
35 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/long-stack-trace-zone';
 4 | import 'zone.js/dist/proxy.js';
 5 | import 'zone.js/dist/sync-test';
 6 | import 'zone.js/dist/jasmine-patch';
 7 | import 'zone.js/dist/async-test';
 8 | import 'zone.js/dist/fake-async-test';
 9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 |   BrowserDynamicTestingModule,
12 |   platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 | 
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare var __karma__: any;
17 | declare var require: any;
18 | 
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 | 
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 |   BrowserDynamicTestingModule,
25 |   platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | ## New Contributors
 4 | 
 5 | Thank you for your interest in helping make this repository better!
 6 | 
 7 | Please bear in mind [the goal](/README.md#goal) of this repository when considering your contributions. I try to keep an up to date [backlog of issues](../../issues). I welcome pull requests that resolve any of those issues, but please check first to see if the issue has already been assigned or if anyone has indicated that they are working on it. If you are unsure of the status, don't hesitate to ask in a comment.
 8 | 
 9 | If you discover a bug or would like to see an enhancement that is not in that list, please [add a new issue](../../issues/new) to start a discussion before creating a pull request. I welcome your input!
10 | 
11 | ## Collaborator Guidelines
12 | 
13 | First, thank you for helping maintain this repository!
14 | 
15 | In addition to the above guidelines, please open a pull request for all changes rather than directly pushing your commits to matser.
16 | 
17 | I will manage all releases and deployments myself after the code has been merged to master.
18 | 
19 | ## Thank You
20 | 
21 | Thanks again for offering your valuable time to help make this repository more useful.
22 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # esri-angular-cli-example Change Log
 2 | All notable changes to this project will be documented in this file.
 3 | This project adheres to [Semantic Versioning](http://semver.org/).
 4 | 
 5 | ## Unreleased
 6 | 
 7 | ### Changed
 8 | - update to latest angular-esri-loader and angular-esri-components
 9 | 
10 | ## 0.4.1
11 | 
12 | ### Changed
13 | - upgrade angular, angular cli (to v1), and angular material
14 | 
15 | ## 0.4.0
16 | 
17 | ### Added
18 | - more compelling map
19 | 
20 | ## 0.3.2
21 | ### Changed
22 | - remove local dependency on @types/arcgis-js-api
23 | 
24 | ## 0.3.1
25 | ### Changed
26 | - moved css imports to styles.css and out of index.html
27 | 
28 | ## 0.3.0
29 | ### Added
30 | - use angular2-esri4-components library for generating the ESRI map
31 | ### Changed
32 | - split map route code into own bundle which is lazy loaded
33 | ### Support
34 | - added npm deploy script
35 | 
36 | ## 0.2.0
37 | ## Changed
38 | - exracted EsriLoaderService into own repo angular2-esri-loader
39 | - extracted module loading code into esri-loader
40 | - EsriLoaderService functions return promises
41 | 
42 | ## 0.1.0
43 | ### Added
44 | - lazy load ArcGIS API for JavaScript
45 | - material design layout w/ nav links to routes
46 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | 
 3 | import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 4 | import { RouterTestingModule } from '@angular/router/testing';
 5 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 6 | import { MaterialModule } from '@angular/material';
 7 | 
 8 | import { AppComponent } from './app.component';
 9 | 
10 | describe('App: AngularCliEsri', () => {
11 |   let component: AppComponent;
12 |   let fixture: ComponentFixture<AppComponent>;
13 | 
14 |   beforeEach(() => {
15 |     TestBed.configureTestingModule({
16 |       declarations: [
17 |         AppComponent
18 |       ],
19 |       imports: [
20 |         RouterTestingModule.withRoutes([
21 |           { path: 'fakeRoute', redirectTo: '/fakeRoute' }
22 |         ])
23 |       ],
24 |       providers: [
25 |         MaterialModule
26 |       ],
27 |       schemas: [CUSTOM_ELEMENTS_SCHEMA]
28 |     });
29 |   });
30 | 
31 |   beforeEach(() => {
32 |     fixture = TestBed.createComponent(AppComponent);
33 |     component = fixture.componentInstance;
34 |     fixture.detectChanges();
35 |   });
36 | 
37 |   it('should create the app', async(() => {
38 |     expect(component).toBeTruthy();
39 |   }));
40 | });
41 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular/cli'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular/cli/plugins/karma')
14 |     ],
15 |     client:{
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     files: [
19 |       { pattern: './src/test.ts', watched: false }
20 |     ],
21 |     preprocessors: {
22 |       './src/test.ts': ['@angular/cli']
23 |     },
24 |     mime: {
25 |       'text/x-typescript': ['ts','tsx']
26 |     },
27 |     coverageIstanbulReporter: {
28 |       reports: [ 'html', 'lcovonly' ],
29 |       fixWebpackSourcePaths: true
30 |     },
31 |     angularCli: {
32 |       environment: 'dev'
33 |     },
34 |     reporters: config.angularCli && config.angularCli.codeCoverage
35 |               ? ['progress', 'coverage-istanbul']
36 |               : ['progress', 'kjhtml'],
37 |     port: 9876,
38 |     colors: true,
39 |     logLevel: config.LOG_INFO,
40 |     autoWatch: true,
41 |     browsers: ['Chrome'],
42 |     singleRun: false
43 |   });
44 | };
45 | 


--------------------------------------------------------------------------------
/.angular-cli.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 3 |   "project": {
 4 |     "name": "esri-angular-cli-example"
 5 |   },
 6 |   "apps": [
 7 |     {
 8 |       "root": "src",
 9 |       "outDir": "dist",
10 |       "assets": [
11 |         "assets",
12 |         "favicon.ico"
13 |       ],
14 |       "index": "index.html",
15 |       "main": "main.ts",
16 |       "polyfills": "polyfills.ts",
17 |       "test": "test.ts",
18 |       "tsconfig": "tsconfig.app.json",
19 |       "testTsconfig": "tsconfig.spec.json",
20 |       "prefix": "app",
21 |       "styles": [
22 |         "styles.css"
23 |       ],
24 |       "scripts": [],
25 |       "environmentSource": "environments/environment.ts",
26 |       "environments": {
27 |         "dev": "environments/environment.ts",
28 |         "prod": "environments/environment.prod.ts"
29 |       }
30 |     }
31 |   ],
32 |   "e2e": {
33 |     "protractor": {
34 |       "config": "./protractor.conf.js"
35 |     }
36 |   },
37 |   "lint": [
38 |     {
39 |       "project": "src/tsconfig.app.json"
40 |     },
41 |     {
42 |       "project": "src/tsconfig.spec.json"
43 |     },
44 |     {
45 |       "project": "e2e/tsconfig.e2e.json"
46 |     }
47 |   ],
48 |   "test": {
49 |     "karma": {
50 |       "config": "./karma.conf.js"
51 |     }
52 |   },
53 |   "defaults": {
54 |     "styleExt": "css",
55 |     "component": {
56 |       "inlineTemplate": false,
57 |       "spec": true
58 |     }
59 |   }
60 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "esri-angular-cli-example",
 3 |   "version": "0.4.1",
 4 |   "license": "MIT",
 5 |   "angular-cli": {},
 6 |   "scripts": {
 7 |     "ng": "ng",
 8 |     "start": "ng serve",
 9 |     "build": "ng build",
10 |     "test": "ng test",
11 |     "lint": "ng lint",
12 |     "e2e": "ng e2e"
13 |   },
14 |   "private": true,
15 |   "dependencies": {
16 |     "@angular/animations": "^4.0.2",
17 |     "@angular/common": "^4.0.0",
18 |     "@angular/compiler": "^4.0.0",
19 |     "@angular/core": "^4.0.0",
20 |     "@angular/forms": "^4.0.0",
21 |     "@angular/http": "^4.0.0",
22 |     "@angular/material": "^2.0.0-beta.6",
23 |     "@angular/platform-browser": "^4.0.0",
24 |     "@angular/platform-browser-dynamic": "^4.0.0",
25 |     "@angular/router": "^4.0.0",
26 |     "angular-esri-components": "^1.0.0",
27 |     "angular-esri-loader": "^1.1.0",
28 |     "core-js": "^2.4.1",
29 |     "hammerjs": "^2.0.8",
30 |     "rxjs": "^5.1.0",
31 |     "zone.js": "^0.8.4"
32 |   },
33 |   "devDependencies": {
34 |     "@angular/cli": "^1.0.0",
35 |     "@angular/compiler-cli": "^4.0.0",
36 |     "@types/jasmine": "2.5.38",
37 |     "@types/node": "^6.0.60",
38 |     "codelyzer": "~2.0.0",
39 |     "jasmine-core": "~2.5.2",
40 |     "jasmine-spec-reporter": "~3.2.0",
41 |     "karma": "~1.4.1",
42 |     "karma-chrome-launcher": "~2.0.0",
43 |     "karma-cli": "~1.0.1",
44 |     "karma-jasmine": "~1.1.0",
45 |     "karma-jasmine-html-reporter": "^0.2.2",
46 |     "karma-coverage-istanbul-reporter": "^0.2.0",
47 |     "protractor": "~5.1.0",
48 |     "ts-node": "~2.0.0",
49 |     "tslint": "~4.5.0",
50 |     "typescript": "~2.2.0"
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/app/header/header.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | import { MaterialModule, OverlayContainer } from '@angular/material';
 6 | 
 7 | import { HeaderComponent } from './header.component';
 8 | 
 9 | describe('HeaderComponent', () => {
10 |   const title = 'Angular CLI Esri';
11 |   let overlayContainerElement: HTMLElement;
12 |   let component: HeaderComponent;
13 |   let fixture: ComponentFixture<HeaderComponent>;
14 | 
15 |   beforeEach(async(() => {
16 |     TestBed.configureTestingModule({
17 |       declarations: [HeaderComponent],
18 |       imports: [MaterialModule],
19 |       providers: [
20 |         {
21 |           provide: OverlayContainer, useFactory: () => {
22 |             overlayContainerElement = document.createElement('div');
23 |             return { getContainerElement: () => overlayContainerElement };
24 |           }
25 |         }
26 |       ]
27 |     })
28 |       .compileComponents();
29 |   }));
30 | 
31 |   beforeEach(() => {
32 |     fixture = TestBed.createComponent(HeaderComponent);
33 |     component = fixture.componentInstance;
34 |     component.title = title;
35 |     fixture.detectChanges();
36 |   });
37 | 
38 |   it(`should have as title '${title}'`, async(() => {
39 |     expect(component.title).toEqual(title);
40 |   }));
41 | 
42 |   it('should render title in a span tag', async(() => {
43 |     const compiled = fixture.debugElement.nativeElement;
44 |     expect(compiled.querySelector('span').textContent).toContain(title);
45 |   }));
46 | });
47 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/set';
35 | 
36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
37 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
38 | 
39 | /** IE10 and IE11 requires the following to support `@angular/animation`. */
40 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
41 | 
42 | 
43 | /** Evergreen browsers require these. **/
44 | import 'core-js/es6/reflect';
45 | import 'core-js/es7/reflect';
46 | 
47 | 
48 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/
49 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
50 | 
51 | 
52 | 
53 | /***************************************************************************************************
54 |  * Zone JS is required by Angular itself.
55 |  */
56 | import 'zone.js/dist/zone';  // Included with Angular CLI.
57 | 
58 | 
59 | 
60 | /***************************************************************************************************
61 |  * APPLICATION IMPORTS
62 |  */
63 | 
64 | /**
65 |  * Date, currency, decimal and percent pipes.
66 |  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
67 |  */
68 | // import 'intl';  // Run `npm install --save intl`.
69 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # esri-angular-cli-example
 2 | 
 3 | [View it live](https://tomwayson.github.io/esri-angular-cli-example/)
 4 | 
 5 | ## Goal
 6 | 
 7 | **NOTE** This repository has been archived. For a more up to date example of one way to use the [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/) in an application generated with [angular-cli](https://github.com/angular/angular-cli), see [angular-cli-esri-map](https://github.com/Esri/angular-cli-esri-map).
 8 | 
 9 | The application uses the [angular-esri-components](https://github.com/TheKeithStewart/angular-esri-components) component library to lazy load the ArcGIS API for JavaScript and then require the modules needed to create and work with a map.
10 |  
11 | ## Adding the ArcGIS API to your own angular-cli application
12 | 
13 | You should **not** use this repository as a starting point for your own application. This application was generated with an early beta of the angular-cli, and while it has been updated to v1 (thanks to [@TheKeithStewart](https://github.com/TheKeithStewart)), _I do **not** intend to keep it up to date w/ newer versions of Angular, the CLI, nor the ArcGIS API going forward_.
14 | 
15 | Rather than clone this repository, you should create your own application with the [angular-cli](https://github.com/angular/angular-cli) and then follow the instructions below to add the above libraries:
16 |  - [esri-loader](https://github.com/Esri/esri-loader#usage) - a low level service needed to load and use ArcGIS modules (v3.x or v4.x) in non-Dojo applications
17 |  - [angular-esri-components](https://github.com/TheKeithStewart/angular-esri-components#setup) - a set of reusable components for use with v4.x (only) of the ArcGIS API
18 | 
19 | ## Running this application
20 | 
21 | You can clone or download this application and then use the instructions below to run it and/or the tests to get a better sense of how it works.
22 | 
23 | ### Development server
24 | 
25 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
26 | 
27 | ### Code scaffolding
28 | 
29 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
30 | 
31 | ### Build
32 | 
33 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
34 | 
35 | ### Running unit tests
36 | 
37 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
38 | 
39 | ### Running end-to-end tests
40 | 
41 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
42 | Before running the tests make sure you are serving the app via `ng serve`.
43 | 
44 | ### Deploying to GitHub Pages
45 | 
46 | Run `ng github-pages:deploy` to deploy to GitHub Pages.
47 | 
48 | ### Further help
49 | 
50 | To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
51 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "callable-types": true,
  7 |     "class-name": true,
  8 |     "comment-format": [
  9 |       true,
 10 |       "check-space"
 11 |     ],
 12 |     "curly": true,
 13 |     "eofline": true,
 14 |     "forin": true,
 15 |     "import-blacklist": [true, "rxjs"],
 16 |     "import-spacing": true,
 17 |     "indent": [
 18 |       true,
 19 |       "spaces"
 20 |     ],
 21 |     "interface-over-type-literal": true,
 22 |     "label-position": true,
 23 |     "max-line-length": [
 24 |       true,
 25 |       140
 26 |     ],
 27 |     "member-access": false,
 28 |     "member-ordering": [
 29 |       true,
 30 |       "static-before-instance",
 31 |       "variables-before-functions"
 32 |     ],
 33 |     "no-arg": true,
 34 |     "no-bitwise": true,
 35 |     "no-console": [
 36 |       true,
 37 |       "debug",
 38 |       "info",
 39 |       "time",
 40 |       "timeEnd",
 41 |       "trace"
 42 |     ],
 43 |     "no-construct": true,
 44 |     "no-debugger": true,
 45 |     "no-duplicate-variable": true,
 46 |     "no-empty": false,
 47 |     "no-empty-interface": true,
 48 |     "no-eval": true,
 49 |     "no-inferrable-types": [true, "ignore-params"],
 50 |     "no-shadowed-variable": true,
 51 |     "no-string-literal": false,
 52 |     "no-string-throw": true,
 53 |     "no-switch-case-fall-through": true,
 54 |     "no-trailing-whitespace": true,
 55 |     "no-unused-expression": true,
 56 |     "no-use-before-declare": true,
 57 |     "no-var-keyword": true,
 58 |     "object-literal-sort-keys": false,
 59 |     "one-line": [
 60 |       true,
 61 |       "check-open-brace",
 62 |       "check-catch",
 63 |       "check-else",
 64 |       "check-whitespace"
 65 |     ],
 66 |     "prefer-const": true,
 67 |     "quotemark": [
 68 |       true,
 69 |       "single"
 70 |     ],
 71 |     "radix": true,
 72 |     "semicolon": [
 73 |       "always"
 74 |     ],
 75 |     "triple-equals": [
 76 |       true,
 77 |       "allow-null-check"
 78 |     ],
 79 |     "typedef-whitespace": [
 80 |       true,
 81 |       {
 82 |         "call-signature": "nospace",
 83 |         "index-signature": "nospace",
 84 |         "parameter": "nospace",
 85 |         "property-declaration": "nospace",
 86 |         "variable-declaration": "nospace"
 87 |       }
 88 |     ],
 89 |     "typeof-compare": true,
 90 |     "unified-signatures": true,
 91 |     "variable-name": false,
 92 |     "whitespace": [
 93 |       true,
 94 |       "check-branch",
 95 |       "check-decl",
 96 |       "check-operator",
 97 |       "check-separator",
 98 |       "check-type"
 99 |     ],
100 | 
101 |     "directive-selector": [true, "attribute", "app", "camelCase"],
102 |     "component-selector": [true, "element", "app", "kebab-case"],
103 |     "use-input-property-decorator": true,
104 |     "use-output-property-decorator": true,
105 |     "use-host-property-decorator": true,
106 |     "no-input-rename": true,
107 |     "no-output-rename": true,
108 |     "use-life-cycle-interface": true,
109 |     "use-pipe-transform-interface": true,
110 |     "component-class-suffix": true,
111 |     "directive-class-suffix": true,
112 |     "no-access-missing-member": true,
113 |     "templates-use-public": true,
114 |     "invoke-injectable": true
115 |   }
116 | }
117 | 


--------------------------------------------------------------------------------