Difficulty getting arcgis-js-api to work in Typescript application using Webpack

by mfowler   Last Updated September 18, 2018 03:22 AM

I am trying to incorporate the arcgis-js-api into an Angular2/Typescript application I am developing in Visual Studio 2017 using Webpack. I have not been successful in getting it work.

I've gone thru the steps in: https://developers.arcgis.com/javascript/latest/guide/typescript-setup/index.html#install-the-arcgis-api-for-javascript-typings

and:

https://developers.arcgis.com/javascript/latest/guide/using-webpack/index.html

I've downloaded and looked at the webpack example in https://github.com/Esri/jsapi-resources. It works fine.

Here are my files -

package.json:

{
  "name": "s4analytics",
  "version": "1.0.0",
  "description": "Signal Four Analytics",
  "author": "UF GeoPlan Center",
  "scripts": {
    "lint": "npm-run-all lint:*",
    "lint:ts": "tslint --project tsconfig.json -c tslint.local.json \"ClientApp/**/*.ts\" || true",
    "lint:css": "stylelint \"ClientApp/**/*.css\" || true",
    "pkgs": "npm-run-all pkgs:*",
    "pkgs:prune": "npm prune",
    "pkgs:update": "npm update",
    "pkgs:webpack": "webpack --config webpack.config.vendor.js"
  },
  "repository": "https://geodevops.geoplan.ufl.edu/signal-four/S4-Analytics-Html5",
  "license": "UNLICENSED",
  "dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/common": "^5.2.11",
    "@angular/compiler": "^5.2.11",
    "@angular/core": "^5.2.11",
    "@angular/forms": "^5.2.11",
    "@angular/http": "^5.2.11",
    "@angular/platform-browser": "^5.2.11",
    "@angular/platform-browser-dynamic": "^5.2.11",
    "@angular/router": "^5.2.11",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0",
    "@progress/kendo-angular-buttons": "^3.0.1",
    "@progress/kendo-angular-dateinputs": "^2.1.0",
    "@progress/kendo-angular-dropdowns": "^2.1.0",
    "@progress/kendo-angular-excel-export": "^1.0.7",
    "@progress/kendo-angular-grid": "^2.1.2",
    "@progress/kendo-angular-inputs": "^2.2.0",
    "@progress/kendo-angular-intl": "^1.4.1",
    "@progress/kendo-angular-l10n": "^1.2.0",
    "@progress/kendo-angular-layout": "^3.1.1",
    "@progress/kendo-angular-treeview": "^2.2.0",
    "@progress/kendo-angular-upload": "^1.2.2",
    "@progress/kendo-data-query": "^1.4.0",
    "@progress/kendo-drawing": "^1.5.6",
    "@progress/kendo-theme-bootstrap": "^2.13.6",
    "@types/arcgis-js-api": "^4.8.1",
    "bootstrap": "^4.0.0",
    "core-js": "^2.5.7",
    "event-source-polyfill": "^0.0.9",
    "font-awesome": "^4.7.0",
    "highcharts": "^6.1.1",
    "lodash": "^4.17.5",
    "moment": "^2.22.2",
    "og": "0.0.2",
    "ol-ext": "^2.0.5",
    "openlayers": "^4.6.5",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^5.5.11",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@arcgis/webpack-plugin": "^4.8.2",
    "@types/geojson": "1.0.5",
    "@types/highcharts": "^5.0.25",
    "@types/lodash": "^4.14.111",
    "@types/node": "^7.0.67",
    "@types/openlayers": "^4.6.7",
    "angular2-template-loader": "^0.6.0",
    "aspnet-webpack": "^1.0.26",
    "awesome-typescript-loader": "^3.5.0",
    "css": "^2.2.3",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.4",
    "npm-run-all": "^4.1.3",
    "postcss-cssnext": "~2.10.0",
    "postcss-loader": "^1.3.0",
    "tslint": "^5.10.0",
    "tslint-microsoft-contrib": "^4.0.0",
    "typescript": "~2.2.0",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-hot-middleware": "^2.22.2",
    "webpack-merge": "^4.1.3"
  }
}

tsconfig.json

/*
tsconfig.json contains options for the TypeScript compiler,
such as where to save the compiled output, which version of ECMAScript
to target, and so forth. For a full list of options, visit
http://www.typescriptlang.org/docs/handbook/tsconfig-json.html.
*/

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "module": "amd",
    "sourceMap": true,
    "alwaysStrict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "lib": [ "es6", "dom" ],
    "types": [ "node" ]
  },
  "exclude": [ "bin", "node_modules" ],
  "atom": { "rewriteTsconfig": false }
}

webpack.config.js

/*
webpack.config.js defines the configuration for the Webpack utility,
which is responsible for build tasks such as:
- compiling TypeScript to browser-compliant JavaScript
- compiling cssnext to browser-compliant CSS
- minifying JavaScript output
- bundling JavaScript output
- generating source maps for interactive debugging
*/

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const ArcGISPlugin = require('@arcgis/webpack-plugin');

module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('main.css');
    const isDevBuild = !(env && env.prod);
    const outputDir = './wwwroot/dist';
    const imgBaseUrl = process.env.CI_WEB_PATH ? '/' + process.env.CI_WEB_PATH + '/dist/' : '/dist/';

    const config = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: ['.js', '.ts'] },
        entry: { main: './ClientApp/main.ts' },
        output: {
            filename: '[name].js',
            publicPath: '/dist/', // Webpack dev middleware, if enabled, handles requests for this URL prefix
            path: path.join(__dirname, outputDir)
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: ['css-loader', 'postcss-loader'] }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: { loader: 'url-loader', options: { publicPath: imgBaseUrl, useRelativePath: true, limit: 25000 } } }
            ]
        },
        plugins: [
            new ArcGISPlugin(),
            extractCSS,
            new CheckerPlugin(),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(outputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin()
            ])
    };

    return config;
};

When I try to run it from VS (not even doing any imports of the package), it never loads and this shows in the browser console:

GET http://localhost:5000/dist/vendor.css?v=VcTIvLUykX5Qi1aNhnna0VKJkhyIyEVyBnfaN8yPQ1k 500 (Internal Server Error)
GET http://localhost:5000/dist/main.css?v=Rx9W-zNpXcpzeA_8o0GuNWvUpozhXp1hCO4aSVgB18E 500 (Internal Server Error)
GET http://localhost:5000/dist/main.js?v=L9j3-2ODg3688vdiTD82sH4BBl8l5Ag8SCUhuqH5J1E 500 (Internal Server Error)
GET http://localhost:5000/dist/vendor.js?v=o7EmfaQOgVWih8-m8quPkqU6ysRlcYbjF-7oa38J6oQ 500 (Internal Server Error)
GET http://localhost:5000/dist/main.js?v=L9j3-2ODg3688vdiTD82sH4BBl8l5Ag8SCUhuqH5J1E 500 (Internal Server Error)

I hope I've included enough information to be helpful. Why is it not working? I've gone thru the steps several times and keep having the same problem.



Related Questions


cannot append a featureCollection in typescript

Updated September 13, 2017 12:22 PM



Openlayer change:rotation not called

Updated September 05, 2017 21:22 PM

Change style of leaflet draw

Updated May 03, 2018 10:22 AM