Question: I want to create a web-socket source (for **spring-cloud-stream-app-starters**) which is currently not available on git hub.

I went through some of the available sources but had some confusions, may be because I'm not familiar with the framework.

Can I just create a spring boot application with `Source binding` and return the received packets from web-socket clients in an `@InboundChannelAdapter(value = Source.OUTPUT)` annotated method. ?
Also how can I use **WebSocketInboundChannelAdapter** to start a websocket server and push the packets to the underlying broker.?

Answer: 
you can do below,

extend Route from `@angular/router` and update Type of data like below,

```
export interface RouteData {
  ShowTopBar: boolean;
  ShowSideBar: boolean;
}

interface CustomRoute extends Route {
  data?: RouteData;
}

```

update type of routes to `CustomRoute[]` from `Routes`

```
const routes: CustomRoute[] = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent, data: { ShowSideBar: true, ShowTopBar: true } }
];

```

now you can pass Type safe data, see below,

[![enter image description here](https://i.stack.imgur.com/a9eWj.png)](https://i.stack.imgur.com/a9eWj.png)
I wrote a small library that covers all typings for the standard router.

[ngx-typed-router](https://github.com/smnbbrv/ngx-typed-router)

It allows you to have types for everything starting from router configuration, components, resolvers and ending with tests.

E.g. 

```
export const ExampleRoutes: Routes = [
  {
    path: 'test/:id',
    component: ExampleComponent,
    resolve: {
      exampleResponse: ExampleResolveService,
    } as ResolveConfig<ExampleTestRouteData>,
  },
];

export interface ExampleTestRouteQuery {
  param1: string;
}

export interface ExampleTestRoutePath {
  id: string;
}

export interface ExampleTestRouteData {
  exampleResponse: ExampleResponse;
}

```

Component:

```
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent {

  constructor(
    @Inject(ActivatedRoute) public route: TypedRoute<ExampleTestRouteData, ExampleTestRoutePath, ExampleTestRouteQuery>,
    // or 
    // @Inject(ActivatedRoute) public route: TypedRoute<ExampleTestRouteData>,
    // all generic types are defaulting to angular standard types
  ) { }

}

```

and template:

```
<div>{{ route.snapshot.data.exampleResponse.id }}</div>
<div>{{ route.snapshot.data.exampleResponse.name }}</div>

```

All is type-safe and refactorable.

Check the documentation for more examples.