Rendering Duplicated on source modification when in debugging Angular Template with Material (2+)

[natalie-o-perret]

I am working on template based angular project replacing bootstrap angular material 2: https://github.com/angular/material2.

For some reasons it seems that whenever I am modifying the content of the AppClient folder the the re-generation duplicate content with the previous render stacked below the new one.

I pushed a sample solution on a public repository, here: https://github.com/ehouarn-perret/EhouarnPerret.CSharp.AngularMaterial2

Screenshot of the issue: https://github.com/ehouarn-perret/EhouarnPerret.CSharp.AngularMaterial2/blob/master/Duplicated-rendering-issue-screenshot.png

Here are also below a short summary of the changes (Note 1) I brought to my solution in order to make it "work"(see Note 2) with material 2

• Note 1: as expected more changes than what is actually given by: https://material.angular.io/guide/getting-started).
• Note 2: """kind of""" ahem

In packages.json

• dependencies section:
  • Add "@angular/material": "^2.0.0-beta.8",
  • Add "@angular/animations": "^4.2.5",
  • Add "@angular/cdk": "^2.0.0-beta.8",
  • Add "classlist.js": "^1.1.20150312",
  • Add "core-js": "^2.5.0",
  • Add "hammerjs": "^2.0.8",
  • Add "intl": "^1.2.5",
  • Add "web-animations-js": "^2.3.1",
  • Remove "bootstrap": "3.3.7",
• devDependencies section:
  • Add "@types/angular-material": "^1.1.54",
  • Add "@types/hammerjs": "^2.0.35",

In tsconfig.json:

• Replace "types": [ "webpack-env" ] with "types": [ "webpack-env", "hammerjs" ]

In webpack.config.js, rules:

• Replace { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' }, with { test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },

In webpack.config.vendor.js, nonTreeShakableModules section:

• Add '@angular/material',
• Add '@angular/material/prebuilt-themes/deeppurple-amber.css',
• Add '@angular/cdk',
• Add 'web-animations-js',
• Remove 'bootstrap',

In ClientApp\app\app.module.shared.ts:

• Add import { MaterialModule } from "@angular/material";
• Add import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
• Add import "hammerjs";
• In @NgModule , imports:
  • MaterialModule,
  • BrowserAnimationsModule,

Add polyfills.ts in the ClientApp folder based on https://github.com/addyosmani/todomvc-angular-4/blob/master/src/polyfills.ts (modified though to support IE...)

In ClientApp\boot.browser.ts:

• Add import './polyfills';
• Remove import 'bootstrap';

In Views\Home\Index.cshtml:

• Replace asp-prerender-module with asp-ng2-prerender-module

In Views\Shared\_Layout.cshtml:

• Add <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Any idea about why this is happening?

[JimLynn]

I've seen the same thing happen in different circumstances, and I narrowed it down to including the BrowserAnimationsModule. As soon as you include this, without making any other changes, you get the duplicate app rendering.

[s3gfaultx]

When looking at boot.browser.ts, I'm not seeing where the app root element is being disposed. Explicitly adding oldRootElem!.remove(); right after the insertBefore fixed this issue for me and HMR is now working again as expected.

[boban100janovski]

I can confirm that 'BrowserAnimationsModule' is causing the issue.
I am not using Material Components or other third party components.

[azizalali]

I am experiencing the same issue with my Asp.Net Core Angular app. After setting up Material2 and importing BrowserAnimationsModule in my app.module.ts (app.modyle.shared.ts), all components get duplicated as I navigate through the app. In addition to this, the menu triggered within mat-select works fine until one item is selected then it gets frozen.

Has anyone solved the problem?

[asadsahi]

same problem here:

@s3gfaultx I tried your suggestion but getting

[JimLynn]

A fix that has worked for me is, in ClientApp/boot.browser.ts
After line 14:
oldRootElem!.parentNode!.insertBefore(newRootElem, oldRootElem);
add a new line:
oldRootElem!.remove();

exactly as @s3gfaultx recommended. I'm not sure it's a fully correct fix, as I don't understand why the issue only arises when you start to include the BrowserAnimation libraries, but it has fixed the immediate problem in my app.

[asadsahi]

It worked for me now as well, not sure what I was doing yesterday. :)

Thanks @s3gfaultx

[antajo]

Im having the same issue with my angular4 app. Not sure where is ClientApp/boot.browser.ts file. Please help!!!

[TsengSR]

Any news on fixing that other than commenting out the callback in

if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => {
        // Before restarting the app, we create a new root element and dispose the old one
        //const oldRootElem = document.querySelector('kundenportal-app');
        //const newRootElem = document.createElement('kundenportal-app');
        //oldRootElem!.parentNode!.insertBefore(newRootElem, oldRootElem);
        //modulePromise.then(appModule => { appModule.destroy(); });
    });
} else {
    enableProdMode();
}

it doesn't seem to have any negative impact on the first view but... there must have been a reason to add it in the first place.

@JimLynn comment seems to fail in case when the AppComponent has an error (while editing) and after reverting it both get cleared. But commenting it out breaks it too (nothing disappears but hmr doesn't work until refresh)

[SteveSandersonMS]

Since we changed the template to be based on Angular CLI, it no longer has this issue, so closing.