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
}
],
};