replaceBootstrap transformer fails when bootstrapModule() call is not chained with platformBrowserDynamic() call

[mcgraphix]

Versions

Angular CLI: 1.5.4 (e)
Node: 6.11.3
OS: darwin x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.4
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.4
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.4.2
webpack-concat-plugin: 1.4.0
webpack-dev-server: 2.9.7
webpack: 3.8.1

Repro steps

• Create a new project with: ng new project-name
• Run using: ng serve --prod
• Open browser and it runs as expected
• Change main.ts to split the call to platformBrowserDynamic() from the call to bootstrapModule()

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule)
  .catch(err => console.log(err));

• Run: ng serve --prod
• Open browser and see error in console:
  Error: No NgModule metadata found for 'function (){}'.

Observed behavior

Complete stack trace:

main.9d791305398abba6bf45.bundle.js:1 Uncaught Error: No NgModule metadata found for 'function (){}'.
    at e.resolve (main.9d791305398abba6bf45.bundle.js:1)
    at e.getNgModuleMetadata (main.9d791305398abba6bf45.bundle.js:1)
    at e._loadModules (main.9d791305398abba6bf45.bundle.js:1)
    at e._compileModuleAndComponents (main.9d791305398abba6bf45.bundle.js:1)
    at e.compileModuleAsync (main.9d791305398abba6bf45.bundle.js:1)
    at e.compileModuleAsync (main.9d791305398abba6bf45.bundle.js:1)
    at e.LMZF.e.bootstrapModule (main.9d791305398abba6bf45.bundle.js:1)
    at Object.cDNt (main.9d791305398abba6bf45.bundle.js:1)
    at n (inline.687454df27f852918dab.bundle.js:1)
    at Object.0 (main.9d791305398abba6bf45.bundle.js:1)

Desired behavior

It should work identically as when the calls are chained.

Mention any other details that might be useful (optional)

The reason for making this change to split into two lines is that in my case, in the handler for the promise returned from bootstrapModule() I need to do some initialization and I need access to the platfor. Calling platformBrowserDynamic() seems to return a different platform if you call it a second time so I need the one used to call bootstrapModule on:

// this is unique to my portal environment
declare var wrapper: any;

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule)
  .then((ref: NgModuleRef<AppModule>) => {
    // setup required for my portal environment
    wrapper.setApplicationComponentNode(ref, platform);
  })
  .catch(err => console.log(err));

The only workaround at the moment for this is to create a separate main-prod.ts file, eject the webpack config and then modify it to use a different main file for prod vs. dev build.

[mcgraphix]

I found a workaround for this by using:

platformBrowserDynamic().bootstrapModule(AppModule)
  .then((ref: NgModuleRef<AppModule>) => {
    // setup required for my portal environment
    const platform: PlatformRef = ref.injector.get(PlatformRef);
    wrapper.setApplicationComponentNode(ref, platform);
  })
  .catch(err => console.log(err));

However, a better error message or a comment in the generated main.ts would at least be an improvement.

[JavierFuentes]

I have the same issue when trying to fork my code in main.ts to an UnderConstructionModule when building or serving with --prod modifier:

**Error: No NgModule metadata found for 'function (){}**

// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { UnderConstructionModule } from './under-construction/under-construction.module';
import { environment } from './environments/environment';

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

if (environment.production) {

 platformBrowserDynamic().bootstrapModule( UnderConstructionModule )
   .catch( err => console.log( err ) );

} else {

 platformBrowserDynamic().bootstrapModule( AppModule )
   .catch( err => console.log( err ) );

}

Without --prod modifier, ng serve and ng build work ok with both modules.

Versions

Angular CLI: 1.7.4
Node: 6.14.1
npm: 3.10.10
OS: win32 x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@ angular/cli: 1.7.4
@ angular-devkit/build-optimizer: 0.3.2
@ angular-devkit/core: 0.3.2
@ angular-devkit/schematics: 0.3.2
@ ngtools/json-schema: 1.2.0
@ ngtools/webpack: 1.10.2
@ schematics/angular: 0.3.2
@ schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

[guisaas]

Hello,

I am facing the same issue of mcgraphix with:

Versions

`Angular CLI: 6.1.1
Node: 8.11.3
OS: win32 x64
Angular: 6.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.7.1
@angular-devkit/build-angular 0.7.1
@angular-devkit/build-optimizer 0.7.1
@angular-devkit/build-webpack 0.7.1
@angular-devkit/core 0.7.1
@angular-devkit/schematics 0.7.1
@angular/cli 6.1.1
@ngtools/webpack 6.1.1
@schematics/angular 0.7.1
@schematics/update 0.7.1
rxjs 6.2.2
typescript 2.7.2
webpack 4.9.2`

Do you know if you will work on this limitation and when ?

Thank you very much.

[rkhramiankou]

Versions
`Angular CLI: 6.0.6
Node: 8.11.3
OS: win32 x64
Angular: 6.0.8

As @JavierFuentes and @guisaas mentioned there is an issue when use fork in the main.ts. It affects I believe all environments with production=true flag. Furthermore if you run ng serve or ng build with --configuration={evnironmentValue}, application will fail with "No NgModule metadata found for..."
I've played with configs a bit and discovered that 'aot' and 'buildOptimizer' must be disabled at angular.json configuration section to make application work.
I expect this behavior must work with aot=true as well.
Does anyone know workaround for now?

Thanks!

[rkhramiankou]

I've used workaround with angular.json -> configurations -> fileReplacements section. Replace your main.ts with another one that contains the second module. Works for me.

[haskelcurry]

Any updates on this? I have a related issue, I'd like to create the custom platform:

export const myPlatform = createPlatformFactory(platformBrowserDynamic, 'myPlatform');
myPlatform().bootstrapModule(AppModule)

And get the same error, only with AOT:

Unhandled Promise rejection: No NgModule metadata found for 'function(e){}'

Chaining it directly doesn't help:

createPlatformFactory(platformBrowserDynamic, 'myPlatform')
.bootstrapModule(AppModule);

Produces the same error.
Any help appreciated

[filipesilva]

Heya, does using getPlatform() as described in #8265 (comment) work for your usecase?

We try to identify the platformBrowserDynamic().bootstrapModule(AppModule); call to replace it properly but don't support variations.

[haskelcurry]

@filipesilva Hi! It's not related to my usecase. In my case, I want to create a custom platform based on platformBrowserDynamic, and then bootstrap an app with it.
Both this

export const myPlatform = createPlatformFactory(platformBrowserDynamic, 'myPlatform');
myPlatform().bootstrapModule(AppModule)

and this

(createPlatformFactory(platformBrowserDynamic, 'myPlatform'))().bootstrapModule(AppModule)

leads to AOT error that I described

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}