Sunday, 22 May 2022

Is it possible to organize angular modules and component files with typscript namespaces?

For example below code is not working as expected. Let's say I have button namespace:

namespace Button {

  @Component({
    selector: 'super-button',
    templateUrl: './button.component.html',
    styleUrls: ['./button.component.scss']
  })
  export class ButtonComponent {}

  @NgModule({
    declarations: [
      ButtonComponent
    ],
    imports: [
      CommonModule
    ],
    exports: [ButtonComponent]
  })
  export class ButtonModule { }

}
 
export default Button;

and in app.module:

import Button from './button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,

    Button.ButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I'm getting this compilation error:

<e> [webpack-dev-middleware] Error: [object Object]
<e>     at analyzingFileEmitter (E:\Projects\Angular\test-app\node_modules\@ngtools\webpack\src\ivy\plugin.js:452:23)
<e>     at processTicksAndRejections (node:internal/process/task_queues:96:5)
<e>     at async AngularWebpackPlugin.rebuildRequiredFiles (E:\Projects\Angular\test-app\node_modules\@ngtools\webpack\src\ivy\plugin.js:277:36)
<e>     at async E:\Projects\Angular\test-app\node_modules\@ngtools\webpack\src\ivy\plugin.js:218:17

What's more, how can I split the component and module into different files while still having them in the same namespace? I tried the following, but with no avail: https://www.typescriptlang.org/docs/handbook/namespaces.html#multi-file-namespaces

My point is to organize project with lots of components and modules. I have lot of files with very long names to describe its functionality, for example:

-> very-descriptive-A-list.module
-> very-descriptive-A-list.component
-> very-descriptive-A-list-item.component
-> very-descriptive-A-list-modal.component etc

and I just wanted to make one namespace that wraps each functionality, just like this:

-> very-describtive-A namespace:
->> list.module,
->> list.component,
->> item.component
->> modal.component etc

-> very-describtive-B namespace:
->> list.module,
->> list.component,
->> item.component
->> modal.component etc

And so on for every other functionality. I was just thinking about reducing boilerplate in file names and it's also good for IDE intellisense because components inside namespaces are encapsulated and hidden.



from Is it possible to organize angular modules and component files with typscript namespaces?

No comments:

Post a Comment