Angular 2 + Esri 3 + angular cli

AlexOliinyk1 commented 7 years ago

Hi I got this error after trying to use map module

ERROR in ./src/app/app.component.ts Module not found: Error: Can't resolve 'esri/map' in 'C:\Users\alexo\Documents\Visual Studio 2017\Projects\test23\test\esri-system-app\src\app' @ ./src/app/app.component.ts 11:0-27 @ ./src/app/app.module.ts @ ./src/main.ts @ multi ./src/main.ts

My base logic like this load.js

// configure system.js
System.config({
  packages: {
    app: {
      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/Map',
    'esri/views/MapView',
    'esri/widgets/Home/HomeViewModel',
    'esri/request'
  ],

  // 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',
      maintainModuleNames: true,

    // 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'
    // }
  });

index.html

<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
</head>
<body>  
  <script src="https://js.arcgis.com/3.21/init.js"></script>
  <app-root></app-root>
</body>

test module

import { Component } from '@angular/core';
import Map from 'esri/map';
import esriRequest from 'esri/request';

export class AppComponent {
 map: any = null;
  constructor() { }

  ngOnInit() {
       this.map = new Map('esriMap', {
      basemap: 'dark-gray-vector',
      zoom: 4,
      center: [19.1451, 51.9194]
    });   
       }
}

angular.cli.json

...      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/systemjs/dist/system.src.js",
        "../node_modules/esri-system-js/dist/esriSystem.js",
        "load.js"
      ],...

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": ["arcgis-js-api"]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

jwasilgeo commented 7 years ago

I'm seeing a mix of ArcGIS API for JavaScript modules from both v3 and v4 which have very different paradigms and modules available. Since you are using v3.20, in your load.js you should be using only the map module as described here, and get rid of the other modules listed in load.js (i.e. 'esri/views/MapView', 'esri/widgets/Home/HomeViewModel'). Let us know if that helps remove that error and if it begins to put you on the path to success.

AlexOliinyk1 commented 7 years ago

Still doesn't work left only this

import Map from 'esri/map';

and in the load.js

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

esriSystem.register(
  [
    'esri/map' 
  ],

  function() {

    System.import('app/boot')
      .then(null, console.error.bind(console));
  },

  {
      maintainModuleNames: true     
  });

jwasilgeo commented 7 years ago

I have some ideas but I'm still not sure. This just isn't enough for me to have a complete picture to debug this. If you aren't able to create a live sample I can help debug, I would recommend you look at this example:

http://plnkr.co/edit/bZNzdI?p=preview

(which comes from this list in the README: https://github.com/Esri/esri-system-js#example-applications)

In that example you'll see that we had to override the default esri-system-js logic in esriLoad.js, and I have a feeling this is part of the problem:

// by default each module will use everything after the last '/' in their name
// however you can override that for specific modules here
moduleNameOverrides: {
  'esri/map': 'Map'
}

tomwayson commented 7 years ago

@AlexOliinyk1

It sounds like you are using a pre-webpack beta of angular-cli, right? If you are using a webpack version of the cli, as I mentioned in #31, the recommended approach is to follow this example: https://github.com/tomwayson/esri-angular-cli-example.

If you are using and older beta of the cli, I can't guarantee that esri-system-js will work w/ it. esri-system-js needs the scripts to be loaded and executed in a specific order, and I'm not sure that the cli necessarily loads them in the order you list in angular.cli.json. Also, I'm guessing that the cli has it's own code to boot the app (i.e. something likeSystem.import('app/boot')) b/c that code does not appear to be in index.html.

Frist, is app/boot the correct path to the boot module?

Next I suggest that you remove the scripts from the list in angular.cli.json and put actual <script> tags in index.html to replicate as closely as possible the code in the quick start.

If doesn't work, make sure you've got the esri-system-js related code right by modifying @jwasilgeo's plnkr above to match your code.

If you've got esri-system-js working outside the cli, but the same code doesn't work in the cli, I'd suggest looking through the cli code to see if it's bootstrapping the app again after you do in load.js. If so, you'll need to figure out how to only bootstrap the app once after esriSystem.register is done.

Beyond that, I don't think we can help w/ an outdated beta of the cli b/c so much has changed w/ Angular and the cli since then and I'm really only guessing at how the cli used to work.

You might try https://www.npmjs.com/package/systemjs-plugin-dojo instead, which, as a SystemJS plugin, should be much more of a plug and play solution than esri-system-js.

Finally, I think an esri-loader-based solution like angular2-esri-loader should work w/ SystemJS. You won't be able to use import statements, but it has other benefits (you can lazy-load the JSAPI) and seems to be the most popular way of integrating the JSAPI w/ other frameworks. I know you said the above angular-cli example app is "not clear" - perhaps the reason is because it expects webpack and your version is based on SystemJS? If there is some other reason, please feel free to open an issue on that repository.

AlexOliinyk1 commented 7 years ago

@jwasilgeo @tomwayson I can't able upload it to live use plunker or etc., because of a lot of files, but I uploaded this application to repository https://github.com/AlexOliinyk1/esri-system-app About this example http://plnkr.co/edit/bZNzdI?p=preview , it doesn't use "angular cli".

It sounds like you are using a pre-webpack beta of angular-cli, right?

I don't know about version, I'm trying use latest angular cli, I was just generated app using angular cli and moved you logic "esri-system" to my application.

Frist, is app/boot the correct path to the boot module?

It seems it was wrong.

Next I suggest that you remove the scripts from the list in angular.cli.json and put actual Githubissues.
Githubissues is a development platform for aggregating issues.

Esri / esri-system-js

Angular 2 + Esri 3 + angular cli #32