Carbon Interactive Components not working in Angular 4 when AuthGuard is implemented

Description

Interactive Carbon components (datatable, accordion, content-switcher, dropdown, tabs, toggles , tooltip, etc…) are not working with Angular AuthGuard module.

Detailed description

This is a bug. Our Angular4 application supports routing system(routes protection via authentication) using AuthGuard module and CanActivate Angular core features. We recently integrated authentication in our app, and it seems that the AuthGuard module prevents the (interacting) carbon components from behaving as expected. Whereas left-navigation elements expanded/collapsed, or tabs switched when a click was triggered, Since the implementation of routing using AuthGuard (see app.module.ts.14) these same component stop working.

Is this issue related to a specific component?

Yes, all component requiring Carbon JS library such as (datatable, accordion, content-switcher, dropdown, tabs, toggles , tooltip, etc…)

What browser are you working in?

• Chrome 62.0.3202.94
• Firefox 57.0 (64-bit)

What version of the Carbon Design System are you using? Bug reproduced using:

• Carbon 8.1.8 (used in the sample app)
• Carbon 7.26.10 (used in our production app)

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

We are 4 sprints (2 months) in working on the V2 of our Web Portal: a system for automating the rules that govern traffic through firewalls that are managed by a service provider. We are release every sprint a new functionalities that we present to our endusers.

This bug is blocking since our interface is fully integrated with Carbon components (table pagination & sorting, left navigation expansion/collapsing, dropdown, etc…)

Steps to reproduce the issue

1. Install sample app locally repo here
2. Run npm install then ng serve
3. Launch localhost:4200
4. Using the different carbon component, try to switch tab, try to toggle accordion, etc…)

[mradulgujar]

@bdarge i came across same issue with accordion. after following akira’s response i was able to solve this. i hope this helps:

import * as CarbonComponents from ‘carbon-components’;

@Component({ selector: ‘my-component’, templateUrl: ‘./myComponent.html’, styleUrls: [‘./myComponent.css’] })

export class myComponent { private accordion: CarbonComponents.Accordion;

@ViewChild(‘root’) root: any;

ngAfterViewInit() { if (this.accordion) { this.accordion = this.accordion.release(); } this.accordion = CarbonComponents.Accordion.create(this.root.nativeElement); }

ngOnDestroy() { if (this.accordion) { this.accordion = this.accordion.release(); } }

[bdarge]

Hi @dessty How did you solve it. Can you share?