Skip to content

HMR: app.module bootstrapped multiple times #1954

Open
@lambourn

Description

@lambourn

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

  • CLI: 5.3
  • Cross-platform modules: 5.3.2
  • Android Runtime: 5.3
  • NativeScript-Angular: 7.2.3
  • Angular: 7.2.9

Describe the bug
When using HMR, our Angular-based application gets bootstrapped multipled times. More precisely: the app.module gets bootrapped multiple times in a single HMR run. Looks like a recursion while processing the modules.

I try to reproduce the issue but having diffculties to get to the root cause.

The only thing I can see is that this behaviour starts as soon as code in a @Injectable which is provided by the main app.module is changed or if the @Injectable is in the dependency chain of affected modules.

The multiple bootstrapping does not happen if code in a UI/view is changed, e.g. a regular @component.

Example #1 - code change in @component. Works as expected. Resulting log:

HMR: Checking for updates to the bundle with hmr hash 7dac85d1bc298888736a.
HMR: The following modules were updated:
HMR:    ./something/some.component.ts
HMR:    ./something/some.module.ts
HMR:    ./something/some.routing.ts
HMR: Successfully applied update with hmr hash 7dac85d1bc298888736a. App is up to date.
JS: bootstrap: Angular livesync started.
JS: AppModule constructor  <-- as expected 
JS: bootstrap: Angular livesync done.

Example #2 - code change in @Injectable. Resulting log:

JS: HMR: Checking for updates to the bundle with hmr hash 0903a733694101ec7f8a.
JS: HMR: The following modules were updated:
JS: HMR:          ↻ ./service/whatever.service.ts
JS: HMR:          ↻ ./app.component.ts
JS: HMR:          ↻ ./app.module.ts
JS: HMR:          ↻ ./components/another.component.ts
JS: HMR: Successfully applied update with hmr hash 0903a733694101ec7f8a. App is up to date.
JS: bootstrap: Angular livesync started.
JS: AppModule constructor                    <-- as expected
JS: bootstrap: Angular livesync done.
JS: bootstrap: Angular livesync started. <-- 2nd run... why?
JS: AppModule constructor                     <-- 2nd bootstrapped AppModule
JS: bootstrap: Angular livesync done.

Following HMR updates/reloads cause even more bootstraps.

What could be the reason for this? Or is this even expected behaviour?

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