Closed losciur closed 3 years ago
http://localhost/assets//esri/core/workers/chunks/70f27ac….js' failed to load.
There's a double-slash "assets//esri" in the assets path. Double check your asset copy code path in angular.json
.
This is an app developed with ionic capacitor and angular.
I'm sorry but in my angular.json
there's not any double-slash.
This is my file.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"allowedCommonJsDependencies": [
"moment"
],
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
},
{
"glob": "**/*",
"input": "node_modules/@arcgis/core/assets",
"output": "assets"
},
"src/favicon.ico",
"src/assets"
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
{
"input": "node_modules/@arcgis/core/assets/esri/themes/light/main.css"
}
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"ci": {
"progress": false
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"ci": {
"progress": false
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"styles": [],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}
]
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": ["**/node_modules/**"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"devServerTarget": "app:serve:production"
},
"ci": {
"devServerTarget": "app:serve:ci"
}
}
},
"ionic-cordova-build": {
"builder": "@ionic/angular-toolkit:cordova-build",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
},
"ionic-cordova-serve": {
"builder": "@ionic/angular-toolkit:cordova-serve",
"options": {
"cordovaBuildTarget": "app:ionic-cordova-build",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"cordovaBuildTarget": "app:ionic-cordova-build:production",
"devServerTarget": "app:serve:production"
}
}
}
}
}
},
"cli": {
"defaultCollection": "@ionic/angular-toolkit"
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}
Thanks that helps. Are you seeing any 404s in the developer console's network tab? Can you load the localhost URL that's failing into a browser window and display the .js file?
I don't have a windows machine to test it, but my best guess is it has to do with how the "output": "assets"
directory path is configured and how your local webserver is configured. My local Apache install ignores double slashes, and I only see double slashes when I use "assets" instead of "/assets/".
One suggestion is to try removing this object from options.assets
:
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
And, try experimenting with the output for the JS API assets, for example:
{
"glob": "**/*",
"input": "node_modules/@arcgis/core/assets",
"output": "/assets/"
},
Hi, sorry for the late. I tried removing, and I tried with "/assets/", but nothing change.
I see 404:
I don't understand when you say: Can you load the localhost URL that's failing into a browser window and display the .js file? I develop using ionic and I lanch the app in a physical device, then I open Chrome DevTools.
Thanks for help!
Hi @losciur, you'll need to figure out the correct directory path to the assets. Here's some steps that I recommend:
esriConfig.assetsPath
so that the JS API correctly resolves the location. https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#assetsPathDone!!!
It works by setting:
config.assetsPath = './assets';
Thank you very much for the help.
Hi, I try to load this basemap:
The basemap is only partially load:
And I get this error in Chrome DevTools:
Uncaught (in promise) DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost/assets//esri/core/workers/chunks/70f27ac….js' failed to load.
You can reach the basemap from here: https://arpapiemonte.maps.arcgis.com/home/item.html?id=14b17ca5ac5d4364b3e7f6e5bee35f9e
Thanks for help!