Angular loading css files taking time and throw error in console

Question

I am using Angular-seed starter project and I wanted to load CSS files according to the language selected by user. I have 2 files for each css file. I have a ltr-bootstrap.css to load everything for English and rtl-bootstrap.css to load rtl version.

To solve this problem. I added a controller in the HTML so that I can control the user selected language and change file names. Here is the code:

Index.html:

<!DOCTYPE html>
<html ng-app="myApp" dir="{{dir}}" ng-controller="HeadController">
<head>
  <meta charset="utf-8">
    <base href="/">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Angular seed</title>

    <!-- For browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="css/{{rtl}}bootstrap.css">

    <!-- custom style -->
    <link rel="stylesheet" href="css/{{rtl}}style.css">


</head>
<body>

    <ul class="menu">
        <li><a href="/view1">view1</a></li>
        <li><a href="/view2">view2</a></li>
    </ul>

    <div ng-view></div>

    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

    <!-- In production use:
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
    -->

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-css/angular-css.min.js"></script>
    <script src="app.js"></script>
    <script src="view1/view1.js"></script>
    <script src="view2/view2.js"></script>

    <script src="dist/bootstrap/js/bootstrap.min.js"></script>

</body>
</html>

app.js

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
    'ngRoute',
    'myApp.view1',
    'myApp.view2'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
    //$locationProvider.hashPrefix('!#');

    $routeProvider.otherwise({redirectTo: '/view1'});

    $locationProvider.html5Mode(true);
}]).
controller('HeadController', function($scope) {
    $scope.rtl = 'rtl-';
    $scope.dir = 'rtl';
});

Everything works fine and rtl-bootstrap is being loaded but it is taking time. Because as soon as I logon to localhot:8000, it tries to load the css files and then angular is being loaded so it throws an error in the console:

GET http://localhost:8000/dist/bootstrap/css/%7B%7Brtl%7D%7Dbootstrap.css 
localhost/:23 Not Found
GET http://localhost:8000/dist/css/%7B%7Brtl%7D%7Dstyle.css Not Found

Just as an advise: try Pascal Precht's angular-translate.github.io ... — MarcoS
– MarcoS, Commented Jul 18, 2016 at 7:19
@Marco|S, thanks for the advice mate. I would use it but we need right to left for arabic language and i am using bootstrap and it doesn't support rtl. We converted it using gul-css-flip to make it work. — Noobish
– Noobish, Commented Jul 18, 2016 at 7:24
I see... Sorry, I never tought about CSS needing RTL support, too... :-( — MarcoS
– MarcoS, Commented Jul 18, 2016 at 7:29

Shintu Joseph · Accepted Answer · 2016-07-18 07:24:55Z

3

The angular braces are included in the url thats the reason for %7b in the url, use the ngHref directive

 ng-href="css/{{rtl}}bootstrap.css"

answered Jul 18, 2016 at 7:24

Shintu Joseph

9627 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shintu Joseph Over a year ago

Pleasure is mine :-)

Shashank Agrawal · Accepted Answer · 2016-07-18 07:28:37Z

-1

Better use ng-href that will ultimately render as href attribute but only if the expression inside the ng-href are resolved fully.

<link rel="stylesheet" ng-href="css/{{rtl}}bootstrap.css">

This also helps in SEO. The crawlers won't see the ng-href neither the href attribute so no additional request to your server will be made by the web crawlers.

answered Jul 18, 2016 at 7:28

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Collectives™ on Stack Overflow

Angular loading css files taking time and throw error in console

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related