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

How to dynamically populate a Vue multiple select dropdown with v-for loop?

I have been attempting to implement multi-select questions in Vue using v-for. The Select menu and its options are populated via JSON data. Unfortunately, I am facing difficulty in retrieving the selected results as expected. Whenever I select an option ...

javascriptvue.jsvuejs2

Changing the className of buttons based on user interaction

I'm looking to create a function in React JS that changes the button's color when clicked. Specifically, I want the color of the button to change upon clicking. I have attempted to achieve this using the following code: {"classname" i ...

javascriptreactjs

Mastering the art of navigating through intricate nested properties within JSON data structures

Presented below is a dynamic JSON structure: data = { "name": "deltha", "type": "object", "important": [ "name", "id", "number" ], "information": { "place": { "editable": false, "visible": true }, "info": { ...

javascriptangular

Tips for extracting data from a JQuery table with Python

My goal is to extract information from the top ten items on a manga website using Python Selenium/BeautifulSoup. However, I am facing challenges due to the website loading its content through a jquery script. The tutorials and guides I have followed do not ...

javascriptpythonjqueryseleniumweb-scraping

"Error: The function $(...).autocomplete is not recognized" in conjunction with Oracle Apex

Currently experiencing some frustration trying to solve the issue at hand. The Uncaught TypeError: $(...).autocomplete is not a function error keeps popping up and I have exhausted all resources on Stack Overflow in an attempt to fix it. This problem is oc ...

javascriptjqueryhtmljquery-uioracle-apex

Changing the story in javascript

I am trying to customize the legend to display the following values: 80+ (or 80%+) 75-80 70-75 65-70 60-65 55-50 <50% While I have organized the list in descending order, I seem to be facing an issue with getting the less than symbol to function corr ...

javascriptlist

Tips for uploading information and posting it on a different page with mongoDB and Node.js

I am looking to implement a feature on a website where data is submitted to MongoDB from one page, and then retrieved and displayed on another page. The technologies I am working with include node.js, express, Mongoose, and MongoDB. Currently, the data is ...

javascriptmongodbexpressmongoose

Utilizing Angular 2 directives through an npm package

Wanting to share a directive on npm, I followed the steps in this documentation: Copied the compiled .js file from the .ts file (did not copy the map file) Created a new folder on my desktop and pasted it there Ran npm init and npm publish Started a new ...

node.jsangularnpm

What is the process for incorporating a glossiness / specular texture onto a GLTF model?

QUERY: I currently possess a specular/glossiness texture image for a model that has not yet been integrated into the GLTF model. Is there a way to incorporate/add this texture to my model in order to achieve a reflective/glossy appearance where required? ...

javascriptjsonthree.jstexturesgltf

Understanding Restangular with Typescript can be challenging, especially when dealing with a 'restangularized' response object

In my project, I am working with Angular 1.5.x using TypeScript in combination with restangular to access a remote API. Here is an overview of the scenario: The API endpoint I am connecting to is http://localhost:53384/api/timezones. Making a GET request ...

angularjstypescriptangular-promiserestangulartsd

What is the best method for extracting attribute values from multiple child elements using puppeteer?

When using this code, I can retrieve the attribute value of the first element selected. By adding /html/body/section/div[3]/img<2> or img<3> in the xpath, I am able to retrieve data for subsequent img elements. However, the parent element on t ...

javascriptnode.jsweb-scrapingpuppeteer

Encountered an issue while trying to register a service worker: "[ERROR] Cannot import statement outside

With the utilization of register-service-worker, the boilerplate for registerServiceWorker remained untouched. /* eslint-disable no-console */ import { register } from 'register-service-worker'; if (process.env.NODE_ENV === 'production&ap ...

javascriptvue.jsimportservice-workerecmascript-5

Implementing automatic redirection upon clicking using React without the need for manual clicking

I'm experiencing an issue where the page seems to automatically navigate to another page without clicking on the div. Can anyone explain why this is happening? Here's the code snippet for reference: import React, { Component } from "react&q ...

javascriptreactjsreact-routerreact-router-dom

Using observables rather than promises with async/await

I have a function that returns a promise and utilizes the async/await feature within a loop. async getFilteredGuaranteesByPermissions(): Promise<GuaranteesMetaData[]> { const result = []; for (const guarantees of this.guaranteesMetaData) { ...

javascriptangularrxjs

Tips for adjusting the position of an icon when encountering a line break using Javascript or CSS

After some trial and error, I managed to get it working, but only when the page is initially loaded and not in a responsive manner. Below is the JavaScript code I used. if ( $(".alert-box").height() >= 90 ) { $('.img').css(&apos ...

javascriptjqueryhtmlcssjquery-plugins

Access the specific scope I established in Angular console, excluding the entire scope

Is there a way to access only the $scope elements (variables and functions) created in my controller without getting everything ($$childTail, $$childHead, etc)? I know if I use: angular.element(document.querySelector('<selector-name>')).sc ...

javascriptangularjsconsole

How can a non-commonJS library be effectively integrated into the Webpack environment?

Looking to incorporate an external and non-commonJS library to define an AngularJS module. What is the best approach since directly importing it won't work, like this: import MyLibrary from 'MyLibraryPath' angular.module('MyApp' ...

javascriptangularjswebpackcommonjs

Error message: "AngularJS encountered a $injector:modulerr error in Internet Explorer 11."

I've successfully created an AngularJS App that functions properly on most browsers like Firefox, Opera, Safari, Edge, and Chrome. However, there seems to be a compatibility issue with IE 11. When attempting to open the app in IE 11, the following er ...

javascripthtmlangularjsinternet-explorer

The AJAX request to the REST service is failing to trigger the success function in the AJAX call

Struggling with some issues related to AJAX, specifically when calling a Java REST server that I've developed. While I am relatively new to AJAX, I have put in quite a bit of effort searching for solutions. The problem arises when making a call from a ...

javajavascriptajaxjsonrest

A helpful tip for creating line breaks within a Vue JS v-for loop using CSS

I am looking to arrange the names in alphabetical order when a list item is clicked. My tools of choice are Vue.js and Flex Grid. The list item I am working with is called ListAll, When clicking on ListAll, I want to display all the records grouped by na ...

javascriptcssvue.jsvuejs2flexboxgrid