title: Angular Tree Shaking: How exactly does it work?
body: <p>We are currently trying to optimize a complex angular application (performance &amp; bundle size).</p>
  
  <p>We found that we have partially unused components, but we are not 100% sure about them. Anyway ... The question we are currently asking is how exactly does tree shaking work in Angular.</p>
  
  <p><strong>Question 1)</strong> If there are entries inside the declarations, imports or providers array of a module, but the module is not used anywhere, are they also removed with tree shaking or are they included in the final bundle?</p>
  
  <p>Example:</p>
  
  <pre><code>@NgModule({
    imports: [
      FirstModule,
      SecondModule  // Is not used anymore (probably) but imported here
    ],
    declarations: [SampleComponent] // Is not used anymore (probably) but imported here
  })
  export class SampleModule {
  }
  </code></pre>
  
  <p><strong>Info:</strong> The routes to that modules/components are already deleted.</p>
  
  <p><strong>Question 2)</strong> Is it sufficient to only remove these components from the routing modules so that the tree shaking process is successful?</p>
  
  <p><strong>Question 3)</strong> What should be in place for the treeshaking process to work optimally?</p>
  
  <p><strong><em>Used Angular Version 8.2</em></strong></p>