1

I made quite a large Angular app (Angular 5 and Ionic 3) which I build into an Android app. During development I always used ionic cordova build, but now I want to make a good production version (which should not have the ~15 seconds white screen during boot) using ionic cordova build --prod.

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.

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.

App One

@Component({
  selector: 'app-one',
  templateUrl: 'app-one.component.html'
})
export class AppOneComponent {
  ...
}

export const AppOne: AppConfiguration = {
  id: 10,
  name: 'App One',
  description: '...',
  component: AppOneComponent
}

Collecting all apps together in a "module.ts" file, this will be imported into the AppModule

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 => a.component);

AppModule

import * as MyApps from './apps/module';

@NgModule({
  declarations: [
    ...MyApps.components
  ],
  ...
  ...
})
export class AppModule { }

But the issue now is that the AOT compiler apparently doesn't like the .map() (and probably other methods) and returns an error. The default JIT compiler doesn't have any issue with this.

Unexpected value 'null' declared by the module 'AppModule in C:/code/app/src/app/app.module.ts'

I have validated that none of the components are NULL 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.

export const components = [
  AppOne.component,
  AppTwo.component,
  AppThree.component,
];

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?

LittleOne
  • 1,077
  • 1
  • 11
  • 21
  • What you describe sounds quite dirty. Is that right, that you are using multiple Angular Apps? If so, the bootstrapping overhead will definitely kill the performance boost you are trying to gain. Use lazy loading instead (if possible) or consider Ivy for the future. Does anything change, if you move a => a.component into an exported function? – CaKa Dec 19 '18 at 13:12
  • try removing `.component` suffix from your components array – Tushar Walzade Dec 19 '18 at 13:17
  • @CanK. Don't see them as real Angular Apps, just components that do their own things that we just call "apps". There is a menu that will show all these components that can be started. Each one has a flow the user will go through, once done it will be removed from the routing stack and the menu gets back to the front. Changing it into an exported function will still return the same error. :( – LittleOne Dec 19 '18 at 13:27

0 Answers0