🚀 feature request

Relevant Package

@angular/core

Description

Angular imports winds up very scattered.

import { Component, NgModule } from '@angular/core'; 
import { Other1Module } from './other-1';
import { Other2Module } from './other-2';
import { Other3Module } from './other-3';

@Component({
 ​selector: 'my',
 ​template: `
  ​<!-- ...100 line template... -->
​`
})
export class MyComponent {
  // 100 line component
}

@NgModule({
  declarations: [MyComponent],
  exports: [MyComponent],
  imports: [Other1Module, Other2Module, Other3Module]
export class MyModule {
}

In summary,

// import TS modules

// call component, directives, and pipes

// component code

// import NgModules

This makes it very hard to see what modules are being used, and removed unused NgModules. Especially since no one has developed tools remove unused NgModules (whereas that is prevalent with JSX).

The better organization would be

// import TS modules

// import NgModules

// call component, directives, and pipes 

// component code

That way, the hardest import code to follow (Angular templates/NgModules) is at least close together.

But that isn't possible because NgModule must come after the component it declares.

Describe the solution you'd like

I'd like forwardRef() to work with NgModules.declares, so I can put it before the Components, Directives, and Pipes.

Describe alternatives you've considered

Suffering through extraneous imports and poor tree shaking.