Matteo
Matteo

Reputation: 11

Single SPA - Share Angular standalone component

I have a setup with single spa + 3 Angular apps, one Angular app is called ui-kit and I want to export standalone components to share between the two other apps

// main.single-spa.ts - Ui Kit app

export * from './app/button/button.component';
// app.component - Angular App 1

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ButtonComponent } from '@shared/ui-kit';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ButtonComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    console.log(ButtonComponent);
  }
}

Here I get the error on the imports array 'imports' must be an array of components, directives, pipes, or NgModules. Value is of type '[RouterOutlet, undefined]'

But trying to log the component in the init gives me a correct Angular component class so I guess it's a problem of types.

Here is my declarations.d.ts

declare module '@shared/ui-kit' {
  import { Type } from '@angular/core';

  export const ButtonComponent: Type<any>;
  export function getData(data: string): string;
}

I tried to have my declarations.d.ts as

declare module '@shared/ui-kit';

Upvotes: 1

Views: 154

Answers (0)

Related Questions