title: Angular 8 ES5 target is not fully transpiled to ES5, causing problems with IE11
body: <p><strong>tldr;</strong></p>
  
  <p>Building app with target=es2015 and differential loading <strong>works</strong> in IE11 when running on standalone server.</p>
  
  <p>Building it with target=es5 <strong>does not</strong> work in IE11</p>
  
  <p>example reproducible code: <a href="https://github.com/thegreatanon/prism-ie-crash/tree/master" rel="nofollow noreferrer">https://github.com/thegreatanon/prism-ie-crash/tree/master</a></p>
  
  <p><strong>full details</strong></p>
  
  <p>The angular 8 app I'm building needs to be compatible with IE11. To ensure this, I need to test it from time to time during development.</p>
  
  <p>With the differential loading now introduced in Angular 8, it will build an es2015 and an ES5 file when IE11 is enabled in the browserlist. When taking these generated files and running them on a stand-alone server, it will run fine in IE11. But this is cumbersome.</p>
  
  <p>Using ng serve will only create the ES2015 versions, so that won't work in IE.</p>
  
  <p>I'm then creating a different configuration to set the <code>target</code>in the <code>compilationOptions</code> to <code>es5</code> and running it as ng serve --configuration es5</p>
  
  <p>When using this approach, I get the following error in the IE console once clicking on an item in my navigation (triggering lazy loading of a module).</p>
  
  <pre><code>SCRIPT1006: Expected ')' 
  ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk example-example-module failed.
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/LlgJu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LlgJu.png" alt="expected ) screenshot"></a></p>
  
  <p>Looking at the line where the error occurs, I see the following:</p>
  
  <pre><code>function ChangeDetection(detection = true, properties) {
  </code></pre>
  
  <p>Obviously the default argument in that function is the culprit, as this feature isn't supported by ES5. </p>
  
  <p><a href="https://i.stack.imgur.com/WAAaD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WAAaD.png" alt="untranspiled code"></a></p>
  
  <p>As you can see that code is coming from Angular-package/change-detection, which is included because I'm using angular-package/prism.</p>
  
  <p>It seems as if the external code just got included as-is and didn't get transpiled to ES5. </p>
  
  <p>I'm getting the same errors btw when I'm just building for ES5, and running it in my standalone server. So it likely doesn't have anything to do with the <code>ng serve</code> command in itself.</p>
  
  <p>Because when using the differential loading setup in Angular, the ES5 build <em>does</em> work, there seems to be some magic going on?</p>
  
  <p>Can anybody tell me how to get these external resources to transpile to ES5?</p>
  
  <p><strong>tsconfig</strong></p>
  
  <pre><code>{
      "compileOnSave": false,
      "compilerOptions": {
          "baseUrl": "./",
          "downlevelIteration": true,
          "outDir": "./dist/out-tsc",
          "sourceMap": true,
          "declaration": false,
          "module": "esnext",
          "moduleResolution": "node",
          "emitDecoratorMetadata": true,
          "experimentalDecorators": true,
          "importHelpers": true,
          "target": "es5",
          "typeRoots": ["node_modules/@types"],
          "lib": ["dom", "es2018"],
          "strict": true,
          "paths": {
              "@mylib/angular-components": ["lib"],
              "@mylib/angular-components/*": ["lib/*"]
          }
      },
      "exclude": ["out", "node_modules", "dist", "lib"],
      "angularCompilerOptions": {
          "preserveWhitespaces": false,
          "fullTemplateTypeCheck": true
      }
  }
  </code></pre>
  
  <p><strong>browserlist</strong></p>
  
  <pre><code>    "browserslist": [
          "last 5 Chrome version",
          "last 5 Safari version",
          "last 5 Firefox version",
          "last 5 Edge version",
          "last 5 iOS version",
          "last 5 ChromeAndroid version",
          "IE 11",
          "&gt; 1%"
      ]
  </code></pre>