Error: Angular unable to locate static assets files

Issue: Encountering a 404 Not Found error when trying to access fonts within the assets folder. 

http://server.com/assets/fonts/Bold/RobotoCondensed-Bold.woff2

However, it works fine in local development: 

http://localhost/assets/fonts/Bold/RobotoCondensed-Bold.woff2

Here are some details: The fonts are located inside the assets folder. They have been successfully copied to the docker image path: 

/usr/share/nginx/html/assets/fonts/Bold/RobotoCondensed-Bold.woff2

When I request 

http://server.com/service/assets/fonts/Bold/RobotoCondensed-Bold.woff2
, the font is retrieved. The /service prefix represents the name of the service being served.

The base href changes during local dev from <base href="/"> to 

<base href="/service/">
on server.com

How can this issue be resolved? I could attempt changing the URL from 

/assets/fonts/Light/RobotoCondensed-Light.woff2
to 
service/assets/fonts/Light/RobotoCondensed-Light.woff2
. However, this would cause the fonts to fail on the local environment where this prefix does not exist.

It's worth mentioning that the favicon.ico is correctly served. In the local environment, the front end requests without a prefix while on the server it requests the favicon with the prefix /service. The favicon is only referenced in index.html:

<link rel="icon" type="image/x-icon" href="favicon.ico" />

_fonts.scss file:

@font-face {
    font-family: 'Roboto Condensed';
    src: url('/assets/fonts/Light/RobotoCondensed-Light.woff2') format('woff2'),
        url('/assets/fonts/Light/RobotoCondensed-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

angular.json file:

"assets": [
    "projects/service/src/favicon.ico",
    "projects/service/src/assets"
],
"styles": [
    "projects/service/src/assets/scss/modules/_fonts.scss"
],

I am new to Angular and frontend development and struggling to resolve this issue. Any assistance will be greatly appreciated.

cssangularnginxfontsstatic-files

Answer №1

In order to properly link my assets, I made sure to use relative paths in the URLs for example.

./assets/fonts/Light/RobotoCondensed-Light.woff

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 come the button is shifting down even though it's set to display inline?

I've recently delved into the world of Bootstrap and CSS, but I'm facing a unique challenge. Despite my research efforts, I couldn't find a solution to my specific issue. I have a <div class="col-md-6"> where I've nested ...

htmlcsstwitter-bootstrapbootstrap-4

Balanced Height Panels - Utilizing Flexbox and flex-wrap: wrap

i'm having trouble with a layout design, specifically with getting the columns to be equal height, especially when the text wraps around. Can anyone provide some guidance? https://i.stack.imgur.com/bbDKj.png Within my HTML template, there are multipl ...

htmlcssflexbox

Issue: CSS breaking in Node.js Express app when navigating with multiple child paths or parameter paths in the route.Description: Encounter

When attempting to load a page like /patient_profile, the CSS loads correctly. However, when continuing the path to /patient_profile/settings_patient_profile, the CSS breaks. Both pages mentioned are the same file, just testing the routing. The route is m ...

cssnode.jsexpressejs

What is the best way to add margins to the elements in a row without disrupting the row layout?

I'm trying to figure out how to add margin between elements in my code snippet without breaking the row. You can view the fiddle here. Although a similar question has been asked on Stack Overflow here, I wasn't able to find a solution that works ...

cssbootstrap-4

What is the best method for choosing the next item with jQuery?

I am facing an issue while trying to apply some design on the next element. The error message that I am encountering is: Error: Syntax error, unrecognized expression: [object Object] > label Below are my selections for browsing by category: BROWSE BY ...

javascriptjquerycss

Strategies for restricting user input within a datalist

I have a project in which I am creating a webpage that displays a list of flights that can be filtered by destination, origin, price, and more. To achieve this, I have categorized each flight within a div element using its specific properties as classes. F ...

javascripthtmlcss

Encountering an error with Angular2 when referencing node modules

I encountered an issue when trying to use angular2 from the node_modules directory. Can anyone guide me on how to resolve this error? Is there something specific I need to include in my HTML file? I am looking for a Git repository where I can access Angu ...

node.jstypescriptangular

Hovering over the Instagram icon will reveal a stunning visual effect

I am looking to change the appearance of my Instagram icon when hovering over it. I want the background to turn white and the icon to become colored. Here is my code snippet from Footer.js : <a href="https://www.instagram. ...

cssreactjsinstagram

Creating a visually appealing 5-star rating system using CSS with a mix of full and half stars

I am looking to visually display the average rating of an entity using a 5-star marker that is customizable via JavaScript for setting or updating the current average rating. The marker should also allow for gradations such as full and half stars. Previou ...

javascripthtmlcss

Error code 422 (Unprocessable Entity) is returned by Ionic 2 when making a POST request

After testing my API in Postman, I found that it works fine with the following data: URL: http://{URL}/password/email Method: POST Header: [{"key":"Accept","value":"application/json","description":""} ,{"key":"Content-Type","value":"application/x-www-fo ...

angulartypescriptionic2

What steps can I take to troubleshoot the issue with ionicons not functioning properly?

After starting to work on my app with Ionic 2, the ionicons were displaying properly. But now, for some reason, they are not showing up at all. Do you have any idea why this might be happening? Is it necessary to add a specific library or something similar ...

angularionic-frameworkionic2

Utilize NestJS to retrieve information from an observable gRPC service

One of the challenges I am facing is using gRPC service to facilitate communication between my microservices. Specifically, when receiving a response from the Grpc service, I need to apply some modifications and additional functionality before returning a ...

node.jsangulargrpcnestjsgrpc-node

The property 'class' is required for ".builders['browser']"

Upon successfully installing the dependencies using npm install, I encountered an error while attempting to run the server: Schema validation failed with the following errors: Data path ".builders['browser']" should have required property ' ...

angularwebpackwebpack-dev-server

The labels assigned to buttons will direct users to unique links specifically designated for that button

I've been working on a website to share some code I created, but my skills in HTML and CSS are not the best. Please forgive me if there are obvious mistakes. Here's the code I have so far: <!DOCTYPE html> <html> <head> ...

htmlcssw3.css

What could be causing my image to lose responsiveness as the screen size gets smaller?

Struggling to figure out why the image is not responsive when the screen size decreases. I'm trying to create a signature block where the image adjusts in size, preventing the wrapper from stacking into two columns and keeping it as one. I've tr ...

htmlcssimageresponsive-designresponsive-images

Incorporate nested components on the fly within Angular 8

As I work on developing my angular 8 application, I find myself faced with the task of dynamically adding a nested component to the parent component upon clicking a button. Essentially, I am looking to create a functionality where the ADD button places the ...

javascriptangularparent-child

The specified 'contactId' property cannot be found within the data type of 'any[]'

I am attempting to filter an array of objects named 'notes'. However, when I attempt this, I encounter the following error: Property 'contactId' does not exist on type 'any[]'. notes: Array < any > [] = []; currentNot ...

arraysangulartypescriptangular6

The HTML classes mentioned do not appear to be present in the document

section, I've observed a common occurrence in HTML pages where classes are referenced that don't seem to exist within the actual document. I wonder if these classes are being sourced from external locations or if they are simply concealed somewhe ...

htmlcss

The service.subscribe function in Angular's Component Constructor is not functioning properly after the update

There are two components in my project, a parent and child component, and I am using a shared service to transfer data between them. The structure of the Service Class is as follows: export class AddItemDataTransferService { // Observable string sourc ...

angularangular-componentsangular5

Incorporating a Link to a RowLabel on a Google Chart Timeline

I have been working diligently on constructing a timeline for our team's Project Roadmap. Everything is set up quite nicely: I've successfully embedded the Timeline into our Google Site and it seems to be functioning well with all the components ...

javascripthtmlcsschartsgoogle-visualization