1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.