The file could not be located on the server during the project build and upload process

Presently, I'm engrossed in a project involving Angular 9 and ASP Core 3.

You can find the website at:

Nevertheless, encountering an error when trying to access this URL:

http://mag-testcpl.astromap.ir/assets/vendors/global/toastr.css

The culprit seems to be this HTML snippet:

<head>
<meta charset="utf-8">
... (omitted for brevity) ...
<link id="toaster" href="./assets/vendors/global/toastr.css" rel="stylesheet">
... (omitted for brevity) ...

Upon entering the above URL in the browser, it fails to display any content. However, tweaking the URL to include '/app' like so: 

http://mag-testcpl.astromap.ir/app/assets/vendors/global/toastr.css

Add /app to the URL.

This adjustment allows the file to be displayed without issues.

I attempted building the project with the following command: ng build --prod --base-href /app

What steps should I take to resolve this issue?

.... (omitted for brevity) ....
    </div></questionbody>
<exquestionbody>
<div class="question">
                
<p>i have a project in angular 9 and asp core 3 .</p>

<p>this is addres of site :<a href="http://mag-testcpl.astromap.ir/" rel="nofollow noreferrer">http://mag-testcpl.astromap.ir/</a></p>

<p>and it show me this error: </p>

<p><code>http://mag-testcpl.astromap.ir/assets/vendors/global/toastr.css



and this is in my html :



<head>
<meta charset="utf-8">
<title>Astronomy Mag | Admin panel</title>
<base href="/app">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./assets/media/logos/favicon.png">
<link id="mainStyle" href="./assets/css/demo1/style.bundle.main.css" rel="stylesheet">
<link id="ltrStyle" href="./assets/css/demo1/style.bundle.css" rel="stylesheet">
<link id="rtlStyle" href="./assets/css/demo1/style.bundle.rtl.css" rel="stylesheet">
<link id="toaster" href="./assets/vendors/global/toastr.css" rel="stylesheet">

<style>

</style>







when i enter this url in brwoser 
http://mag-testcpl.astromap.ir/assets/vendors/global/toastr.css

it not show me any things but when i enter this url in by this 
http://mag-testcpl.astromap.ir/app/assets/vendors/global/toastr.css




  
add /app to url





it's worked and show me file . 



i build the project with this command ng build --prod --base-href /app



how  can i solve this problem ?????



   "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/avastar",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.png",
          "src/assets"
        ],
        "styles": [
          "src/styles.scss",
          "./node_modules/quill/assets/snow.styl",
          "./node_modules/quill/assets/core.styl",
          "./node_modules/quill/assets/bubble.styl"
        ],
        "scripts": [
          "src/assets/vendors/global/vendors.bundle.js",
          "src/assets/js/demo1/scripts.bundle.js"
        ],
        "stylePreprocessorOptions": {
          "includePaths": [
            "src",
            "src/stylings/",
            "src/stylings/base/",
            "src/stylings/kt-customs/"
          ]
        },
        "es5BrowserSupport": true
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": false,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "5mb",
              "maximumError": "10mb"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "avastar:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "avastar:build:production"
        }
      }
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "avastar:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "karmaConfig": "src/karma.conf.js",
        "styles": [
          "src/styles.scss"
        ],
        "scripts": [],
        "assets": [
          "src/assets"
        ]
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "src/tsconfig.app.json",
          "src/tsconfig.spec.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    }
  }
javascriptangulartypescript

Answer №1

To begin, let's grasp the concept of base href

When you need to utilize different base paths for your router and static assets, Angular relies on the base href attribute to instruct the router how to construct navigation URLs. If your application is located at the root, you can simply use "/" as the href value. <base href="/"> ==> HTML

In my case, I wanted to set /users as the base path for my router and /public as the base for my assets. <base href="/users"> && 

<link href="/public/styles.xxxx.bundle.css" rel="stylesheet"/>

Therefore, make sure to execute this command: 

ng build -prod --base-href /users --deploy-url /public

The main question to consider here is whether adding app to your route is necessary. If not, stick with using ng build --prod

I hope this explanation proves useful.

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

Additional GET request made after update request

After the user updates their contact information in the frontend application, the state is updated and a PUT API request is made to update the current information. When updating user contact details with a PUT call, should another GET call be made to retr ...

javascriptangularjsreactjsrest

Trouble selecting options in hierarchical data

I've been attempting to run this sample code for selecting an option from a select element with hierarchical data, but it seems to be having some issues. $scope.options = [ { id: 1, info: { label: "Item 1" } }, { id: 2, info: { label: ...

javascripthtmlangularjs

Define the content and appearance of the TD element located at the x (column) and y (row) coordinates within a table

In my database, I have stored the row and column as X and Y coordinates. Is there a straightforward way to write code that can update the text in a specific td element within a table? Here is what I attempted: $('#sTab tr:eq('racks[i].punkt.y&a ...

javascriptjqueryhtml

Having trouble fixing TypeScript bugs in Visual Studio Code

I am encountering a similar issue as discussed in this solution: Unable to debug Typescript in VSCode Regrettably, the suggested solution does not seem to resolve my problem. Any assistance would be greatly appreciated. My directory structure looks like ...

node.jsdebuggingtypescriptvisual-studio-code

Problem with geocoding to retrieve a list of terrestrial coordinates

I am currently working on developing a functionality that can return an array of land-based coordinates. I have utilized Google's geocoder to create individual land-based coordinates successfully, but now I want to implement it in a way where an array ...

javascript

How can one restrict the display of fields in the Meteor aldeed tabular package?

How can I restrict certain data from being displayed in an aldeed tabular datatable? For instance, if my collection includes attributes A, B, C, D and attribute C contains sensitive information that should not be published, is there a way to prevent it fro ...

javascriptmongodbmeteordatatable

Is there a way to retrieve the resolved data within the route definition in Angular?

I am looking to execute some actions within the route definition once the lazyloaded module is loaded. The route includes a resolver called UserDataResolverService. How can I retrieve and utilize the resolved data within the route definition? { ...

angular

What steps can I take to fix the 'node module error' while deploying a project on Vercel?

While working with the world-countries package, I encountered an issue during deployment in Vercel. The error message indicated that a ';' was missing in the index.d.ts file of world-countries located in the node_module directory. Here is the ex ...

typescriptdeploymentnode-modulesvercelnext.js13

What is the best way to organize objects based on their timestamps?

I am faced with the task of merging two arrays of objects into a single array based on their timestamps. One array contains exact second timestamps, while the other consists of hourly ranges. My goal is to incorporate the 'humidity' values from t ...

arraystypescriptsortingtimestamp

Step-by-step guide on inserting a div element or hotspot within a 360 panorama image using three.js

As I work on creating a virtual tour using 360 images, I am looking to include hotspots or div elements within the image that can be clicked. How can I store data in my database from the event values such as angle value, event.clientX, and event.clientY wh ...

javascriptthree.js360-panorama

Error message: Unable to locate module when using a variable to import an image in React

I've encountered an issue with my React code that I can't seem to figure out. I am integrating the Accuweather API and trying to display the weather icon on my app. Initially, everything seemed to be working fine as I constructed the image path l ...

javascriptreactjscreate-react-app

The error message encountered is "Uncaught (in promise) Error: Unable to access attributes of an undefined object (reading 'launch')."

I am currently learning electron.js by developing a basic application that extracts information from a website. However, I am encountering a frustrating and annoying error. Here is the folder structure of my project The following code snippet represents ...

javascripthtmlnode.jselectron

Having trouble getting my angular form validation to function properly

Even though I disabled Bootstrap's validation while using Angular, the validation for every input field still doesn't work. It seems like I have everything set up correctly. My code looks like this below with no success on input validation: < ...

javascriptangularjsformstwitter-bootstrap

Utilize jQuery to substitute numbers with strings through replacement

My question pertains to the topic discussed here. I am looking for a more refined jQuery replacement function that can substitute a number with a string. My PHP script returns numbers in the format of 1.27 Based on a specified range, these numbers need ...

javascriptjqueryreplace

Custom HTML binding in expanding rows of Angular 2 DataTables

I am currently working on implementing a data table feature that allows for an extended child row to be displayed when clicking the + icon. This row will show additional data along with some buttons that are bound via AJAX before transitioning to Angular 2 ...

javascriptangulartypescriptangular2-template

What is the best way to obtain a unique dynamic id?

This is the unique identifier retrieved from the database. <input type="hidden" name="getID" value="<?php echo $row['ID']; ?>"> <input type="submit" name="getbtn" value="Get ID"> How can I fetch and display the specific dynami ...

javascriptphparrays

Retrieve information prior to CanActivation being invoked

As I develop a web application utilizing REST to retrieve data (using Spring Boot), the server employs cookies for authenticating logged-in users. Upon user signing in, I store their information in the AuthenticationHolderService service (located in root ...

angulartypescript

A mistake has occurred: Unhandled promise rejection TypeError: Unable to assign the property 'devices' to an undefined object in Ionic 4 with Angular

Within my MyDevicesPage class, I am attempting to manipulate the res object and then pass it to the updateDevicesToServer method of DataService for further actions. The code compiles without errors, but at runtime, an error is thrown: ERROR Error: Uncaught ...

javascriptangulartypescriptionic-frameworkinterface

How can I retrieve the current session's username when passport.js is returning a promise containing `{false}` for `req.user`?

While working in Node.js, I implemented the passportJS LocalStrategy to handle user authentication. One of the functionalities I used was req.getAuthenticated() This function allows me to check if the current session is authenticated. Next, I needed to r ...

javascriptnode.jsexpresspassport.js

Initializing an Express app with JSON file loading

My movie-finding application relies on backend API calls to function. As part of the initialization process, I need to load two JSON files: one containing a list of languages for searching (lang.json) and another stored in the config variable that provides ...

javascriptjsonnode.jsexpressbackend