Executing Angular within a Virtual Directory on IIS

My query pertains to Angular2+ (not AngularJS)

We are facing an issue while trying to host our Angular site under a virtual directory within a website on IIS.

The specific setup involves a Website named Development located at: C:\inetpub\wwwroot\Development. Within this folder, there is another folder called Web. This Web folder contains the Angular site code which was built using 

ng build --base-href "/Web" --deploy-url "/Web"

Upon navigating to , everything seems to load correctly except for the 0.chuck.js file. Strangely, this file is being requested as:

http://server/Web0.chuck.jshttps://i.stack.imgur.com/w0iPf.png

It appears that the "/" before the 0 is missing, but we are unsure about where this setting could be managed.

Any insights or suggestions would be greatly appreciated.

angulariisiis-8

Answer №1

It is webpack that manages the URL modification. This process is governed by the --deploy-url command.

To resolve this issue, execute the following command:

ng build --base-href "/Site" --deploy-url "/Site/"

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

It can be time-consuming to render a large quantity of dynamic markers on Leaflet after receiving a response

Incorporating leaflet.js into my web project, I am faced with the challenge of creating a map view with dynamic markers. Upon receiving a response, I attempt to generate dynamic components based on the data and utilize change detection to monitor updates. ...

angularleaflet

Ways to usually connect forms in angular

I created a template form based on various guides, but they are not working as expected. I have defined two models: export class User { constructor(public userId?: UserId, public firstName?: String, public lastName?: String, ...

javascripthtmlangularvalidation

What is the best way to format this DateTime for a more visually appealing appearance within an Angular Material <mat-card-subtitle>?

My date looks like this: 2000-12-16T00:00:00 When displayed in Material code (as the publish_date): <mat-card *ngFor="let book of bookItems"> <mat-card-header > <mat-card-title>{{book.title | titlecase}}</mat-card-title> ...

angularvisual-studiodatetime

Display a fixed three levels of highchart Sunburst upon each click in Angular8

Looking to create a dynamic sunburst highchart that displays three levels at a time while allowing interactive drilling. For instance, if there are 5 levels, the chart should initially show the first three levels. When clicking on level 3, levels 2, 3, and ...

javascriptangulartypescripthighchartssunburst-diagram

Issue with upgrading node from 12v to 16v: Trying to access a property that does not exist, specifically 'splice', within a circular dependency in module exports

After upgrading the node version from 12 to 16, we encountered a debugging console error. The 'Promises' are failing to resolve following this error, leading to the termination of further execution. (node:28112) Warning: Accessing non-existent p ...

node.jsangular

Can you explain the purpose behind using this syntax within the subscribe function?

.subscribe(data=> { this.timezones = data; } Is the 'data' variable used in the .subscribe() method the same as the one declared in the constructor (private: data)? What does the arrow symbol mean and what is its purpose? export class X ...

angular

Swapping out numerical value and backslash with Angular

I am encountering an issue with replacing URL parameters in my code. Take a look at the following code snippet: getTitle() { const title = this.router.url.replace(/\D\//g, ''); return title; } However, it seems to only be removin ...

angulartypescript

Angular 5 offers the ability to incorporate dynamic checkbox input into your application

Here is my code snippet: <input [type]="'checkbox'" [(ngModel)]="inputValue"> <p>Value: {{ inputValue }}</p> I'm puzzled as to why the value in inputValue remains unchanged. Can anyone shed light on this? I am unable to ...

javascriptangularangular-forms

Missing index.html in the ./dist folder following the production build of Angular 8 Universal

After upgrading Angular 7.0 to 8.2.5 in my SSR app, everything seems fine except for the production build. The main issue is that the index.html file is missing in the "./dist/browser" directory. I am running the build using the following command: ng buil ...

angularangular-cliangular-universal

Cannot utilize the subscribed output value within the filter function

I am in need of assistance with my Angular 7 project. I have successfully implemented a service to call a Json file and output an object array. However, I am facing an issue when trying to filter the objects in the array based on a specific property called ...

javascriptangulartypescriptangular7

Using Angular to display asynchronous data with ngIf and observables

In cases where the data is not ready, I prefer to display a loader without sending multiple requests. To achieve this, I utilize the as operator for request reuse. <div class="loading-overlay" *ngIf="this.indicatorService.loadingIndicators[this?.indic ...

javascriptangulartypescriptrxjsobservable

We are unable to update the document in AngularFire as the document reference ID could not be retrieved

I am currently working on an update function that is designed to retrieve a specific document based on its unique document uid, which is connected to the authenticated user's uid. In another part of my code, I have a function that successfully fetche ...

angulartypescriptfirebase

In order to launch an Angular project

Currently, I am in the process of creating a VSS web extension using Angular... To generate a .vsix file, I need to reference an HTML file. The challenge arises when working with Angular because we typically use ng serve which loads our page at http://lo ...

angularazure-devops

The value of a checkbox in Angular 10 is coming out as undefined

Within my component, I set up the formGroup as shown below: constructor(private apiService: ApiService) { this.form = new FormGroup({ product: new FormControl(), shops: new FormGroup({}) }); } When selecting a vendor from a drop-do ...

angular

It is impossible for me to invoke a method within a function

I am new to working with typescript and I have encountered an issue while trying to call the drawMarker() method from locateMe(). The problem seems to be arising because I am calling drawMarker from inside the .on('locationfound', function(e: any ...

javascriptangulartypescriptleaflet

Unable to locate module 'fs'

Hey there, I'm encountering an issue where the simplest Typescript Node.js setup isn't working for me. The error message I'm getting is TS2307: Cannot find module 'fs'. You can check out the question on Stack Overflow here. I&apos ...

node.jsangulartypescript

Angular 2 - Oops! The "app-root" selector isn't finding any elements to match

Currently diving into Angular 2 with no prior experience in Angular. I came across this tutorial: . After implementing a new component called "app-people-list" and making the necessary update in index.html, I encountered the following exception. Can anyon ...

angular

Obtain the ViewContainerRef object from the Component

Looking to create nested components in Angular 4? This is the Chooser Component import {InputComponent} from './input/input.component' import {BlockComponent} from './block/block.component' export const FormChooser = { Block: Block ...

angulartypescript

AsyncPipe encounters an InvalidPipeArgument, signaling a pipe error

I've been exploring Async Pipe and seem to be stuck at this particular point... import { Component, OnDestroy } from '@angular/core'; import { AngularFireDatabase } from 'angularfire2/database'; @Component({ selector: 'a ...

angularfirebasefirebase-realtime-databasepipe

The ngIf directive in Ionic 2 does not refresh after a user logs in

I'm facing an issue with the *ngIf directive in Ionic 2. Below is my code: <div *ngIf="isLogin" class="profile-info ng-binding padding text-center" (click)="openPage(accountPage)"> {{userEmail}} <span menu-toggle="menu-togg ...

angularionic-framework