Skip to content

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

Closed
#19114
Closed
replaceBootstrap transformer fails when bootstrapModule() call is not chained with platformBrowserDynamic() call#8880
#19114
Labels
area: @ngtools/webpackfeatureLabel used to distinguish feature request from other issues
Milestone
Backlog

Description

@mcgraphix
mcgraphix
opened on Dec 14, 2017

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.

Activity

  1. mcgraphix commented on Dec 14, 2017

    @mcgraphix
    mcgraphix
    on Dec 14, 2017
    Author

    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.

  2. hansl
    added
    P5The team acknowledges the request but does not plan to address it, it remains open for discussion
    type: bug/fix
    workaround1: obvious
    on Dec 19, 2017
  3. filipesilva
    self-assigned this
    on Dec 21, 2017
  4. hansl
    unassigned
    filipesilva
    on Feb 6, 2018

  5. JavierFuentes commented on Apr 8, 2018

    @JavierFuentes
    JavierFuentes
    on Apr 8, 2018

    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

  6. guisaas commented on Jul 31, 2018

    @guisaas
    guisaas
    on Jul 31, 2018

    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.

  7. rkhramiankou commented on Aug 7, 2018

    @rkhramiankou
    rkhramiankou
    on Aug 7, 2018

    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!

  8. rkhramiankou commented on Aug 24, 2018

    @rkhramiankou
    rkhramiankou
    on Aug 24, 2018

    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.

  9. haskelcurry commented on Jun 17, 2019

    @haskelcurry
    haskelcurry
    on Jun 17, 2019

    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

  10. filipesilva
    removed
    P5The team acknowledges the request but does not plan to address it, it remains open for discussion
    workaround1: obvious
    on Oct 8, 2019

  11. filipesilva commented on Oct 8, 2019

    @filipesilva
    filipesilva
    on Oct 8, 2019
    Contributor

    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.

  12. filipesilva
    removed
    type: bug/fix
    on Oct 8, 2019

  13. 1 remaining item

  14. filipesilva
    added
    needs: more infoReporter must clarify the issue
    on Oct 8, 2019
  15. ngbot
    modified the milestone: needsTriage on Oct 8, 2019

  16. haskelcurry commented on Oct 8, 2019

    @haskelcurry
    haskelcurry
    on Oct 8, 2019

    @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

  17. filipesilva
    added
    featureLabel used to distinguish feature request from other issues
    and removed
    needs: more infoReporter must clarify the issue
    on Oct 8, 2019
  18. ngbot
    modified the milestones: needsTriage, Backlog on Oct 8, 2019
  19. kyliau
    added
    triage #1
    on May 26, 2020
  20. alan-agius4
    closed this as completedin #19114on Nov 5, 2020

  21. angular-automatic-lock-bot commented on Dec 6, 2020

    @angular-automatic-lock-bot
    angular-automatic-lock-botBot
    on Dec 6, 2020

    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.

  22. angular-automatic-lock-bot
    locked and limited conversation to collaborators on Dec 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: @ngtools/webpackfeatureLabel used to distinguish feature request from other issues

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions