title: Why cannot use simple array methods in exports when doing AOT build
body: <p>I made quite a large Angular app (Angular 5 and Ionic 3) which I build into an Android app. During development I always used <code>ionic cordova build</code>, but now I want to make a good production version (which should not have the ~15 seconds white screen during boot) using <code>ionic cordova build --prod</code>. </p>
  
  <p>Unfortunately I have to change a lot of structure in my app as the AOT compiler keeps throwing out errors about my AppModule. Most causes of the errors I solved, as they were about the exports and one of my own modules. </p>
  
  <p>My app consists of many smaller "apps" where the user can switch between using a menu. The smaller apps are loaded on click. To reduce the amount of "configuration" that has to be done as developer with the imports and exports I wrapped the components of these smaller apps in an object, which also contain some general information as app name, description, etc. These objects are gathered in a single file and put in a list.</p>
  
  <p><strong>App One</strong></p>
  
  <pre><code>@Component({
    selector: 'app-one',
    templateUrl: 'app-one.component.html'
  })
  export class AppOneComponent {
    ...
  }
  
  export const AppOne: AppConfiguration = {
    id: 10,
    name: 'App One',
    description: '...',
    component: AppOneComponent
  }
  </code></pre>
  
  <p><strong>Collecting all apps together in a "module.ts" file, this will be imported into the AppModule</strong></p>
  
  <pre><code>import { AppOne } from './app-one/app-one.component';
  import { AppTwo } from './app-two/app-two.component';
  import { AppThree } from './app-three/app-three.component';
  
  // This apps list will be imported in the app menu's component to show all apps, 
  // and use their component property to load the app once clicked
  export const apps = [
    AppOne,
    AppTwo,
    AppThree,
  ];
  
  // This components list will be imported by the AppModule so all the 
  // components are known in the app
  export const components = apps.map(a =&gt; a.component);
  </code></pre>
  
  <p><strong>AppModule</strong></p>
  
  <pre><code>import * as MyApps from './apps/module';
  
  @NgModule({
    declarations: [
      ...MyApps.components
    ],
    ...
    ...
  })
  export class AppModule { }
  </code></pre>
  
  <p>But the issue now is that the AOT compiler apparently doesn't like the <code>.map()</code> (and probably other methods) and returns an error. The default JIT compiler doesn't have any issue with this.</p>
  
  <blockquote>
    <p>Unexpected value 'null' declared by the module 'AppModule in C:/code/app/src/app/app.module.ts'</p>
  </blockquote>
  
  <p>I have validated that none of the components are <code>NULL</code> or have anything that looks like an empty value / property, so that shouldn't be the case. If I just make the list myself it is okay.</p>
  
  <pre><code>export const components = [
    AppOne.component,
    AppTwo.component,
    AppThree.component,
  ];
  </code></pre>
  
  <p>Having to write out all the exports like that adds a lot of overhead especially as the list will grow over time as more apps are added. The apps also have sub components which are also configured and added to the main AppModule using the same way (I left that out of the example for simplicity). Are there ways so I can keep using my simpler form of import / export?  </p>