Skip to content

Dynamic component not working on prod mode with Ivy enabled #19321

Closed

Description

@vincent-seibus

Hi,
Thank you for your help !

The issue is caused by package @angular/common and @angular/core

Is this a regression?

Yes, it doesn't work with ivy compilation but works with View Engine

Description of the problem:

When creating a dynamic component to load html at runtime, the *ngIf, *ngFor, etc... directives and all components of the commonModule are not loaded whereas we have imported the commonModule in the dynamically loaded module.
Actually, all the imports are ignored.
This happens only in production mode when building in dev mode there is no issue.
Also , it is working with Ivy disabled even in prod mode.

so to summarized

dev mode and ivy enabled : it works
prod mode and ivy enabled : it DOESN'T work

dev mode and ivy disabled: it works
prod mode and ivy disabled: it works

🔬 Minimal Reproduction

here is a repo with the problem describe:
https://github.com/vincent-seibus/angular10-dynamic-components

🌍 Environment

Your global Angular CLI version (10.1.4) is greater than your local
version (10.0.3). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | |
/ ___ | | | | (
| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/

Angular CLI: 10.0.3
Node: 12.17.0
OS: win32 x64

Angular: 10.0.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace:

Package Version

@angular-devkit/architect 0.1000.3
@angular-devkit/build-angular 0.1000.3
@angular-devkit/build-optimizer 0.1000.3
@angular-devkit/build-webpack 0.1000.3
@angular-devkit/core 10.0.3
@angular-devkit/schematics 10.0.3
@angular/cli 10.0.3
@ngtools/webpack 10.0.3
@schematics/angular 10.0.3
@schematics/update 0.1000.3
rxjs 6.6.0
typescript 3.9.7
webpack 4.43.0

Activity

  1. transferred this issue fromangular/angularon Nov 8, 2020
  2. JoostK commented on Nov 8, 2020

    @JoostK
    Member

    Transferring to CLI as that's where the optimization occurs.

    When AOT is enabled, the CLI uses the GLOBAL_DEFS_FOR_TERSER_WITH_AOT constant which includes ngJitMode: false, such that code relevant for JIT is dropped.

    This is related to #17663 and #19016 but those are about Build Optimizer, whereas that is already disabled here.

  3. added
    needs: discussionOn the agenda for team meeting to determine next steps
    and removed
    needs: discussionOn the agenda for team meeting to determine next steps
    on Nov 9, 2020
  4. alan-agius4 commented on Nov 10, 2020

    @alan-agius4
    Collaborator

    Hi all,

    AOT+JIT interop with any build optimizations is not a supported path and we don't recommend this approach to be used for production. The main reasons are that this approach increases drastically the bundle sizes, performance overhead and exposes your application to cross-site scripting (XSS) since compiling components at runtime is a XSS vulnerability in itself.

    I created an issue to capture and document this: angular/angular#39624

  5. angular-automatic-lock-bot commented on Dec 11, 2020

    @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.

  6. locked and limited conversation to collaborators on Dec 11, 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

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions