Hi, thanks for reporting this. However this is now by design in version 8.

By default in version 8 we enable differential loading for ng build. However for ng test and ng serve we only generate a single ES2015 build which cannot run in IE 11.

There are a couple of options that you can do if you want to have ES5 code during serve.

1. Disable differential loading completely, (Not recommended) You can turn differential loading off by changing the target from es2015 to es5 in your tsconfig.json

2. Have multiple configurations for serve.

Create a new tsconfig tsconfig-es5.app.json next to tsconfig.app.json with the below contents

{
 "extends": "./tsconfig.app.json",
 "compilerOptions": {
     "target": "es5" 
  }
}

In your angular.json add two new configuration section under the build and serve target to provide a new tsconfig.

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
      ...
  },
  "configurations": {
    "production": {
        ...
    },
    "es5": {
      "tsConfig": "./tsconfig-es5.app.json"
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "app:build:es5"
    }
  }
},

You can then run the serve with this configuration using the below command.

ng serve --configuration es5

From what I can see of the new differential build, the process is effectively done twice. i.e. once for es5 and once for es6. I imagine it would significantly slow down the dev server reload time if differential loading was enabled by default. My project is already pretty slow so I if this was added to the dev server I would vote for it be opt-in. Personally, I think the ng serve -c es5 workaround is fine, but it would be great if it was documented on the main angular.io site.

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?

    "es5": {
      "tsConfig": "./tsconfig-es5.app.json"
    }

shouldn’t it read src/tsconfig-es5.app.json instead? tsconfig.app.json lives under src/ and therefore I created tsconfig-es5.app.json there, next to it.

and I think it is worth pointing out that in

{
  "browserTarget": "app:build:es5"
}

“app” should be replaced by the actual app name (actual key value used under “project” key)

@alan-agius4 can we think about the possibility of adding an option in the cli menus? to ask if we want IE support for ng serve and auto generate tsconfig.es5.json and the needed updates in package.json/angular.json if the dev answers Yes.

For me it makes it boring and it’s waste! to do this manually each time i create a project : ) and also you forced [by design] the creation of this -> https://github.com/ChrisMeeusen/ng-ie-serve

Hope you do something (lean) about it, Angular Team.

Workaround not working for me when running ng serve --config es5. The CLI returns Unknown option: '--config' and Unknown option: 'es5'

I ran ng s -c=es5 which worked for me

Try ng serve --configuration es5, I think the previous mentioned solution was not working cause config does not exist as an option or alias OOTB

@ciesielskico You are mixing up the serve and build sections. Take a closer look at the example above.

If this can be usefull to someone else, my coworker was able to figure it out. It was something missing interacting with bootstrap that he fixed with something like this:

@import './variables';
.row {
    width: calc( 100% + (#{$gutter} * 2));
}

Some more testing required but it seem to be fine now.

Hello,

We had the issue too while migrating as we have to support IE10-IE11. I have followed the instructions here and read other related threads and that helped fixing the script issues and supporting IE for local dev testing (ng serve) but there is still a issues in rendering. Could be related to flex / break-points calculations . We use Material with Bootstrap grid for layout (only grid, not full Bootstrap) and nothing really special aside of that.

Is there a way to find what polyfill where removed that could affect css and such?

I will try to compare the runtime of our older 7.x build where everything worked just fine (without anything extra in the polyfill file) but I would gladly take any hint.

Using localhost, I see that style.js have no es5 variant (like we can see in this work in progress document update : https://pr31262-14beff1.ngbuilds.io/guide/deployment), could be a hint?

@sandipsrane, have you tried just using this :

https://github.com/ChrisMeeusen/ng-ie-serve

It should just make all the changes for you. Install it, run it, and move on.

@sandipsrane, did you enable ie mode in the browserlist file IE 9-11?

From what I can see of the new differential build, the process is effectively done twice. i.e. once for es5 and once for es6. I imagine it would significantly slow down the dev server reload time if differential loading was enabled by default. My project is already pretty slow so I if this was added to the dev server I would vote for it be opt-in. Personally, I think the ng serve -c es5 workaround is fine, but it would be great if it was documented on the main angular.io site.

Why not just add the start:es5 to the angular.json and package.json file and then a user could choose run it or not

Coming from #14656 here 😄, I have one last question:

Why differential loading has only been implemented for ng build ? Why can’t we have an angularCompiler option or an angular.json flag to simply activate it no matter what in serve/test/e2e. 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 --watchin combination with npx serve --single -l 4200. I will then just loose the live reload.

EDIT: crap even that is not working, as ng build --watch also switch back magically to the same behaviour as ng serve → one single build 😢

Workaround not working for me when running ng serve --config es5. The CLI returns Unknown option: '--config' and Unknown option: 'es5'

I ran ng s -c=es5 which worked for me