What steps do I need to take to ensure that my angular application can be displayed properly on Internet Explorer

I am facing an issue with my application not rendering in ie8. I have added all the necessary shim and shiv scripts, but it still doesn't work. The strange thing is that my application runs perfectly on every other browser version above ie9.

Any help would be greatly appreciated. Here is a snippet of my index.html file:

<!doctype html>
<html class="no-js" xmlns:ng="http://angularjs.org" id='ng-app' ng-app="PredictionApp" >
  <head>
    <meta charset="utf-8">
    <title>Prediction App</title>
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <!-- <link href='http://fonts.googleapis.com/css?family=Roboto:500,300|Crimson+Text:400,600,400italic' rel='stylesheet' type='text/css'> -->
    <link rel="stylesheet" href="ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="bower_components/angular-rangeslider/angular.rangeSlider.css">
    <link rel="stylesheet" href="bower_components/rickshaw/rickshaw.css">
    <link rel="stylesheet" href="bower_components/allmighty-autocomplete/style/autocomplete.css">
    <link rel="stylesheet" href="main.css">
    <!-- endbuild -->

    <!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.min.js"></script>
    <script src="bower_components/es5-shim/es5-shim.min.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <script src="bower_components/r2d3/r2d3.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
    <![endif]-->

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
    <script src="bower_components/angular-rangeslider/angular.rangeSlider.js"></script>
    <script src="bower_components/moment/moment.js"></script>
    <script src="bower_components/lodash/dist/lodash.compat.min.js"></script>
    <script src="bower_components/clndr/clndr.min.js"></script>
    <script src="bower_components/restangular/dist/restangular.js"></script>
    <script src="bower_components/d3/d3.js"></script>
    <script src="bower_components/rickshaw/rickshaw.js"></script>
    <script src="bower_components/allmighty-autocomplete/script/autocomplete.js"></script>
    <script src="bower_components/allmighty-autocomplete/script/app.js"></script>

    <script src="application.js"></script>

  </head>
  <body>
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div class='app-container' ui-view autoscroll="true"></div>

</body>
</html>
javascriptangularjsinternet-explorerinternet-explorer-8cross-browser

Answer №1

It appears that you are using Angular 1.3, which is not officially supported. Please refer to the documentation at https://docs.angularjs.org/guide/ie. You may also consider using Angular 1.2 if you need support for IE 8.

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

Establishing a universal function within Ionic AngularJS

I have the following code snippet, where I have added a reset function that I want to be able to use from ng-click in any part of any template. angular.module('starter', ['ionic', 'starter.controllers', 'starter.services ...

javascriptangularjsionic-framework

What is the method for obtaining the total number of steps taken in a day (pedometer) exclusively for the current day on the

Is there a way to retrieve the total steps count for the current day only? The tizen.humanactivitymonitor.setAccumulativePedometerListener function allows me to access the accumulativeTotalStepCount, which represents the cumulative walking and running ste ...

javascripthtmltizen-wearable-sdk

Shuffling decks of cards among players at a table using JavaScript

Seems like such a simple task, but I can't seem to get it right. The idea is to have an array of 8 other arrays, each containing sets of cards (although in this case, they just have random numbers). Depending on whether passDirection is set to -1 or 1 ...

javascriptarrays

Ways to modify font color in JavaScript "type"

Recently, I came across a fascinating technique where by simply refreshing the page, the text changes sentences. I managed to implement the code successfully, however, I am having trouble changing the color, size, and alignment of the text. <script type ...

javascripthtmlcss

Node.js and Express - Dealing with Callbacks that Return Undefined Prematurely

I've hit a roadblock with this issue that's been haunting me for weeks. The first function in my code queries a MySQL database and returns a response, which is then processed by the second function. The problem lies in the fact that JavaScript ...

javascriptnode.jsexpresscallback

Unlock the Power of JavaScript: Understanding Multidimensional Input Field Array Indexing

Here is a sample HTML form with multidimensional input fields. <tr> <td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td> <td><input name="diameter[0][bottom]" type="te ...

javascripthtmlarrays

A collection of collections

Alright, listen up. I've got a JSON file with an array inside another array. Here's a snippet of the JSON file: { "keys": [ { "game": "Counter-Strike: Global Offensive", "price": "5", "listofkeys" ...

javascriptjsonnode.js

Using interpolation brackets in Angular2 for variables instead of dots

I'm curious if Angular2 has a feature similar to the bracket notation in Javascript that allows you to use variables to select an object property, or if there is another method to achieve the same functionality. Here is the code snippet for reference ...

javascriptangulartypescriptinterpolationangular-template

Generate a fresh number that stands out from the rest of the numbers in the array

I'm facing a challenge with arrays that I can't seem to resolve. My goal is to locate numbers that are not part of the array. The function should only return a value if it's not already in the array, otherwise, it should increment the value ...

javascriptarraysarraylist

Creating dynamic textures through the use of canvas and Three.js rotation

I am attempting to rotate a texture on a single face of a cube using Three.js. Since I am generating the cube multiple times with different textures, I am utilizing a function that creates the material and mesh with a texture parameter. However, I need t ...

javascriptcanvasthree.js

Why is my model binding acting strangely?

My AngularJs application interacts with a RESTful web service using the $resource module. The data retrieved from the resource (salesOrderResource) is stored in the model's vm.rowData. When I log this data to the console within the resource's que ...

angularjs

Is there a framework available to animate Pseudo CSS elements?

Recently, I was working on developing a bar chart that utilized pseudo CSS elements (::before, ::after). While I successfully created bars that look visually appealing, I encountered a challenge when attempting to animate the height changes. Whenever I us ...

javascriptcssjquery-animate

Add items to a fresh record using Mongoose and Express

In my model, I have an array of objects that I want to populate with new items when creating a NEW document. While I have found information on how to achieve this using findAndUpdate, I am struggling to figure out how to do it with the save() method. This ...

javascriptmongodbexpressmongoose

Removing exclamation points from the routing of a state URL is a key aspect of mastering full stack development

Is there a way to remove exclamation marks from the url in state routing using mean.io? Currently, my url looks like http://localhost:3000/#!/auth/register I just want to get rid of the "!" marks after the "#" symbol. Is it possible? Here is the content ...

javascriptangularjsnode.jsexpressmean-stack

Convert a prop into a data attribute using Vue.js 2

I have a basic component being displayed as <House :_people="[{'name': 'Kevin'}, {'name':'Bert'}, {'name': 'Timmy'}]"></House> The structure of the component is like this: <templ ...

javascriptvue.jsvuejs2

Starting a typescript class with an already existing object - a step-by-step guide

Although my question may seem similar to previous ones, I have not found the answer I am looking for, so I am posting it here. Here is my example: Class A{ id:number; name:string; } Class B{ id:number; name:string; age:number; grade:number; } ...

javascriptjsontypescriptobjectinitialization

``There seems to be an issue with the jquery Waterfall plugin where it is not properly waiting for

Utilizing the waterfall plugin with jQuery on my website has been a smooth experience. My current setup involves jQuery 1.9.1 along with Knockout.js for my JavaScript view model. The data is fetched through an ajax call to a web API service, delivering JSO ...

javascriptjqueryajaxknockout.jswaterfall

Improvement in Select2 Change Event: Update the subsequent select2 box options based on the value change in the preceding select2 box

I need assistance with two select boxes, namely Category and Sub-category. My objective is to dynamically alter the available options in the subcategory box based upon the value selected in the category box. Additionally, I would like to load data for the ...

javascriptphpjqueryhtml

Exporting module scope and using node-mysql

I have a database.js file that establishes connections to a database and manages them. I export the connection and reuse it in my application. var mysql = require('mysql'); pool = mysql.createPool({ host: cfg.mysql.host, ...

javascriptmysqlnode.js

The initial request is replaced by new information

Trying to fetch data for autocomplete in Laravel. Controller: public function collection_search(Request $request) { $term = $request->search; $serveurapObj = new Serveurap(); $result = $serveurapObj->collectionAutocomplete(); ...

javascriptphpjqueryajaxlaravel