Adding a custom component to a Hybrid Application

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";

  selector: "app-hello",
  template: `
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';

  imports: [
      { path: 'hello', component: HelloComponent},
  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.

Hi Lucas,

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

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

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

it should have been:

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

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

So in your case:

      { 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


1 Like

Thanks again, I will be more careful next time.