Angular App Not Loading CSS and Js on Refreshing Page

Angular app not loading CSS and JS on refreshing page?

Thanks everyone for your help, I found the actual problem in another question. I had to put <base href="/"> above other links in the head of index.html. Here is a link to the correct answer. So now index.html looks like this

<head>
    <meta charset="utf-8">
    <title>Job Seeker</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <base href="/">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/animate.css/animate.css" />
    <link rel="stylesheet" href="bower_components/jssocials/dist/jssocials.css" />
    <link rel="stylesheet" href="bower_components/jssocials/dist/jssocials-theme-flat.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="/styles/main.css">
    <!-- endbuild -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald" rel="stylesheet">
  </head>

Angular app does not load on page refresh

Turns out I had some sort of conflict between the Angular routing and the server routes. I only saw one reference to this, but I guess you can't have a path on the server be the same as an Angular path? Basically I had an Angular route for /customers to take me to the Customers component, and that in turn made a call to the backend server to get the list of customers with a call to /customers. This for some reason works when the page is initially loaded, but refreshing causes the component to not load but the call to the server is made, hence only loading the JSON data and nothing else.

I was using the Angular/Webpack proxy config to attempt to route from localhost:4200/ to localhost:8080/ with something like

{ "/" : "target": "http://localhost:8080" }

I changed my server routes to have an api prefix and the Angular services to make calls to api/whatever and that seems to have fixed it after much frustration. Hopefully this helps someone, but I still don't fully understand why the Angular routing settings and its http client conflict like that, it seems like these shouldn't interfere with each other, but I'm mostly a backend dev and don't understand much about this voodoo front end stuff :) .

Angular 8 CSS doesn't load on refresh, production build

This is because you need to close your <head> tag in your src/index.html file

<!doctype html>
<html lang="hu">
<head>
 <meta charset="utf-8">
 <title>Nebulónia</title>
 <base href="/">
 <!-- all your meta here -->
 <meta name="theme-color" content="#ff7e00">
 </head> <!-- Make sure to close the head tag -->
 <body>

Explanation

Building in prod mode will use the production configuration from angular.json file, which has extractCss set to true

 "configurations": {
        "production": {
          // ...
          "sourceMap": false,
          "extractCss": true,

This will cause all css styles from your app to be extracted to a styles.xyz.css file, which angular tries to inject just before the head tag is closed. Since the tag it not closed in your index.html file, the build process adds the css link to the top of the file.

In dev mode, extractCSS is set to false (in angular 8), meaning that all styles are combines in a stylesxyz.js file, which is added with a script tag at the end of the body, alongside other js scripts

Loosing Styles After Reloading Angular App

I solved by changing the options source map and css extract in angular.json production configuration. I don't know which one is the right yet.

Angular2 does not inject template CSS when refreshing the page

I cloned your repo, your styles are loading fine. The issue you are having is not related to CSS injection. It's related to "if you don't mind me saying" bad design and not using ViewEncapsulation.

Before I explain the issue, I have to say that in your current way of using CSS, you will be better of using one global CSS file.

Explanation
When you don't use view encapsulation, every CSS you import will stick in the page until you refresh it. It will never be removed. And it will be applied to any element on the page that it applies to. And because it's inserted only when you visit the corresponding component/route, when you refresh the page, some CSS doesn't get injected into the page because you haven't visited the component it was on.

I will take the class appContainer as an example to help explaining the problem.

In styles/landingOther.css you have:

.appContainer {
    width: 60%;
}

Because your default route is /landing, when you visit the page http://localhost:3000/, the .appContainer class will be injected to the page and will stay on the page until you refresh. So, when you route to /portfolio, appContainer is still injected in the page and it will get applied. But, when you directly go to http://localhost:3000/portfolio, the landing component is never visited, therefore the .appContainer class was never injected in the page so it will not get applied. And same goes for other classes. I hope you get the logic.

Also, a semi-related note, the css file name in your portfolio.component.ts is wrong. It's in capital case while the actual file is small cased.

Page is not displaying properly until manually refresh Angular

Thank you @The Head Rush for putting me right direction. I m using a bootstrap theme which is not designed for Angular. After digging some Theme js files, I saw some code which is using jQuery code to implement some classes on runtime based on Theme selection. I just called its theme setting function back again, and its works. In my mainlayout component init function, I added this code

  ngOnInit(): void {
    $("#main-wrapper").AdminSettings();
  }

Angular2 : Reloading routed module not fetching js and css files

You have to place your <base href="/"> above the script and link tags in the index.html, because the browser reads from top to bottom. He first approaches the script and link tags and starts processing these. After that he finds the base tag, but then it's already too late and that's when the browser realises he's been an idiot for already fetching those files, but also blaming you a little for not notifying him sooner about the base location. Only way to fix this for you, is to help him, and place the base tag above any resource fetching tags.

Angular App Not Loading CSS and Js on Refreshing Page