GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
Already on GitHub? Sign in to your account. Internet Explorer doesn't load the site always. Sometimes it loads and sometimes not. Sometimes an errors occures in the console:. JiaLiPassion Error doesn't appear anymore. I still have the white screen if i don't open the developer tools of internet explorer. I forget to say that i'm using material-design-lite from getmdl.
Chrome is working great.
IE still not working when developer console not opened. But it is only when i'm using MDL. I will test it at home later. Thanks for help. Most notoriously, console is not defined until you open the DevTools. But that isn't the issue in your case afaict. The HTML seems to be rendered correctly, but some containers have 0 height.
I got an error when I install classlist. Doesn't help. Did you found a fix for it? It is an MDL bug. I didn't have any Material design components, and strangely application is loading in IE for dev environment but not in QA environment, can someone please help. This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem. Read more about our automatic conversation locking policy.
Skip to content. Dismiss Join GitHub today GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Sign up. New issue.
Why your Angular App is not Working: 11 common Mistakes
Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. According to this issue reply. Remember to change yourAppName in app:build:es5 to yourAppName!
Go to "tsconfig. Check your tsconfig. While compiling, the dist folder had both es5 and es versions. Basically, compiling for production will create both versions for new and older browsers like IE To test IE11 on development environment, I created a dev environment in angular. You need to change 2 files, polyfills. To support IE fully we had to pull in a special set of polyfills from the mdn-polyfills library. You just need three changes in angular 8. Add a new file called tsconfig-es5.
I had similar issue and resolved with the two below fix. You might have come across many post mentioning about polyfill but that is not the only reason for IE not working as expected.
Add a property "es5BrowserSupport": true in angular. The path is shown in image. Now, change your target property to " es5 " in tsconfig. Complete explanation can be found here.
This really bothered me so I wrote a nodeJs script that will enable the "workaround" defined here: ng github. Being an enterprise dev that turns out tons of angular apps its not ok to do development locally against chrome and firefox only.
Anyone that's done web dev for more than a minute knows that just because it looks cool in chrome doesn't mean IE will be happy. OK rant over just install the script and serve it in IE every now and then and check your app in IE locally before pushing to dev.
Therefore, Angular cli will gracefully generate it on prod. But if you want to run ng serve from local, then you have to manually make sure ng serve is running from a tsconfig file that has target: es5. This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
Learn more. How do I support Internet Explorer in an Angular 8 application? Ask Question. Asked 1 year, 1 month ago. Active 5 days ago. Viewed 56k times. I had a look at the polyfills. I've also ran npm i. James Barrett. James Barrett James Barrett 1, 1 1 gold badge 11 11 silver badges 26 26 bronze badges. EDIT: The screen still remains blank and produces 3 syntax errors in polyfills. Reading error messages is always the first step in identifying what the error is and how it could be fixed.
I probably won't be able to help, but witout knowing anything about the errors, nobody will.GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub?
Sign in to your account. By default in version 8 we enable differential loading for ng build. However for ng test and ng serve we only generate a single ES build which cannot run in IE Disable differential loading completely, Not recommended You can turn differential loading off by changing the target from es to es5 in your tsconfig. Create a new tsconfig tsconfig-es5. In your angular. While that is a "workaround" for now, home come the CLI can't do differential loading in serve mode also, so the application at least behaves the same for both prod and non-prod?
Workaround not working for me when running ng serve --config es5. Try ng serve --configuration es5I think the previous mentioned solution was not working cause config does not exist as an option or alias OOTB. Why differential loading has only been implemented for ng build? Why can't we have an angularCompiler option or an angular. It could even have a default value to turn it off ie the new default behaviour.
For now and for me the only viable option is to switch from ng serve to ng build --watch in combination with npx serve --single -l I will then just loose the live reload. From what I can see of the new differential build, the process is effectively done twice. I imagine it would significantly slow down the dev server reload time if differential loading was enabled by default.
Angular not working in IE11 ?
My project is already pretty slow so I if this was added to the dev server I would vote for it be opt-in.This article addresses supporting Internet Explorer as a browser for your Angular 8.
If you are using an earlier version of Angular, please see my previous article on this topic. In Firefox it looks like this:. Well, it seems to be doing something because at least the title is correct. If we open the Browser Console and re-load the page, we see something like: Unspecified error. You need to change that last line by removing the not. After you make the changes the last line should read:. However, if all you care about is supporting Internet Explorer in production, the previous steps are enough.
Now you can use a web server to test. For example, I will use local-web-server with npx. This serves up your Angular application. Point Internet Explorer at it and you should see:. You can find your tsconfig. Open it up in your IDE or text editor and you will see:. Notice that line: target: es You can change it to es5.
It will then look like this:. Supporting Internet Explorer in Angular is easy if you just remember where to find the polyfills. We're looking for new authors. Find out why we are a great fit for you. The Best Angular Grid in the world.GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. Angular 4 application broken on IE 11 and Edge. This is what I have in polyfills.
Got the same problem, but not in normal IE11, but in an embedded version of IE I got all the polyfills activated, and every npm is up to date. Since fighting it for days I tried different solutions and one guides me to the suggestion that it's a timing problem of loading the polyfills. There is no problem with a blank new "ng new app". Because my app runs in an embedded version of ie11 i can't use any console.
When I just do the alert, the error pops up twice every time i load the script.
A Guide to Angular 8's Differential Loading
When I do the document. After resetting the cache, the problem is there again so it's reproducable. Same problem but after IdentityServer authentication with this package : angular-oauth2-oidc. After long hours of searching I found a workaround for the problem at our specific environment embedded IE. The problem was a registry key in this folder:. Here I found some information about the specific values: web-browser-control-specifying-the-ie-version. Webpages are displayed in IE11 Standards mode, regardless of the!GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. Please run ng --version. Was this an app that wasn't created using the CLI? What change did you do on your code?
The app was created using CLI and I have not changed the code. DOM The code on this page disabled back and forward caching. Dup Please adjust 'polyfills. I am still facing issue with FireForx. In Fireforx content are partially loaded and I see no errors in console.
I have tried all of the above, uncommenting and installing the packages but still on IE it's giving "Syntax Error" polyfills file attached. Although it is possible that they are somehow related as well :. This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem. Read more about our automatic conversation locking policy. Skip to content. Dismiss Join GitHub today GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Sign up. New issue. Jump to bottom. Copy link Quote reply. Please provide us with the following information: OS?
Windows 7 Versions. The log given by the failure. Create a new app using ng new app-name and launch app in IE Thanks!
We'll be in touch soon. Thanks it worked What did you do to make it work? Yup just open pollyfils. This action has been performed automatically by a bot.The simplicity of a product is not the outcome of an unexpected intuition, but is the result of a constant work, which starts from the beginning and continues during the entire realization process.
To complicate, you just need to add everything you want. Everyone is able to complicate. Only few are able to simplify. For some strange reason, the world has not yet forgotten Internet Explorer. How does this feature work? How the browser chooses the correct bundle? It is simpler than you think: the index. Legacy browsers, instead, do not know this attribute and download files with nomodule attributes. Actually, some old browsers download all the files, but they only execute the correct ones.
This feature works fine with the build command, but with the servetest and e2e commands, only the es bundles are created.
We can solve this problem changing our tsconfig. Now we can use the angular. Is the problem solved therefore? Do we need anything else? We still need to test our application on Internet Explorer. If we are on a Windows platform, we can start Internet Explorer and test our application, whereas if we are on a Mac and we have a Parallels license, we can follow the instructions of one of my articles Debugging Angular in Windows with Parallels and run the server on Mac, testing the application on a virtualized instance of Windows.
If we want to use a button to show or to hide a DIV element with the hidden attribute, we can write this simple code:. Moral of the story: you always have to test your code, because as a TDD mantra says "all the code is guilty until proven innocent!
Simplicity must be designed from bases. Complicate is simple simplify is hard.