Managing asset paths post ng build: A guide

I've been attempting to use assets to display svg icons on my ESRI map. I'm working with Angular9 and the esri js api, trying to add a symbol from a URL.

Locally, the svg appears on the map, but once I build and deploy the project to IIS, it starts looking for the svg in the wrong location.

This is how I'm building: ng build --base-href ./

Deployment at: Https://myserver/gis-ng/

The page for testing and where the map should be visible: Https://myserver/gis-ng/api.html

The svgs are located at: 

Https://myserver/gis-ng/assets/icons/*.svg

However, it's searching in: 

Https://myserver/assets/icons/*.svg
, which is obviously incorrect.

I tried using --deploy-url, but that didn't resolve the issue.

I'm hoping you can assist me with this problem. Thank you!

angulartypescriptangular-cliarcgis-js-api

Answer №1

In my opinion, the correct base-href should be --base-href /gis-ng/, as this is why the project name "gis-ng" is omitted from the URLs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting problem with Angular2 installation

Can someone please shed light on the current problem I am facing with the updated version of angular-cli? It was running smoothly earlier but now it keeps showing an error message saying "The "@angular/compiler-cli" package was not properly installed." An ...

angularangular-cli

Fetching an image from a fixed storage location with the help of Express JS in Angular 2

Utilizing node js and express on the backend, I have a static folder filled with various images. My current task involves loading these images using angular 2 on the client side. Below is a snippet of my code: Backend side: app.use(express.static(__dirna ...

node.jsangularexpress

Trouble Ensuring First Radio Button Is Checked in Angular 6

I'm working on setting the first radio button in a group to be checked by default. Within my application, I have 6 tabs each containing a set of scales that need to be displayed as radio buttons. The goal is to have the first button in each tab check ...

angularradio-button

Create a constant object interface definition

Is there a way to create an interface for an object defined with the as const syntax? The Events type does not work as intended and causes issues with enforcement. const events = { // how can I define an interface for the events object? test: payload ...

typescript

When using Inertia.js with Typescript, an issue arises where the argument types {} and InertiaFormProps{} are not compatible with the parameter type Partial<VisitOptions> or undefined

I set up a brand new Laravel project and integrated Laravel Breeze along with Typescript support. After creating a form (using useForm()) and utilizing the .post() method with one of the options selected (such as onFinish: () =>), I encountered the fol ...

typescriptlaravelvue.jsinertiajslaravel-breeze

Setting up popover functionality in TypeScript with Bootstrap 4

Seeking assistance with initializing popovers using TypeScript. I am attempting to initialize each element with the data-toggle="popover" attribute found on the page using querySelectorAll(). Here is an example of what I have tried so far: export class P ...

javascriptjquerytypescriptpopover

Issue: the module '@raruto/leaflet-elevation' does not include the expected export 'control' as imported under the alias 'L' . This results in an error message indicating the absence of exports within the module

Looking for guidance on adding a custom Leaflet package to my Angular application called "leaflet-elevation". The package can be found at: https://github.com/Raruto/leaflet-elevation I have attempted to integrate it by running the command: npm i @raruto/ ...

javascriptangulartypescriptnpmleaflet

What is the correct way to nest multiple ng-if statements?

I'm currently grappling with a problem involving multiple nested ngIf directives applied to ng-template elements in Angular.js, and I've yet to find the ideal solution. While I am aware of workarounds, they are not as efficient as I would like th ...

htmlangular

Error: The file type you are trying to upload is not supported

my document-upload.service.ts private uploadFile(file: File) { let formData: FormData = new FormData(); formData.append('uploadFile', file, file.name); let headers = new HttpHeaders({'Content-Type': 'multip ...

angularfile-uploadjax-rs

Troubleshooting issue: Unable to Subscribe to Subject in Angular 5+ with RxJS

My service has an observable that is subscribed to, and the payload is passed to a subject in the service. However, when I subscribe to the subject in my component, nothing happens. I expect to see the output from console.log in the .subscribe method withi ...

angularrxjs

Is the variable empty outside of the subscribe block after it's been assigned?

Why is a variable assigned inside subscribe empty outside subscribe? I understand that subscribe is asynchronous, but I'm not sure how to use await to render this variable. Can someone please help me and provide an explanation? I am attempting to retr ...

javascriptnode.jsangulartypescriptsubscribe

The dynamic links are not supported by Webpack when used with Angular2

The Challenge I am faced with the task of creating a reusable Angular2 component that can display a custom image and be utilized by multiple other components. The goal is to have the flexibility to customize the image being displayed by passing a variable ...

angularwebpack

Encountering an issue with Angular 13 routing where extraction of property fails when returning value as an observable

After receiving an id number from the parent component, I pass it to my child component in order to retrieve a value with multiple properties. To achieve this, I created a service that returns an observable containing the desired object. However, when atte ...

angulartypescriptasynchronousobservable

Creating a filter with Django Rest Framework and Angular 11 by utilizing multiple data values

I've been encountering difficulties with searching and filtering in my current project setup. The technologies I'm using include Django Rest Framework and PostgreSQL for the backend, as well as Angular 11 for the frontend. Here is a snippet of my ...

djangoangulardjango-rest-framework

Discovering all imported dependencies in a TypeScript project: A step-by-step guide

Currently, I am attempting to consolidate external libraries into a vendor bundle through webpack. Instead of manually listing dependencies, I would like to automate this process by scanning all TypeScript files in the directory and generating an array of ...

typescriptwebpack

Tips on effectively rendering child components conditionally in React

My components currently consist of an AddBookPanel containing the AddBookForm. I am looking to implement a feature where the form is displayed upon clicking the 'AddBookButton', and hidden when the 'x' button (image within AddBookForm c ...

javascriptreactjstypescriptreact-hooks

Experiencing an error message stating 'The token ${Token[TOKEN.72]} is invalid' while using cdk synth, specifically when trying to assign the value of ec2.Vpc.cidr from cfnParameter.value

Attempting to utilize the AWS CDK CfnParameter to parameterize the CIDR value of ec2.Vpc. The aim is to make the stack reusable for VPC creation with the CIDR as a customizable value. An error stating "${Token[TOKEN.72]} is not valid" occurs during synthe ...

typescriptaws-cloudformationaws-cdk

Have you utilized the Remember Me feature on the Angular login page before?

Here is the Angular Html code I have written: <form action="#" [formGroup]="login" (ngSubmit)="onSubmit()" class="login-form"> <label for="email">Email</label> <input type=" ...

angularpasswordsangular-cliremember-melogin-page

What is the best way to create a generic array and combine properties?

I have a scenario where I have two objects defined as one and two, each containing props. These objects are then stored in an array called packages. const one = { props: { num: 2 } } const two ={ props: { nam ...

typescript

Getting the specific nested array of objects element using filter in Angular - demystified!

I've been attempting to filter the nested array of objects and showcase the details when the min_age_limit===18. The JSON data is as follows: "centers": [ { "center_id": 603425, "name" ...

javascriptjsonangulartypescriptfilter