Working example using an Angular Workspace

[RyannGalea]

Hi All,

Last night I tried creating an Angular workspace using this repo in my Angular Application & couldn't get it to compile.

The reason behind this is that I'm trying to extract out some of the larger features into their own library packages & having them all in a workspace alongside the main project seems like a great option.

I was able to get a normal project working alongside some test library packages, but using the webpack plugin in the application I was unable to figure out the issues.

'ng serve' would hang and wouldn't compile.

Is there a known reason for this? or a working example somewhere I can look at? I did find some info on testing with karma being an issue but couldn't really find good information about that, or even if that is what is causing the issue.

Thanks Ryann,

[RyannGalea]

I just created a basic example repo for further investigation if someone was willing to investigate. It's just a simple workspace with an angular project.

https://github.com/RyannGalea/esri-angular-workspace-example.git

[andygup]

@RyannGalea Here's a working example: https://github.com/Esri/angular-cli-esri-map/tree/arcgis-webpack-angular.

[RyannGalea]

Awesome @andygup, thanks for taking a look.

But I have gotten this working before as that project describes.

In this case I cannot get it working when using an Angular workspace, which is a multiple project folder structure for creating libraries and applications together

[andygup]

@RyannGalea Based on my quick look, it sounds like a configuration issue within your project and not an ArcGIS JS API issue. Did you specifically see ArcGIS JS API errors?

You might compare https://github.com/RyannGalea/esri-angular-workspace-example.git with your other repo https://github.com/Esri/angular-cli-esri-map/issues/74 and see what the differences are.

[RyannGalea]

I'm not getting any Arcgis errors, I guess i wasn't really clear enough.

The configuration seems to be the problem, I have spent 2 nights comparing and trying multiple times but arrive at the same problem hence why I posted here. I'm going to dive back into it now but I am doing the exact same thing in both projects.

The only thing that should be different is the folder structure?

[andygup]

There were some npm install errors, for example I had to manually install nan. I don't think that was the primary issue because I ran into this error when I tried to build the app. I'm not really sure how all this gets configured when using workspaces. You might check into configuring build > scripts in angular.json and set the correct node_module path.

% ng build --verbose --project=outfield
An unhandled exception occurred: ENOENT: no such file or directory, open '/Users/.../.../angular-ws-test/projects/outfield/node_modules/dojo/dojo.js'

[RyannGalea]

Ok, so I got to the bottom of this.

Because I'm trying to setup and use an Angular workspace, It creates applications & libraries into a subfolder called 'projects', and uses a singular 'node_modules' folder at the root.

So I had to update my 'buildEnvironment' variable in the 'ArcGISPlugin' to account for the non root 'node_modules' folder:

module.exports = {
  plugins: [
    new ArcGISPlugin({
      root: "./",
      features: {
        "3d": false
      },
      buildEnvironment: {
        root: "../../node_modules"
      }
    })
  ],
  node: {
    process: false,
    global: false,
    fs: "empty"
  }
};

Great, now it was compiling, but after that issue I was getting hit with:

｢copy-webpack-plugin｣: unable to locate 'dojo\resources\blank.gif' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\dojo\resources\blank.gif'
‼ ｢copy-webpack-plugin｣: unable to locate '@arcgis\webpack-plugin\extras\dojo\' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\@arcgis\webpack-plugin\extras\dojo'
‼ ｢copy-webpack-plugin｣: unable to locate '@arcgis\webpack-plugin\extras\dojo\dojo.js' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\@arcgis\webpack-plugin\extras\dojo\dojo.js'
‼ ｢copy-webpack-plugin｣: unable to locate 'arcgis-js-api\images\' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\arcgis-js-api\images'
‼ ｢copy-webpack-plugin｣: unable to locate 'arcgis-js-api\views\3d\environment\resources\stars.wsv' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\arcgis-js-api\views\3d\environment\resources\stars.wsv'
‼ ｢copy-webpack-plugin｣: unable to locate 'arcgis-js-api\geometry\support\pe-wasm.wasm' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\arcgis-js-api\geometry\support\pe-wasm.wasm'
‼ ｢copy-webpack-plugin｣: unable to locate 'arcgis-js-api\themes\base\images\' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\arcgis-js-api\themes\base\images'
‼ ｢copy-webpack-plugin｣: unable to locate 'arcgis-js-api\core\workers\' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\arcgis-js-api\core\workers'
‼ ｢copy-webpack-plugin｣: unable to locate 'arcgis-js-api\core\workers\worker.js' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\arcgis-js-api\core\workers\worker.js'
‼ ｢copy-webpack-plugin｣: unable to locate 'arcgis-js-api\views\2d\layers\features\' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\arcgis-js-api\views\2d\layers\features'
‼ ｢copy-webpack-plugin｣: unable to locate 'arcgis-js-api\layers\graphics\sources\support\' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\arcgis-js-api\layers\graphics\sources\support'
‼ ｢copy-webpack-plugin｣: unable to locate 'arcgis-js-api\libs\amcharts4\' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\arcgis-js-api\libs\amcharts4'
‼ ｢copy-webpack-plugin｣: unable to locate 'moment\locale\' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\moment\locale'
‼ ｢copy-webpack-plugin｣: unable to locate 'arcgis-js-api\t9n\' at 'C:\esri-angular-workspace-example\projects\outfield\node_modules\arcgis-js-api\t9n'

I tracked this down to the 'requiredPlugins.js' file in this repo, where the 'node_modules' location inside the 'CopyWebpackPlugin' is hardcoded in, expecting the folder to be in the root of the project which it is not. In the meantime I am able to update the location, but it would be nice to have this able to set in the options, or perhaps it would in most cases use the 'buildEnvironment', 'root' string

new CopyWebpackPlugin([
      {
        context: "../../node_modules",
        from: "dojo/resources/blank.gif",
        to: "dojo/resources"
      },
      {
        context: "../../node_modules",
        from: "@arcgis/webpack-plugin/extras/dojo/",
        to: "dojo/"
      },
      {
        context: "../../node_modules",
        from: "@arcgis/webpack-plugin/extras/dojo/dojo.js",
        to: "dojo/dojo-lite.js"
      },
      {
        context: "../../node_modules",
        from: "arcgis-js-api/images/",
        to: "esri/images/"
      },
      {
        context: "../../node_modules",
        from: "arcgis-js-api/views/3d/environment/resources/stars.wsv",
        to: "esri/views/3d/environment/resources/stars.wsv"
      },
      {
        context: "../../node_modules",
        from: "arcgis-js-api/geometry/support/pe-wasm.wasm",
        to: "esri/geometry/support/pe-wasm.wasm"
      },
      {
        context: "../../node_modules",
        from: "arcgis-js-api/themes/base/images/",
        to: "esri/themes/base/images/"
      },
      {
        context: "../../node_modules",
        from: "arcgis-js-api/core/workers/",
        to: "esri/core/workers/"
      },
      {
        context: "../../node_modules",
        from: "arcgis-js-api/core/workers/worker.js",
        to: "esri/core/workers/worker.js",
        transform: optimize
      },
      {
        context: "../../node_modules",
        from: "arcgis-js-api/views/2d/layers/features/",
        to: "esri/views/2d/layers/features/"
      },
      {
        context: "../../node_modules",
        from: "arcgis-js-api/layers/graphics/sources/support/",
        to: "esri/layers/graphics/sources/support/"
      },
      // charts libs and locale
      {
        context: "../../node_modules",
        from: "arcgis-js-api/libs/amcharts4/",
        to: "esri/libs/amcharts4/"
      },
      // Copy the moment locales
      // so they can be dynamically loaded
      {
        context: "../../node_modules",
        from: "moment/locale/",
        to: "moment/locale/"
      },
      // t9n
      {
        context: "../../node_modules",
        from: "arcgis-js-api/t9n/",
        to: "esri/t9n/"
      },
      {
        context: "../../node_modules",
        from: "arcgis-js-api/**/t9n/*.json",
        transformPath(targetPath, absolutePath) {
          return targetPath.replace('arcgis-js-api', 'esri');
        },
      },
      {
        context: "../../node_modules",
        from: "arcgis-js-api/**/**/t9n/*.json",
        transformPath(targetPath, absolutePath) {
          return targetPath.replace('arcgis-js-api', 'esri');
        },
      },
    ])

[andygup]

Awesome. So you are up and running?

[odoe]

There was a similar issue here. Maybe something in that config will help.

// webpack.config.js
output: {
  path: path.resolve(__dirname, 'dist/map'),
  filename: "[name].[chunkhash].js",
  publicPath: "/directory/"
},

// plugins
new ArcGISPlugin({
  environment: {
    root: "/directory",
  }
}),

// You could modify the HtmlWebPackPlugin
// to output the index.html to the
// root of the output
new HtmlWebPackPlugin({
  title: "ArcGIS Template Application",
  template: "./src/index.html",
  filename: "../index.html", // up one from /directory/
  favicon: "./src/assets/favicon.ico",
  chunksSortMode: "none",
  inlineSource: ".(css)$"
}),

[RyannGalea]

Is there any current plans to add this context value to the config? Or perhaps a boolean to use the 'buildEnvironment.root' value

[andygup]

Currently there aren't plans... we are focused on focused on getting an ES Modules build released (alongside the AMD build).

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

This issue has been automatically closed due to inactivity.