Components: BrowserAnimationsModule, as described in Getting Started, causes a routing error

[mLaird]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

routing should show 1 page at a time

What is the current behavior?

When BrowserAnimationsModule is added after BrowserModule in the NgModule imports array (as shown in Getting Started, Step 2), then 2 pages merge vertically and can be seen as 1 'tall' page via vertical scrolling. When BrowserAnimationsModule is removed, routing occurs as expected. The same behavior occurs when BrowserAnimationsModule replaces BrowserModule in the imports array.

What are the steps to reproduce?

add BrowserAnimationsModule to app.module.ts per Getting Started instructions for a 2 page routing app. Perform routing. Observe new merged double vertical page.

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

BrowserAnimationsModule, as suggested in Getting Started should not break routing.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.3.6
@angular/material -beta.8
Windows 10
Typescript 2.3.4
both FF and Chrome behave the same

Is there anything else we should know?

The Angular Changelog for 4.3.2 and for 5.0.0-beta.0 both have a bug fix saying "export BrowserModule as apart of BrowserAnimationsModule". Possibly some code bug exists in Angular, rather than MD. Nonetheless, Getting Started has a bug in its instructions as currently stated. It doesn't work, as stated.

[thomasw7]

yup, getting the same issue

[willshowell]

Are you able to reproduce in a plunker?

[mLaird]

The situation is worse with beta.10. beta.11,though announced, is not published on npm, so beta.11 behavior cannot be determined.

In beta.8, one could leave out BrowserAnimationsModule, use BrowserModule and routing would work. In beta.10, BrowserModule only displays part of the page - header and footer using toolbar and grid-list. BrowserAnimationsModule is necessary to get the entire page to display.

Furthermore in beta.10 with BrowserAnimationsModule, when the back and forward browser buttons are used to navigate between the 2 pages, each browser button press adds another alternating vertically merged page. So after forward, back, forward, I have page1, page2, page1 in a single vertically merged page. The vertical merged page loses the sidenav in the home page that was there when the page loaded.

None of this happened in beta.8. Since then, I have just followed your instructions in Changelog and Getting Started.

Here's something that is not clear. Changelog for beta.10 says "All dash-case @Directive selectors are deprecated in favor of the camelCase equivalent", and gives "examples" but not a complete list. The next line says "md-input-container has been renamed to md-form-field" How is md-X to be identified as one versus the other, while scrolling through code making changes. No one keeps this stuff memorized in their head reliably. I have a lot of md-X in my code. None of them are in your "example" list. Do I need to change anything related to md-X statements? How do I know/tell while scrolling through code?

[josephperrott]

It appears that this is working as expected. Here is a basic repro with routing working as expected.

If you are still seeing this issue, please provide a reproduction to investigate.

[mLaird]

I no longer have this behavior, but I have made many changes and the source
of the problem is not clear. I have upgraded to beta.11, removed
MaterialModule from the obvious places (and from some less obvious places)
in my code, and changed a lot of material component import statements.
​

[josephperrott]

I will close out this issue and feel free to open up a new one if you are able to isolate this issue and we will look into it.

[samrantmedia]

I was also seeing this issue in
Angular 4.3.4
Angular-cli 1.2.8
Typescript 2.3.4

I have now upgraded to
Angular 4.4.6
Angular-cli 1.4.9
Typescript 2.3.4 (still)

and I have installed the @angular/animations package, which was not a separate package in earlier releases.
"@angular/animations": "^4.4.6",

This fixed the issue.

[praveentnp]

I have upgraded to
Angular 4.4.6
Angular-cli 1.4.9
Typescript 2.3.4

But still i have same issue, please help me

[samrantmedia]

Do you have the separate animations package installed? Perhaps make sure that it is not cached?

[praveentnp]

No, I have installed Angular/Material, for that BrowserAnimationsModule/NoopAnimationsModule module required.
After that, I have uninstalled Angular/Material, still, i am facing the same issue.

[praveentnp]

How can I make sure that it is not cached?(Perhaps make sure that it is not cached?)

[samrantmedia]

Delete your node modules folder for the project.
Close ide and reopen ide.

More thorough:
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm cache clean
then run install commands/

I was seeing this issue without using angular material. It was another package that was using animations.

You are importing it like this?
import {NoopAnimationsModule} from '@angular/platform-browser/animations';

[samrantmedia]

I spoke to soon. Further testing showed that I am also still getting this error.

[samrantmedia]

It was caused by a null reference exception. Once I resolved this null reference exception, I did not see this issue. With previous versions, this null reference exception did not cause the application to break. I suggest looking in the console to check for errors.

[praveentnp]

Great findings, Thank you very much. I had spent last one week on this. Now its fixed by your suggestion.

[samrantmedia]

Thanks. A pleasure.

[tgupta694]

Hi Folks,
I am facing the same issue - as soon as i include the BrowserAnimationsModule/NoopAnimationsModule
"@angular/animations": "^5.0.0",

I start seeing the html content getting appended to all routes i navigate to.
Angular CLI: 1.5.0
Node: 8.5.0
OS: win32 x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.6.1
webpack: 3.8.1

[praveentnp]

Check your browser console, you will find exception thrown by your application, resolve it, then it will work fine.

[abductedMind]

This thread leads us to an understanding that is NOT a good resolution. When there is a single undefined/null pointer exception any given SPA will break, until the page is refreshed.

[samrantmedia]

I agree. I don't think that this should be closed.

I have since removed the animations module, because I don't want to risk the app crashing if a null reference error happens.

[willshowell]

@abductedMind @samrantmedia From what I can tell, no one has been able to reproduce and the problem exists for some people even without using Material. I'm sure the team would be happy to reopen if they had a reproduction.

[abductedMind]

The reality is that this is a problem with BrowserAnimationsModule, not Material 2, :(

My comment was for the sake of those that are not experienced enough to see the danger of accepting the solution denoted above.

[aamirkhan-91]

Can confirm. I am not using Material but a reference error on the page causes the routes to break; Previous routes are appended below the new page.

[ReverendDG]

I'm also having this problem. I'm using Angular2

[angular-automatic-lock-bot[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._}