Visual Studio 2015 RC1 & Esri System Js #6

davidkwong · 2016-04-25T21:07:17Z

Hello Team,

I am just trying to figure out how to use Esri System Js and Visual Studio ASP.NET Core for my backend.
After spend many days and hours I still not figure out why typescript cannot pick up the esri-mods module.

I can understand that the latest Javascript 4.0 api have no d.ts file at this point . How does typescript pick up the esri-systemjs module ? I am confused. What am I missing ? I use command line tsc the path toward to the tsconfig.json is having the same result. Typescript 1.8.10

Cannot find module 'esri-mods'

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Angular 2 with ASP.NET 5</title>
    <link href="libs/css/bootstrap.css" rel="stylesheet" />
    <!-- 1. Load libraries -->
    <script src="libs/system-polyfills.js"></script>
    <script src="libs/es6-shim.min.js"></script>
    <script src="libs/shims_for_IE.js"></script>
    <script src="libs/angular2-polyfills.js"></script>
    <script src="libs/system.js"></script>
    <script src="libs/rx.js"></script>
    <script src="libs/angular2.dev.js"></script>
    <!--Loading Angular Http Module-->
    <script src="libs/http.dev.js"></script>
    <!--Loading Angular Router-->
    <script src="libs/router.dev.js"></script>

    <!-- load Esri JSAPI -->
    <script src="//js.arcgis.com/4.0beta3/"></script>

    <!-- 2. Configure Esri SystemJS -->
    <script src="libs/esrisystem.js"></script>
</head>
<body>
    <my-app>Loading</my-app>
    <script src="app/load.js"></script>
</body>
</html>

Load.ts

declare var System: any;
declare var esriSystem: any;

System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});

// load esri modules needed by this application
// into a SystemJS module called esri-mods
esriSystem.register(
    // array of Esri module names to load and then register with SystemJS 
    [
        'esri/geometry/Point',
        'esri/geometry/geometryEngineAsync',
        'esri/Graphic',
        'esri/layers/FeatureLayer',
        'esri/layers/GraphicsLayer',
        'esri/Map',
        'esri/symbols/SimpleLineSymbol',
        'esri/symbols/SimpleFillSymbol',
        'esri/views/MapView',
        'esri/views/SceneView'
    ],

    // optional callback function 
    function () {
        // then bootstrap application 
        System.import('app/boot')
            .then(null, console.error.bind(console));
    },
    // optional paramaters 
    {
        // name of SystemJS module that you will import from, defaults to 'esri' 
        outModuleName: 'esri-mods'
        //// by default each module will use everything after the last '/' in their name 
        //// however you can override that for specific modules here 
        //moduleNameOverrides: {
        //    'esri/request': 'esriRequest'
        //}
    });

boot.ts


///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
import {AppComponent} from './app.component'

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(APP_BASE_HREF, { useValue: '/' })
]);

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "noEmitOnError": false,
    "outDir": "../wwwroot/app/"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Package.json

{
  "name": "MapBrowser",
  "version": "0.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "systemjs": "0.19.26",
    "es6-promise": "3.1.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.10",
    "bootstrap": "^3.3.5",
    "jquery": "^2.1.4",
    "esri-system-js": "0.0.3"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings": "^0.6.8"
  }
}

The text was updated successfully, but these errors were encountered:

jwasilgeo · 2016-04-25T21:13:24Z

@davidkwong where are you trying to use esri-mods? For example, in a component you are developing?

Here's an example of how the import statement can be written: https://github.com/jwasilgeo/angular2-esri-playground/blob/master/app/esri-map-view.component.ts#L3

davidkwong · 2016-04-25T21:59:59Z

Is there something that I have to enable before visual studio take account to the Esri System Js.
In fact, i tried to copy the example angular2-esri-playground to it ASP.NET core as the backend. It had the same issue.

What might a good way to step by step to debug/config ? Check out my screenshot.

jwasilgeo · 2016-04-25T22:14:07Z

I don't think you'll be able to get any kind of code completion or IntelliSense out of this. At a minimum you could inform your linter to ignore that 'esri-mods' string. @tomwayson anything else that would explain this more clearly, or on the other hand give @davidkwong more options to work with?

davidkwong · 2016-04-26T00:21:44Z

I agree that I won't be able to have intellisense. One thing I don't understand is that why it won't compile down to plain javascript in visual studio . Is my config in SystemJs has anything to do with that ?

tomwayson · 2016-04-28T07:01:43Z

First, I would say get it compiling at the command line first, then troubleshoot VS.

One thing that jumps out at me is the format: 'register' line in load.ts. I tried adding that to my example app and I got a runtime error: angular2-polyfills.js:1243 Error: http://localhost:3000/app/boot.js detected as register but didn't execute.(…) - maybe that's just b/c I'm on older version of angular2 and it's deps.

Can you try using the same versions of dependencies that are known to work?

Same w/ your tsconfig.json, the settings are slightly different than known working examples. Can you try using exact same config and run tsc?

W/o seeing your app.component that's about all I can suggest.

Unfortunately, I won't be able to help w/ VS studio at all, as I haven't used it in years.

davidkwong · 2016-04-29T19:45:10Z

Tried a couple more times. Change to match the dependency. Still not compiling .I suspect there is some issues with Visual Studio or the ASP.NET Core Framework. I use nodejs and run the example app in the repository and everything seems fine.

I probably wait until ASP.NET Core RC2 before I try it again. So tired about it.

app.component.ts

import 'rxjs/Rx';
import {Component} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import { Map, FeatureLayer, GraphicsLayer } from 'esri-mods';

@Component({
    selector: 'my-app',
    templateUrl: 'app.component.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [HTTP_PROVIDERS, ROUTER_PROVIDERS]
})

@RouteConfig([

])

export class AppComponent {

    pageTitle: string = "Angular GIS App";

}

tomwayson · 2016-04-29T21:19:16Z

Thanks for sharing app.components.ts - I don't see anything in there that looks out of place.

I just want to verify that you're still not able to compile the app from the command line (w/ tsc) and view it in a browser (entirely w/o Visual Studio). Is that true? If so, are you seeing the same error ("Cannot find module 'esri-mods'") at compile time, or different errors? Perhaps you can include the command line compile output?

davidkwong · 2016-05-02T15:59:47Z

Hi @jwasilgeo and @tomwayson

@tomwayson I can confirm that using the command line with tsc without Visual Studio in my own app give me the same error "Cannot find module 'esri-mods'". I cannot fix that so I thought "Forget it I should start again from the working repo @jwasilgeo .

One thing I do find it very strange is that:
After I do npm install and npm start, everything was great. but I was some typing errors. and I thought " sure let me see if I can fix this."I go back to to change the typescript and put back most of the data type and I was at the last error.

When I add "rotation: number = null;" , the error "Cannot find module 'esri-mods'" start coming back".
Can you two reproduce the same issue ? I start thinking merging Angular 2 & Esri Dojo Javascript is a bad idea. drive me nuts.

tomwayson · 2016-05-04T14:00:54Z

@davidkwong, thanks for the details.

So after pulling latest master of https://github.com/jwasilgeo/angular2-esri-playground and running npm install and npm start I do see these type errors

tsc -w
[0] 
[0] app/esri-scene-view.component.ts(14,11): error TS1110: Type expected.
[0] app/map.service.ts(6,10): error TS1110: Type expected.
[0] app/map.service.ts(16,10): error TS1110: Type expected.
[0] app/map.service.ts(27,19): error TS1005: ',' expected.
[0] app/map.service.ts(28,13): error TS1136: Property assignment expected.
[0] app/synced-views.component.ts(52,15): error TS1110: Type expected.
[0] app/synced-views.component.ts(53,22): error TS1110: Type expected.
[0] app/synced-views.component.ts(54,16): error TS1110: Type expected.
[0] app/synced-views.component.ts(55,18): error TS1110: Type expected.
[0] app/view-coordination.service.ts(5,13): error TS1110: Type expected.
[0] app/view-coordination.service.ts(6,13): error TS1110: Type expected.
[0] app/view-coordination.service.ts(7,11): error TS1110: Type expected.
[0] app/view-coordination.service.ts(8,15): error TS1110: Type expected.
[0] 6:19:42 AM - Compilation complete. Watching for file changes.

I then went and added rotation: number = null; to view-coordination.service.ts and it recompiled with one less type error. I fixed all the type errors in that file, and again it recompiled just w/ fewer type errors:

[0] 6:28:27 AM - File change detected. Starting incremental compilation...
[0] app/esri-scene-view.component.ts(14,11): error TS1110: Type expected.
[0] app/map.service.ts(6,10): error TS1110: Type expected.
[0] app/map.service.ts(16,10): error TS1110: Type expected.
[0] app/map.service.ts(27,19): error TS1005: ',' expected.
[0] app/map.service.ts(28,13): error TS1136: Property assignment expected.
[0] app/synced-views.component.ts(52,15): error TS1110: Type expected.
[0] app/synced-views.component.ts(53,22): error TS1110: Type expected.
[0] app/synced-views.component.ts(54,16): error TS1110: Type expected.
[0] app/synced-views.component.ts(55,18): error TS1110: Type expected.
[0] 6:28:28 AM - Compilation complete. Watching for file changes.

The app seems to be running fine after those changes.

Did you fix all the type errors (in other files)? I did that, using type :any for all the esri classes, and you are correct, once I got past all the type errors, I did see this output from tsc:

app/esri-map-view.component.ts(3,30): error TS2307: Cannot find module 'esri-mods'.
[0] app/esri-scene-view.component.ts(4,32): error TS2307: Cannot find module 'esri-mods'.
[0] app/geometry-engine-showcase.component.ts(10,82): error TS2307: Cannot find module 'esri-mods'.

The important part is that the app kept running fine the whole time, even w/ that TS compile error.

I've made a PR to @jwasilgeo's repo to clean up his sloppy code. 😉 You can see the changes I made there.

I use Visual Studio Code when working in TypeScript, and I do also see the errors in the IDE:

However, it does not prevent me from carrying out my workflow. Does that error make it so that you can't work in VisualStudio? If so, then perhaps it's more a matter of Esri Dojo JavaScript & VisualStudio is a bad idea. I would suggest using VisualStudio Code.

So, while it's true that using this library will result in a compiler error message, you can still build apps that work (w/o any runtime errors).

I really appreciate your thorough troubleshooting on this. We definitely need to document the above behavior/limitation. I suggest leaving this issue open until we've done that.

nickcam · 2016-05-06T05:26:00Z

Hi Guys,

I had the same problem in Visual Studio building against the beta. Visual Studio seems to be pickier than other IDE's about being able to find modules at compile time.

@davidkwong - You could set this is field in your tsconfig.json to have VS produce the javascript anyway

"compilerOptions": {
 "noEmitOnError": false,
}

but then you lose the typescript goodness of trapping errors before runtime in my opinion.
What I ended up doing was to create a dummy *.d.ts file that defined blank classes under the module name 'esri-mods' and added it to the top of the ts file where you call bootstrap.

Then every time I'd add an esri module into load.ts I'd also include a fake class in the *.d.ts file. This keeps the VS compiler happy and you can import as per @jwasilgeo example. For example:

declare module "esri-mods" {
    export class Map { constructor(options?: any); }
    export class MapView { constructor(options?: any); }
    export class SceneView { constructor(options?: any); }
}

But...now that the v4 release is out and there's an actual arcgis-js.api.d.ts file. I can't get esri-system-js to work while using the correct .d.ts.

Have just started looking at it really, so will raise another issue if I can't sort it out.

Shawn-Fan · 2016-05-30T05:24:17Z

If you use VS2015 in Windows 7, it looks like very picky but it works fine based in Windows 10

tomwayson · 2016-05-31T20:12:17Z

@Shawn-Fan, good to know.

@nickcam, I like the ideas you raise in #7 for how to use the official d.ts files. I would like to try to get that working, but it will change the way this library works.

What seems to me like the ideal quick fix would be if you could configure TypeScript to specifically ignore this error, but it seems that is not currently possible. I would encourage those on this thread that are affected by this issue to leave a comment on this issue to let the TypeScript team know that it would be helpful to enable the compiler to ignore specific errors.

Shawn-Fan · 2016-06-06T04:33:13Z

Hi Guys,
I try to develop "tomwayson/angular2-esri-example" project in Visual Studio 2015 asp.net core and Angular 2 . everything looks fine... I'll try @davidkwong's project late.

Shawn-Fan · 2016-06-09T00:13:57Z

@davidkwong, I tried same edition of your project in vs 2015 asp.net core 2, it works fine. Can you show both the "views/index.cshtml", and "views/shared/_layout.cshtml" ?

tomwayson · 2017-02-22T05:24:07Z

Closing due to inactivity.

jwasilgeo added the question label Apr 25, 2016

tomwayson mentioned this issue May 4, 2016

fix type errors jwasilgeo/angular2-esri-playground#5

Merged

jwasilgeo mentioned this issue May 25, 2016

Angular2 and ESRI 4 in Visual Studio jwasilgeo/angular2-esri-playground#6

Closed

tomwayson mentioned this issue May 28, 2016

Update to Angular 2 RC1 tomwayson/angular2-esri-example#12

Merged

tomwayson closed this as completed Feb 22, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Visual Studio 2015 RC1 & Esri System Js #6

Visual Studio 2015 RC1 & Esri System Js #6

davidkwong commented Apr 25, 2016 •

edited

Loading

jwasilgeo commented Apr 25, 2016

davidkwong commented Apr 25, 2016

jwasilgeo commented Apr 25, 2016

davidkwong commented Apr 26, 2016

tomwayson commented Apr 28, 2016

davidkwong commented Apr 29, 2016 •

edited

Loading

tomwayson commented Apr 29, 2016

davidkwong commented May 2, 2016

tomwayson commented May 4, 2016

nickcam commented May 6, 2016

Shawn-Fan commented May 30, 2016

tomwayson commented May 31, 2016

Shawn-Fan commented Jun 6, 2016 •

edited

Loading

Shawn-Fan commented Jun 9, 2016

tomwayson commented Feb 22, 2017

Visual Studio 2015 RC1 & Esri System Js #6

Visual Studio 2015 RC1 & Esri System Js #6

Comments

davidkwong commented Apr 25, 2016 • edited Loading

jwasilgeo commented Apr 25, 2016

davidkwong commented Apr 25, 2016

jwasilgeo commented Apr 25, 2016

davidkwong commented Apr 26, 2016

tomwayson commented Apr 28, 2016

davidkwong commented Apr 29, 2016 • edited Loading

tomwayson commented Apr 29, 2016

davidkwong commented May 2, 2016

tomwayson commented May 4, 2016

nickcam commented May 6, 2016

Shawn-Fan commented May 30, 2016

tomwayson commented May 31, 2016

Shawn-Fan commented Jun 6, 2016 • edited Loading

Shawn-Fan commented Jun 9, 2016

tomwayson commented Feb 22, 2017

davidkwong commented Apr 25, 2016 •

edited

Loading

davidkwong commented Apr 29, 2016 •

edited

Loading

Shawn-Fan commented Jun 6, 2016 •

edited

Loading