ERROR Error: Uncaught (in promise): Error: ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ɵcmp' property

Question

I have a link in my Angular app that is leading to an external url. I am using Angular router and am receiving this error in the console when I click that link:

ERROR Error: Uncaught (in promise): Error: ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ɵcmp' property. Error: ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ɵcmp' property.

I realize I don't have the @Component decorator in my 'Install App Component', just curious how to fix this since my 'Install Ap Component' doesn't need a ts or scss file.

From my app-routing.module.ts:

const routes: Routes = [
  {path: 'login', component: LoginPageComponent, canActivate: [LoginCanActivate]},
  {path: 'login/:logout', component: LoginPageComponent},
  {path: 'new-password', component: LoginNewPasswordComponent},
  {path: 'forgot-password', component: ForgotPasswordComponent},
  {
    path: 'install-app',
    canActivate: [InstallAppComponent],
    component: InstallAppComponent,
  },

The 'component' that grabs the external url from my config service:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
import { AppConfigService } from '../services/app-config.service';

@Injectable({
  providedIn: 'root'
})
export class InstallAppComponent implements CanActivate {

  constructor(private router: Router, private appConfigService: AppConfigService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    window.location.href = this.appConfigService.getConfig().fieldInstallUrl;
    return true;
  }
}

Where I create the link ts:

      {
        label: 'INSTALLATION APP',
        icon: 'build_circle',
        link: './install-app',
        index: 4
      },

html

          <a
            *ngIf="link.link"
            mat-tab-link
            [routerLink]="link.link"
            routerLinkActive
            #rla="routerLinkActive"
            [active]="rla.isActive"
            (click)="refreshView(link.link)"
          >
            {{ link.label }}
          </a>
          <a *ngIf="link.handler" mat-tab-link (click)="link.handler()">
            {{ link.label }}
          </a>

Answer 1

I think you have to options.

• se a service with a function that does the routing to the external page. Call this function instead to navigate to install-app so you can completly remove that route
• Make InstallAppComponent a component. Why is it a CanActivate ? you can do the routing in the ngOnInit of the component instead. scss files are optional and not mandatory.