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

New Issue

fergalmoran · 2025-08-09T17:16:24Z

fergalmoran commented

2025-08-09 17:16:24 +00:00

Originally created by @natalie-o-perret on 8/25/2017

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?

*Originally created by @natalie-o-perret on 8/25/2017* 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. ![Alt text](http://full/path/to/img.jpg "Optional title") 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?

fergalmoran closed this issue

2025-08-09 17:16:24 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#469