Issue consuming components in an Angular 16 Project

I am having trouble following the angular integration guide here for registering custom elements.

I am able to build the component library and stencil project fine but once I create an angular app to actually consume the components I run into an issue with the APP_INITIALIZER

Console Error

0209: Unexpected type of the `APP_INITIALIZER` token value (expected an array, but got object). Please check that the `APP_INITIALIZER` token is configured as a `multi: true` provider. Find more at https://angular.io/errors/NG0209
 

When I place a breakpoint at this error I see that appInits is for some reason a promise when it needs to be an array?

Component Library Module

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { DIRECTIVES } from './stencil-generated';
import { defineCustomElements } from '<stencil>/loader';

@NgModule({
  declarations: [
    ...DIRECTIVES
  ],
  exports: [
    ...DIRECTIVES
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => {
        return defineCustomElements();
      },
    },
  ]
})
export class ComponentLibraryModule { }

import { Config } from '@stencil/core';
import { angularOutputTarget } from '@stencil/angular-output-target';

export const config: Config = {
  namespace: 'sandbox',
  outputTargets: [
    angularOutputTarget({
      componentCorePackage: 'weiss-sandbox',
      directivesProxyFile: '../angular-workspace/projects/component-library/src/lib/stencil-generated/components.ts',
      directivesArrayFile: '../angular-workspace/projects/component-library/src/lib/stencil-generated/index.ts'
    }),
    {
      type: 'dist',
          esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    }
  ],
};

2 Likes