Angular @NgModule imports don`t see modules if use a [].concat() for combine several arrays

Question

I have a lot of modules and want to sort and split it by several arrays by types

const aModules: any[] = [
  Module1,
  Module2,
  Module3,
  Module4
];

const bModules: any[] = [
  Module5,
  Module6,
  Module7,
  Module8
]

It will works if use a spread operator

imports: [Module0, ...aModules, ...bModules]

But it not works if use a concat method, any components will not works if use next approach:

imports: [Module0].concat(aModules, bModules)

What difference for typescript compiler for this both methods? Cause if we see

console.log([Module0, ...aModules, ...bModules]);
console.log([Module0].concat(aModules, bModules));

Both results looks the same

Answer 1

It's difficult to answer this question, because this aspect of the Angular compiler doesn't have much documentation. Under the hood the AOT compiler rewrites a lot of the metadata used by the decorators, and I would suspect this is an example of something it can not transform correctly.

I can tell you that this has nothing to do with TypeScript or JavaScript. It is a problem with the AOT compiler.

You can read about transformers in this blog:

https://blog.angularindepth.com/do-you-know-how-angular-transforms-your-code-7943b9d32829

You can find the source code to the transformers here:

https://github.com/angular/angular/tree/master/packages/compiler-cli/src/transformers