angular: Angular Router does not destroy component if an error was thrown

Attached you can find a simple sample application which reproduces the problem.

The setup was done using angular-cli as follows:

$ ng new AngularIssue -sg -st --style=scss -sc --routing
$ cd AngularIssue\src\app\
$ mkdir components
$ cd components
$ ng g component ExampleOne --spec=false
$ ng g component ExampleTwo --spec=false

I added the BrowserAnimationsModule and the ReactiveFormsModule in the app.module.ts file and I updated the routing to include two routes to each component.

The app.component.html file was altered as follows:

<h1>Example App</h1>

<div>
  <ul>
    <li><a [routerLink]="['one']">One</a></li>
    <li><a [routerLink]="['two']">Two</a></li>
  </ul>
</div>

<div style="border: 2px solid red;">
  <router-outlet></router-outlet>
</div>

Component “One” was left as-is, component “Two” was changed to include the following HTML:

<p>
  example-two works!
</p>

<form [formGroup]="formGroup"></form>

The form group does not exists. When using ng serve or ng build to run the application, when clicking on the link to component “Two” it will crash and the content will be appended to the div.

Note that running ng build --prod will throw an error saying that “Property ‘formGroup’ does not exist on type ‘ExampleTwoComponent’.”, so a production build is covered.

issue-19273.zip

Same problem here!

Same problem here I am using BrowserAnimations module in my project . These links might help identifying more about problem .

https://stackoverflow.com/questions/45622453/angular2-router-appends-component-instead-of-replacing-it?rq=1

https://stackoverflow.com/questions/45762690/angular-4-router-is-appending-components-on-routerlink-navigation-instead-of-des

I am also seeing this issue, i have tried to create a reproducable stackblitz but i havent been able to recreate the issue…

So if any of you can recreate the bug in a very very simple plunkr app then i’m sure it will be helpful for the angular team 😃

23 days goes by, can anyone from angular take a look at this? Or give an estimate of when they could?

So this is a duplicate of an older bug issued here #19093 But I think someone of Angular team just looked at it a week ago

I also have same error but can’t get rid of BrowserAnimationModule (cause whole app is based on angular material components… ). I really think this happen only when there is an error thrown by Angular due to a DOM problem (something wrong in {{ }} templating or in a custom directive). I couldn’t reproduce it in another case.

I really hope Angular team could have a look on it soon, as soon as they release Angular 5

I had a similar issue in my app, and removing the BrowserAnimationModule from the app.modules.ts file fixed the problem, as mentioned before.

It turned out the issue was because the second component was throwing an error. When we resolved the error in the second component the appended routing issue was resolved.

Anybody there?