Angular app not loading CSS and JS on refreshing page?

Asked 11/8, 2016 at 21:34 Answered 12/8, 2016 at 13:24

I have an app using AngularJS. Here is a link of it - Angular App All the links in the navbar are using default angular router. All the pages work fine when i refresh them, but a page like this loads the content without css and js when i refresh it or go to it directly.

I feel this is a issue with the routing although I am not sure. Here is the app.js file -

angular
  .module('jobSeekerApp', [
    'ngRoute'
  ])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .when('/companies', {
        templateUrl: 'views/companiesall.html',
        controller: 'CompaniesallCtrl',
        controllerAs: 'companies'
      })
      .when('/jobs', {
        templateUrl: 'views/jobsall.html',
        controller: 'JobsallCtrl',
        controllerAs: 'jobs'
      })
      .when('/companies/:id', {
        templateUrl: 'views/company.html',
        controller: 'CompanyCtrl',
        controllerAs: 'company'
      })
      .when('/contact', {
        templateUrl: 'views/contact.html',
        controller: 'ContactCtrl',
        controllerAs: 'contact'
      })
      .otherwise({
        redirectTo: '/'
      });
      $locationProvider.html5Mode(true);
      $locationProvider.hashPrefix = '!';
  });

This is the head from index.html -

<head>
    <meta charset="utf-8">
    <title>Job Seeker</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- 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">
    <base href="/">
  </head>

Salesroom answered 11/8, 2016 at 21:34 Comment(8)

have you tried updating your path to /styles...... instead of styles....? Being that the "styles" folder is on your root". Note the "/". <link rel="stylesheet" href="/styles/main.8c4005ba.css"> – Kienan 11/8, 2016 at 21:37

Thank you for your reply, still the same same issue though. – Salesroom 11/8, 2016 at 22:0

what server you are using? – Theoretician 12/8, 2016 at 9:33

I am using Gunicorn on Heroku. – Salesroom 12/8, 2016 at 10:6

I don't know how to rewrite url in gunicorn but express is pretty EASY. – Theoretician 12/8, 2016 at 10:45

I am using that server only for the rest api, routing for the frontend is done using angular only. – Salesroom 12/8, 2016 at 10:51

yes that's correct but it's your server which is serving the angular application and request pass throw your server, that's why you need to tell your server to serve always only index.html take a look – Theoretician 12/8, 2016 at 11:14

Let us continue this discussion in chat. – Theoretician 12/8, 2016 at 11:17

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>

Salesroom answered 12/8, 2016 at 13:24 Comment(2)

had same problem.. base tag had to be moved up.. Thanks!! – Latialatices 13/5, 2017 at 10:40

Waoh, that small but caused a lot of trouble! Thanks – Marcela 10/3, 2018 at 21:27

You are using html5 history mode and that's why it's not able load the css and js files. you need to use url re-writer for serving index.html whole the time so it can load your css and js files and you can have url without hash.

Note:-

You don't notice it until you don't refresh your page. Everything will work till you hit the refresh button and serve you the static html page without the css and js

What happened when you use html-history mode?

You make an request and before angular can react on that request your server find example.html file and serve that and that files don't have the css or js files it's your index.html which contain all thee files so you need to tell your server that just keep serving index.html and later angular will redirect to the requested page which will be shown in the ng-view and will have all the css and js files.

Server side (Source Angular's documentation)

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a tag is also important for this case, as it allows Angular to differentiate between the part of the url that is the application base and the path that should be handled by the application.

Theoretician answered 12/8, 2016 at 9:21 Comment(0)

Recommended topics

Hot tags