Why isn't “export default” recommended in Angular?

Question

According to the Typescript documentation (section \"Guidance for structuring modules\"):

If you’re only exporting a single class or function, use

Answer 1

The actual reason is that this doesn't work with the AOT compiler, however it will work with the JIT compiler. So if you are using AOT (or want to use it moving forward), don't do export default. See also here:

Default Exports

Default exports aren't allowed with AoT - they must all be named.

❌ DONT:

import { Component } from '@angular/core';

@Component({
  template: `
    <div class="example">
      Example component!
    </div>
  `
})
export default class ExampleComponent {

}

✅ DO:

import { Component } from '@angular/core';

@Component({
  template: `
    <div class="example">
      Example component!
    </div>
  `
})
export class ExampleComponent {

}