Merge pull request #84 from andygup/master

Fix master branch

Author: andygup

README.md

@@ -1,29 +1,26 @@
 # angular-cli-esri-map
 
-This branch contains a simple but complete application that uses the ArcGIS API for JavaScript 4.x, which is an enterprise geospatial API, along with webpack and Angular CLI. It uses arcgis-webpack-plugin to help load ArcGIS JavaScript API modules.
-
-If you would like to create your own Angular CLI project from scratch and incorporate these components, [create a new Angular CLI project](https://cli.angular.io/) and copy the `src/app/` directory of this repo to your new project. You will need to install `arcgis-webpack-plugin`, `@angular-builders/custom-webpack` and `@types/arcgis-js-api` manually, and then you'll need to configure the css in `angular.json` (see the file in this branch for an example).
+This branch contains a simple but complete application that uses the ArcGIS API for JavaScript, an enterprise geospatial API, and Angular CLI. It uses esri-loader, a small library that helps load ArcGIS JavaScript API modules (v3.x or v4.x) in non-Dojo applications.
 
 To use arcgis-webpack-plugin instead of esri-loader to load the ArcGIS API for JavaScript modules, check out the [`@arcgis-webpack-angular`](https://github.com/Esri/angular-cli-esri-map/tree/arcgis-webpack-angular) branch of this repo.
 
-If you don't want to use webpack then use `esri-loader` instead by checking out the [`master`](https://github.com/Esri/angular-cli-esri-map) branch of this repo. `esri-loader` lets you lazy load ArcGIS JavaScript API modules without webpack.
+If you would like to create your own Angular CLI project from scratch and incorporate these components, [create a new Angular CLI project](https://cli.angular.io/) and copy the `src/app/` directory of this repo to your new project. You will need to install `esri-loader` and `@types/arcgis-js-api` manually.
 
 ## Dependencies
 
 **Note: This repo is only tested to work with the most current version of the following dependencies.**
 
-- Requires Angular and Angular CLI 10 (latest) [Angular CLI 10](https://github.com/angular/angular-cli)
-- [ArcGIS API for JavaScript 4.x](https://developers.arcgis.com/javascript/)
-- [arcgis-webpack-plugin](https://github.com/Esri/arcgis-webpack-plugin)
-- [angular-builders/custom-webpack](https://www.npmjs.com/package/@angular-builders/custom-webpack)
+- [Angular CLI](https://github.com/angular/angular-cli)
+- [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/)
+- [esri-loader](https://github.com/Esri/esri-loader)
 - [ArcGIS API for JavaScript type definitions](https://github.com/Esri/jsapi-resources/tree/master/4.x/typescript) (@types/arcgis-js-api)
 
 ## Build your project
 
 ### Clone or download this repo
 
 ```bash
-  git clone https://github.com/Esri/angular-cli-esri-map.git
+  git clone https://github.com/andygup/angular-cli-esri-map.git
 ```
 
 ### Install dependencies
@@ -38,44 +35,10 @@ If you don't want to use webpack then use `esri-loader` instead by checking out
 ### Run the application locally
 
 ```bash
-  git checkout arcgis-webpack-angular
-  ng serve --open
-```
-
-The app will automatically reload if you change any of the source files. You can shut down the development server with a `Control C` in the terminal any time you wish.
-
-### Working with the View's CSS
-
-For best performance, we recommend using the local copy of the css for the ArcGIS API for JavaScript. You can configure this in `angular.json` and choose from any of the [themes](https://developers.arcgis.com/javascript/latest/guide/styling/):
-
-```json
-  "styles": [
-    "src/styles.scss",
-    "node_modules/arcgis-js-api/themes/light/main.css"
-  ],
-```
-
-### Working with secure ArcGIS services
-
-When working with secure ArcGIS services there is additional code that you'll need to get it to work with webpack. If you encounter an error similar to this: `DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'`, then you'll need to follow the instructions outlined here: https://github.com/Esri/arcgis-webpack-plugin#usage. Add that code to your component and it should resolve the problem. This branch of the repo includes an example that uses workers. 
-
-IMPORTANT: be sure to configure the `DEFAULT_WORKER_URL` property to use the same `Major.minor` version used by the `arcgis-webpack-plugin`. You can confirm that version by looking in the header of `node_modules/@arcgis/webpack-plugin/extras/dojo/dojo.js` and you'll see information similar to this:
-
-```js
-  // All material copyright ESRI, All Rights Reserved, unless otherwise specified.
-  // See https://js.arcgis.com/4.16/esri/copyright.txt for details.
-  //>>built
-```
-
-And, you need to match this version using this pattern within your component:
-
-```js
-  // Refer to esri-map.component.ts file for a complete version of this code
-  const DEFAULT_WORKER_URL = "https://js.arcgis.com/4.16/";
-  const DEFAULT_LOADER_URL = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`;
+  ng serve
 ```
 
-If you are still having problems then open an issue in this repo.
+Navigate to http://localhost:4200 to see the app running. The app will automatically reload if you change any of the source files. You can shut down the development server with a `Control C` any time you wish.
 
 ### Code scaffolding
 
@@ -85,13 +48,17 @@ Run `ng generate component component-name` to generate a new component. You can
 
 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.
 
+### Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
 ## Contributing
 
 Esri welcomes contributions from anyone and everyone. Please see our [guidelines for contributing](https://github.com/esri/contributing).
 
 ## Licensing
 
-Copyright 2020 Esri
+Copyright 2019 Esri
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
 

angular.json

@@ -15,27 +15,20 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-builders/custom-webpack:browser",
+          "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "customWebpackConfig": {
-              "path": "./extra-webpack.config.js"
-            },                        
             "outputPath": "dist/angular-cli-esri-map",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "optimization": true,
-            "aot": false,
-            "vendorChunk": false,
             "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss",
-              "node_modules/arcgis-js-api/themes/light/main.css"              
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -71,7 +64,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-builders/custom-webpack:dev-server",
+          "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
             "browserTarget": "angular-cli-esri-map:build"
           },
@@ -88,11 +81,8 @@
           }
         },
         "test": {
-          "builder": "@angular-builders/custom-webpack:karma",
+          "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "customWebpackConfig": {
-              "path": "./extra-webpack.config.js"
-            },            
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",