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?