I have this following module

enter image description here

And I have it lazy load on a route like so

{
        path: 'configuration/roles',
        loadChildren: () => import('gizmonic-features-angular').then(f => f.ConfigurationRolesModule)
    },

The problem I am running into though is when I navigate and come back a few times it is just appending the components not removing the old and adding the new one. This was working fine in Angular 12 so not sure what the issue could be.

I don’t use any standalone components either so doesn’t seem like a conflict that I have seen in some other posts.
enter image description here

I’ve tried a few things and nothing has really helped. Have been unable to find any real discussion about this issue anywhere

Edit 1:

Come to find out it looks like this piece of code is causing the issue.

 @Component({
    selector: 'gizmonic-column',
    templateUrl: './column.component.html',
    animations: [
         trigger('fillState', [
             state('on', style({
                 maxWidth: '2000px'
             })),
             state('off', style({
                 maxWidth: '768px'
             })),
             transition('on => off', animate('0.25s ease-in')),
             transition('off => on', animate('0.25s ease-out'))
         ])
    ],
})
export class ColumnComponent {
    @Input()
    @HostBinding('attr.display-mode')
    public displayMode: "focused" | "foreground" | "background" = "foreground";

    @Input()
    public showHeader: boolean = true;

    @Input()
    @HostBinding('attr.header-display-mode')
    headerDisplayMode: "full" | "wrapped" = "full";

    @Input()
    @HostBinding('attr.content-display-mode')
    contentDisplayMode: "full" | "wrapped" | "indented" = "full";

    @Input()
    public fill: boolean = false;

    get fillState() {
        return this.fill ? "on" : "off";
    }

    constructor() {

    }
}

If I remove the animations everything works fine. I can’t find out why though those animations started not working in Angular 18.