Implementing CSS Pre-loading in an Angular Application with Webpack and Heroku

My current setup involves an Angular application (v4.0.1) with webpack deployed on Heroku. I have a loading spinner in place to show while the app is loading, and it works well locally. However, when deployed on Heroku, the loading spinner (specifically the CSS for spinning the loading spinner) doesn't seem to be loading properly.

I've attempted multiple fixes to solve this issue, but nothing seems to work in production. All the CSS files within the app load correctly after the app loads, except for the one CSS file I included in the index.html specifically for the loading spinner, which needs to be available before the Angular app loads.

Here is my simplified file structure:

.
+-- config/
+-- src/
|   +-- app/
|   +-- assets/
|      +-- icons/
|          +-- loading-spinner.svg
|      +-- stylesheets/
|          +--- loading-spinner.css
|    +-- vendor/
|    +-- index.html
|    +-- main.ts
|    +-- polyfills.ts
|    +-- tsconfig.json
+-- package.json
+-- server.js

This is how my index.html looks:

<!DOCTYPE html>
<html>
  <head>
    <base href="/">
    <title>Stylist Suite 2.0</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="src/assets/stylesheets/loading-spinner.css">
  </head>
  <body>
    <ss-app>
      <div class="loading-spinner ss-loading"></div>
    </ss-app>
  </body>
</html>

Here is a snippet from my loading-spinner.css file:

/* --- Loading Spinner - Needed Before App Loads ---*/

.loading-spinner {
  width: 42px;
  height: 44px;

  background: url("../icons/loading-spinner.svg") no-repeat;
  margin: 0 auto;
  animation: spin 2.5s linear infinite;

  -webkit-animation: spin 2.5s linear infinite;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spinner .ss-loading {
  position: fixed;
  top:50%;
  left:50%;
  margin-left:-21px;
  margin-top: -22px;
  align-self: center;
  justify-self: center;
}

If you think the issue might be with the webpack.prod.js file, please take a look at the provided configurations and offer any advice or solutions. Thank you.

Answer №1

It seems like you followed the Angular docs on webpack exactly as they are written. In the documentation, they use a global stylesheet called src/assets/css/styles.css and import it into the AppComponent.

import '../assets/css/styles.css';

@Component({
})
export class AppComponent { }

When you import a file like this, the ExtractTextPlugin will extract the content and create a styles.css file, which is then linked in the output HTML file. The name of the output file is not related to the original filename. styles.css is simply the name configured for the ExtractTextPlugin.

If you look in the dist folder and check the index.html, you will see a styles.[hash].css file linked there.

You should handle loader css in the same way. By importing it into the AppComponent, the loader css will be included in the styles.[hash].css file. It's not necessary to separate loader css from other global styles, as the browser waits to render until all stylesheets are loaded.

The dev server behaves differently because it has a public path configured to serve files. Assets are accessible from the server during development, but when building for production, these assets need to be imported to be included in the build by webpack.

There's no need to manually add the loader css to the index.html, as it will work in both development and production just by importing it. The same goes for SVG files – webpack will handle including them in the production build.

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

What is the best way to move information from one table to a different one?

I have two tables: users2 and user_totals. Each of these tables has rows named clicks (impression_count), fclicks (use_count), and completed_stus (completion_count). The ones in brackets are the new additions in the user_totals table. I would like to tra ...

What might be causing the navigation to malfunction in Firefox?

Could you please help me identify the issue with the navigation on this website? It seems to work correctly on webkit, but not on firefox! Intended vs actual ...

What is the reason for Akita statestore returning an empty entity instead of the updated entity?

I'm utilizing Akita as the state management solution for my Angular application. Currently, I can retrieve data from a backend server and populate my store successfully (the data is displayed in components). However, when attempting to update an enti ...

What could be causing the flex item to overstep its bounds in the mobile view?

Just starting to dive into the world of CSS and HTML, I am currently experimenting with FlexBox. I have encountered an issue with my layout and I can't seem to figure out why my second div (.rightContainer) is overflowing its parent. I have tried remo ...

Tracking events in Angular 4 using angulartics2 and Adobe Analytics: A step-by-step guide

I've been working on tracking page views in my Angular 4 application, specifically with Adobe Analytics. Currently, I am utilizing angulartics2 for this purpose. First step was adding the necessary script for Adobe Staging in my index.html page: &l ...

What is the best way to eliminate the pause in my slideshow?

After spending a few hours working on this project, I've almost completed it. However, I'm facing an issue with the slideshow functionality. It seems to pause after cycling through all the images. Any suggestions on why this might be happening? ...

What is the reason for Angular httpClient returning an Observable rather than a Promise?

After implementing a spring reactive backend that returns a Flux<> object, I encountered an issue when using angular's httpClient to call the service. Despite subscribing to the observable returned, the result never seems to trigger. This led me ...

Tips for sizing a div based on the dimensions of an image

Looking to Achieve: I have a PNG image of a shirt with a transparent background that I want to place on top of a colored square. I want the shirt in the image to stand out over the edges of the square, creating a visually appealing effect. The image's ...

Alignment of button within bootstrap column is skewed when screen size is reduced

My button is perfectly centered in one of my bootstrap columns, but things start to get messy when the screen size shrinks and the button overlaps with another column containing text. Adjusting the margins only seems to make things weirder. .center-btn- ...

Having trouble with importing and receiving the error message "Module 'clone' not found."

When trying to use clone.js in Angular 2, I imported it with import * as clone from 'clone'. It was listed in my package.json dependencies and successfully imported into node_modules. However, when viewing the output, I encountered the error mes ...

Make Fomantic-UI (Angular-JS) sidebar scroll independently

Is there a way to make a sidebar scroll independently of the content it pushes? Currently, my page is structured like this: -------------------------- |[button] Header | -------------------------- |S | Main content | |i | ...

Customizing the header template in ag-Grid for Angular 2

I have implemented ag-grid within an ng2 component. Now, I am trying to make the first header a checkbox with the parent functionality. How can I achieve this from the container component? ag-grid.component @Component({ moduleId: module.id, selecto ...

Creating a visually appealing multi-bar chart in AngularJS: Tips for effectively presenting data

Imagine that I have the JSON data below: [ { month: "Jan", cost: 80, energy: 90 }, { month: "Feb", cost: 50, energy: 80 }, { month: ...

Angular 2 - Component Loading Screen

I'm looking for a solution for my loading component that shows a spinner and retrieves a remote configuration file necessary for the app to work. Is there a way to have all routes pass through the loading component first to ensure the config data is l ...

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

Hey there, is it possible to achieve this with CSS or JavaScript? I require it for a Birt report. ...

Switching between two distinct templateUrls within an Angular 6 component

When working with Angular 6, we are faced with having two different templates (.html) for each component, and the need to change them based on the deployment environment. We are currently exploring the best practices for accomplishing this task. Some pos ...

Two sets of buttons, however, one set is carrying out the incorrect function

I am trying to create two button sets that, when clicked, are supposed to angle the text below them at 45 degrees. However, I am facing an issue where both set 1 and set 2 only control the text linked to button 1. I need each button set to control their ...

Simplifying HTML/CSS tasks with effective tools

Looking to create a user-friendly web interface for company employees without spending too much time on design and markup. The end result doesn't have to be fancy, just clean HTML/CSS. Any suggestions for tools or techniques to streamline this proces ...

The jQuery plugin functions smoothly when running on localhost, but it causes issues with the background image when deployed on the web

I created a compact plugin to show a cookie message. While testing it on my local machine, everything functioned smoothly without affecting any web pages. However, once I transferred the files to the server, I encountered issues such as: A background ima ...

Is it possible to display a Processing message at the beginning of a datatables table already containing data?

Within my Laravel 5.7 application, I have implemented the "yajra/laravel-datatables-oracle": "~8.0" library and found a helpful thread on customizing the processing message at this link. I adjusted the processing message styling as follows: .dataTables_pr ...