feat(serve): Add -main flag for entry point

Feature requested

Would like to be able to change the main entry point script to use via a flag when running ng serve (as well as ng build).

ng serve -main main2.ts -e=someOtherEnvironment

Reason

While leveraging environment constants are handy to conditionally run code in your main.ts script, they don’t get used by webpack (or AOT). So if you have some environment code that you don’t want to include in your production build and you do the following in your main.ts:

. . .
if (environment.someOtherEnvironment) {
  myBootstrap(); // This function has imports that bring in other non-production code
} else {
  platformBrowserDynamic().bootstrapModule(AppModule);
}

Webpack will follow that function and its imports and will add that code to the bundles even when you ng serve or ng build.

Having the ability to target different main scripts would allow for ng serve and ng build to be used to build the appropriate code.

Then we could create different main files: main.ts

. . .
platformBrowserDynamic().bootstrapModule(AppModule);

main.other.ts

. . .
myBootstrap();

And achieve optimal bundling of our app code based on our intended environment.

Notes

I’d be more than happy to add this feature, just want to confirm that it is something that people would feel would be worthy.

@hansl @robwormald

[filipesilva]

@SamVerschueren would this not work?

Essentially exporting Dev/Prodmodule as AppModule from within the environment file, and loading it in main.ts.

// main.ts
import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment, AppModule } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

// environments/environment.ts
export { DevModule as AppModule } from '../app/dev.module';

export const environment = {
  production: false
};

// environments/environment.prod.ts
export { ProdModule as AppModule } from '../app/prod.module';

export const environment = {
  production: false
};

[FabioAntunes]

I just came across this question on stackverflow, that seems to be a perfect example why this might be useful