IE11 issues with Ember tutorial

Questions
1

Hi everyone,

I’ve recently started learning EmberJS and I’m trying to write an application that works with Chrome/Firefox AND IE11. I’ve been running into a problem where the app will load and render just fine on Chrome/Firefox, but on IE11, the best that I can manage is a “navigation occurred” message in the console. I’ve tried turning on debug messages in environment.js but I get the same result and no new leads to go off of.

Yesterday I tried a different tack and generated the super-rentals app again, just to see if I could get the {welcome-page} to render on both Chrome/Firefox and IE11. Once again, Chrome/Firefox succeeded; IE11 failed to render anything.

Lastly, I tried pulling down from github a completed version of the super-rentals app (from here: GitHub - ember-learn/super-rentals: Codebase for the Super Rentals official tutorial) and seeing if I could get that standing. One ember s later and once again I had a working app in Chrome/Firefox and a blank screen in IE11.

I’ve been scratching my head over this one for a few days now. To me, it seems like it has to do with the fact that IE11 reads and renders code differently than Chrome/Firefox. I would have also guessed I’m missing a polyfill or two for IE11, but I’m not certain how I could track that down if that’s the case. Finally, I’m floored that simply generating super-rentals for the {welcome-page} alone doesn’t render in IE11.

What could be happening here and what suggestions can be offered to follow up on?

Thanks everyone!

2

Look at config/targets.js. It determines which browsers your build will support.

Out of the box, it will support IE11 for production builds, but not in development, because the level of transpilation required for IE11 makes the code harder to read.

To do development against IE11 you would just edit that file so that ie 11 is always in the browsers list.

2 Likes
3

Just tested and can confirm is does not work out of the box. It gives me 2 errors in the console.

4

Right, I would not expect it to work while doing local development on a newly generated app. We intentionally exclude IE11 from the list of development mode targets during ember new foo. It should be quite straight forward to update config/targets.js to support IE11 even in develoment (as @ef4 mentioned above).

5

Just tested and ember build production gives the same 2 errors. Running it with http-server from the dist folder. I don’t understand the IE errors.

6

If you add this to ember-cli-build.js it works.

  let app = new EmberApp(defaults, {
    // Add options here
	'ember-cli-babel': {
      includePolyfill: true
    },
  });
7

We should get these errors triaged and addressed. As the following should result in a functional app in IE11:

ember new foo
ember serve --environment=production

Can you share screenshots and/or stack traces?

8

You may have a typo that was causing your build to still be a dev build. It’s not ember build production, it’s ember build --environment=production.

1 Like
9

I am always using ember deploy production so forgot you need to add --environment= for the build command. Just tested and can confirm IE11 works without adding the includePolyfill: true in the production build.

10

Good morning,

Thank you everyone for your helpful suggestions. I tried each and every one in turn, but unfortunately I wasn’t able to get IE11 to render. Per your suggestion, rwjblue, I ran ember new foo ember serve --environment=production but even good ol’ Foo won’t render a {welcome-page} on IE11.

IE11-Render
IE11-Render1366×768 108 KB
You can see that in the console, I’m not even getting any errors, so I don’t even get the pleasure of having a rabbit hole to fall down/debug.

I did try adding includePolyfill: true to my ember-cli-build.js, but that didn’t have any effect on the resulting blank page.

I’m wondering if this is environmental, but I’m not sure where to begin with determining if it’s something purely on my end. After all, broerse hadn’t encountered any issues with rendering. But it just seems odd that I can’t even get ember new footo render a {welcome-page}. Is there something else here that I’m missing?

Thank you again for all your kind suggestions!

11

It should not be the problem but I noticed your Documentmodes on the left says Edge where my IE says 11.

12

That’s true! However, I don’t have an option for 11. I understand that they’re not identical but I wouldn’t expect that to be the cause of all my problems, since I’ve just as easily changed it to 10 and still found that it doesn’t render. But if there’s some special case I should be handling for Edge versus 11, I’m all ears!

13

I am testing IE11 on Windows 10 and you are on Windows 7. Perhaps it is not working on a Windows 7 IE11 version???

14

Lets say it is not the Documentmodes. We can check if it is your Ember Nodejs stack by checking if you see a blank page when you go to https://bloggr.exmer.com This Ember page works in IE11 on Windows 10.

15

Actually, curiously enough, I don’t see a blank page there.

exmer
exmer1366×768 212 KB

So, if I understand correctly, this means that something in my stack is keeping IE11 from rendering my particular set of apps?

17

I will try to find a Windows 7 PC. Just tested on a customers Windows 2008 R2 PC but it has no IE11 yet.

Perhaps you can try to run GitHub - broerse/ember-cli-blog: Tom Dale's blog example updated for the Ember CLI

18

FWIW, the welcome page addon is not included in production builds (it is stripped). This would explain why you had a blank screen but no errors (there just wasn’t any content in the application template).

19

That would definitely explain a lot… but just to be sure, I tried ember s --environment=development simply to be certain and I’m still receiving a blank page.

Interestingly, I took down the code of the initial app (my work-related stuff, not super-rentals related) and tried ember s on it and found that it renders fine but not when building on the server, which suggests to me that at least my code is fine; it’s the build process that is an issue. And it’s here that I think I’m on my own.

Thank you broerse and rwjblue for your suggestions and help. I appreciate everything you’ve both done very much.

1 Like