How do I retrieve Angular module's declarations/imports/providers from a function with more that one instruction?

I'm trying to split my app.module.ts in multiple files. To do this, I need to be able to retrieve declarations, imports and providers from a function.

This works but only if the function return a simple array with no other instruction. If I had more than one instructions in the function then the application fails to load.

For example lets start with a simple project :

ng new my-app  ? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?    This setting helps improve maintainability and catch bugs ahead of time.    For more information, see https://angular.io/strict Yes  ? Would you like to add Angular routing? Yes  ? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss ]    ng serve  

Initial app.module.ts has following code

import { NgModule } from '@angular/core';  import { BrowserModule } from '@angular/platform-browser';    import { AppRoutingModule } from './app-routing.module';  import { AppComponent } from './app.component';    @NgModule({    declarations: [      AppComponent    ],    imports: [      BrowserModule,      AppRoutingModule    ],    providers: [],    bootstrap: [AppComponent]  })  export class AppModule { }  

This works well.

Now if I move declarations array in a function GetDeclarations()

import { NgModule } from '@angular/core';  import { BrowserModule } from '@angular/platform-browser';    import { AppRoutingModule } from './app-routing.module';  import { AppComponent } from './app.component';    function GetDeclarations() : (any[] | Type<any>)[] {    return [      AppComponent    ]  }    @NgModule({    declarations: GetDeclarations(),    imports: [      BrowserModule,      AppRoutingModule    ],    providers: [],    bootstrap: [AppComponent]  })  export class AppModule { }  

This also works.

Finally, if I add one single instruction that does nothing in GetDeclarations()

import { NgModule } from '@angular/core';  import { BrowserModule } from '@angular/platform-browser';    import { AppRoutingModule } from './app-routing.module';  import { AppComponent } from './app.component';    function GetDeclarations() : (any[] | Type<any>)[] {    let i = true;    return [      AppComponent    ]  }    @NgModule({    declarations: GetDeclarations(),    imports: [      BrowserModule,      AppRoutingModule    ],    providers: [],    bootstrap: [AppComponent]  })  export class AppModule { }  

Then everything breaks.

This also breaks if I declare the array in a const and then return it. Everything must be done in one single instruction.

Here is the resulting error:

Build at: 2021-03-29T21:32:19.023Z - Hash: f5a6b698446c86ceeea0 - Time: 1296ms    Error: src/app/app.component.html:416:25 - error NG8002: Can't bind to 'ngSwitch' since it isn't a known property of 'div'.    416   <div class="terminal" [ngSwitch]="selection.value">                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~      src/app/app.component.ts:5:16      5   templateUrl: './app.component.html',                       ~~~~~~~~~~~~~~~~~~~~~~      Error occurs in the template of component AppComponent.      Error: src/app/app.component.html:534:1 - error NG8001: 'router-outlet' is not a known element:  1. If 'router-outlet' is an Angular component, then verify that it is part of this module.  2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.    534 <router-outlet></router-outlet>      ~~~~~~~~~~~~~~~      src/app/app.component.ts:5:16      5   templateUrl: './app.component.html',                       ~~~~~~~~~~~~~~~~~~~~~~      Error occurs in the template of component AppComponent.      Error: src/app/app.module.ts:23:17 - error NG1010: Expected array when reading the NgModule.declarations of AppModule    Value could not be determined statically.    23   declarations: GetDeclarations(),                     ~~~~~~~~~~~~~~~~~      src/app/app.module.ts:23:17      23   declarations: GetDeclarations(),                         ~~~~~~~~~~~~~~~~~      Unable to evaluate function call of complex function. A function must have exactly one return statement.    src/app/app.module.ts:15:1       15 function GetDeclarations() : (any[] | Type<any>)[] {          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~       16   let i = true;          ~~~~~~~~~~~~~~~      ...       19   ]          ~~~       20 }          ~      Function is declared here.    

Do you have any idea of what is happening here?

Is there any way to retrieve those declarations, imports and providers from complex functions?

Thanks

https://stackoverflow.com/questions/66862023/how-do-i-retrieve-angular-modules-declarations-imports-providers-from-a-functio March 30, 2021 at 05:40AM