Adding a custom component to a Hybrid Application

[luclib (Lucas Liberman)]

This is a follow-up to my previous post regarding setting up a hybrid application using both Angular and c8ycli

I have setup my development environment I have removed the login window that appears by default. Now, I am following this step from the official guide to bind a component, HelloComponent to my route.

However, when I try to do so, I get an underlined error on my path key within NgRouterModule.forRoot() structure stating the following:

Argument of type '{ path: string; component: typeof HelloComponent; }' is not assignable to parameter of type 'Routes'.
  Object literal may only specify known properties, and 'path' does not exist in type 'Route[]'

Here is the code I am made for the HelloComponent.

import {Component} from "@angular/core";

@Component({
  selector: "app-hello",
  template: `
    <c8y-title>Hello</c8y-title>
    World
  `,
})
export class HelloComponent {
  constructor() {}
}

And this is my latest app.module.ts file:

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule as NgRouterModule } from '@angular/router';
import { UpgradeModule as NgUpgradeModule } from "@angular/upgrade/static";
import { BootstrapComponent, CoreModule, LoginService, RouterModule } from "@c8y/ngx-components"
import { HybridAppModule} from "@c8y/ngx-components/upgrade";
import { HelloComponent } from './hello-component/hello-component.component';

@NgModule({
  imports: [
    NgUpgradeModule,
    BrowserAnimationsModule,
    BrowserModule,
    NgRouterModule.forRoot(
      { path: 'hello', component: HelloComponent},
    ),
    CoreModule.forRoot()
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initApp,
      multi: true,
      deps: [LoginService],
    },
  ],
  bootstrap: [BootstrapComponent],
  declarations: [HelloComponent]
})
export class AppModule extends HybridAppModule { }

export function initApp(loginService: LoginService) {
  return () => {
    const credentials = {
      tenant: "tenantName",
      user: "admin",
      password: "C8Yadmin",
    };
    const basicAuth = loginService.useBasicAuth(credentials);

    return loginService.login(basicAuth, credentials);
  };
}

Any ideas on the cause of this issue and how to resolve it?

Thanks in advance.

[Tristan_Bastian]

Hi Lucas,

seems like the documentation is missing the squared opening bracket.
Instead of:

    NgRouterModule.forRoot(
      // --- 8< changed part ----
      { path: 'hello', component: HelloComponent},     // 3
      // --- >8 ----

      ...UPGRADE_ROUTES
    ], { enableTracing: false, useHash: true }),

it should have been:

    NgRouterModule.forRoot([
      // --- 8< changed part ----
      { path: 'hello', component: HelloComponent},     // 3
      // --- >8 ----

      ...UPGRADE_ROUTES
    ], { enableTracing: false, useHash: true }),

So in your case:

    NgRouterModule.forRoot([
      { path: 'hello', component: HelloComponent},
    ]),

The code snippet shortly after does show it correctly: Tutorials - Cumulocity IoT Guides

I’ve created a PR to fix this: [no-issue] add missing squared bracket in websdk tutorial by reey · Pull Request #1304 · SoftwareAG/c8y-docs · GitHub

Regards,
Tristan

[luclib (Lucas Liberman)]

Thanks again, I will be more careful next time.