@stencil/angular-output-target 1.5.1 → 1.5.3

package/dist/generate-angular-component.d.ts

@@ -25,7 +25,7 @@ export declare const createAngularComponentDefinition: (tagName: string, inputs:
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
- * @param exportMaps Import through the package's `exports` map instead of a deep path.
+ * @param typesModule The module every component type is imported from (Stencil v5 only).
  * @returns The component interface type definition as a string.
  */
-export declare const createComponentTypeDefinition: (outputType: OutputType, tagNameAsPascal: string, events: readonly ComponentCompilerEvent[], componentCorePackage: string, customElementsDir?: string, exportMaps?: boolean) => string;
+export declare const createComponentTypeDefinition: (outputType: OutputType, tagNameAsPascal: string, events: readonly ComponentCompilerEvent[], componentCorePackage: string, customElementsDir?: string, typesModule?: string) => string;

package/dist/generate-angular-component.js

@@ -212,16 +212,16 @@ const createDocComment = (doc) => {
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
- * @param exportMaps Import through the package's `exports` map instead of a deep path.
+ * @param typesModule The module every component type is imported from (Stencil v5 only).
  * @returns The component interface type definition as a string.
  */
-export const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir, exportMaps = false) => {
+export const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir, typesModule) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         customElementsDir,
         outputType,
-        exportMaps,
+        typesModule,
     });
     const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;

package/dist/index.cjs

@@ -126,9 +126,7 @@ const createComponentEventTypeImports = (componentTagName, events, options) => {
     const imports = [];
     const namedImports = new Set();
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
-    const exportMapEntry = isCustomElementsBuild ? '/standalone' : '/loader';
-    const importPathName = normalizePath(componentCorePackage) +
-        (options.exportMaps ? exportMapEntry : isCustomElementsBuild ? `/${customElementsDir}` : '');
+    const importPathName = options.typesModule ?? normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     /**
      * Each component's events are typed with the per-component CustomEvent type
      * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a
@@ -368,16 +366,16 @@ const createDocComment = (doc) => {
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
- * @param exportMaps Import through the package's `exports` map instead of a deep path.
+ * @param typesModule The module every component type is imported from (Stencil v5 only).
  * @returns The component interface type definition as a string.
  */
-const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir, exportMaps = false) => {
+const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir, typesModule) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         customElementsDir,
         outputType,
-        exportMaps,
+        typesModule,
     });
     const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
@@ -843,13 +841,22 @@ const usesInputTransform = (components, booleanAttributes) => components.some((c
 /**
  * Whether the Stencil project generates a package.json `exports` map. Deep `dist/` imports are
  * blocked for consumers then, so the proxies import through the map's entries instead
- * (`<pkg>/<tag>`, `<pkg>/loader`, `<pkg>/standalone`).
+ * (`<pkg>/<tag>`, `<pkg>/components`, `<pkg>/standalone`).
  */
 function usesExportMaps(config) {
-    // Stencil v5 only: v4's map has no `./standalone` entry, and its root types aren't
-    // guaranteed to export the component types.
-    const isV5 = (config.outputTargets || []).some((o) => ['loader-bundle', 'standalone', 'ssr', 'types'].includes(o.type));
-    return isV5 && config.generateExportMaps === true;
+    // Stencil v5 only: v4's map has no `./components` or `./standalone` entry.
+    return isStencilV5(config) && config.generateExportMaps === true;
+}
+function isStencilV5(config) {
+    return (config.outputTargets || []).some((o) => ['loader-bundle', 'standalone', 'ssr', 'types'].includes(o.type));
+}
+/**
+ * For Stencil v5 only, use the `types/components.d.ts`
+ */
+function getEventTypesModule(config, outputTarget) {
+    return isStencilV5(config) && outputTarget.componentCorePackage
+        ? getPathToComponentTypes(config, outputTarget)
+        : undefined;
 }
 /**
  * The module specifier a proxy imports a component's `defineCustomElement` from.
@@ -1012,7 +1019,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, usesExportMaps(config));
+        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, getEventTypesModule(config, outputTarget));
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -1079,7 +1086,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     const inlineComponentProps = outputTarget.inlineProperties ? internalProps : [];
     const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
     const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-    const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, usesExportMaps(config));
+    const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, getEventTypesModule(config, outputTarget));
     const proxyFileOutput = [componentDefinition, '\n'];
     if (includeSingleComponentAngularModules) {
         proxyFileOutput.push(moduleDefinition, '\n');
@@ -1110,11 +1117,9 @@ function generateBarrelFile(components, outputTarget) {
 }
 function getPathToComponentTypes(config, outputTarget) {
     const basePkg = outputTarget.componentCorePackage || '';
-    // The entry of the output the proxies are built on always exports the component types - the
-    // package root only does when the project has no `src/index.ts`, or that file re-exports them
+    // for Stencil v5 use the `<pkg>/components` export entry when `generateExportMaps` is enabled
     if (usesExportMaps(config)) {
-        const entry = isOutputTypeCustomElementsBuild(outputTarget.outputType) ? 'standalone' : 'loader';
-        return `${normalizePath(basePkg)}/${entry}`;
+        return `${normalizePath(basePkg)}/components`;
     }
     // in v5, all types (including components.d.ts) are generated in the dist/types directory
     const typesTarget = config.outputTargets?.find((o) => o.type === 'types');

package/dist/index.js

@@ -118,9 +118,7 @@ const createComponentEventTypeImports = (componentTagName, events, options) => {
     const imports = [];
     const namedImports = new Set();
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
-    const exportMapEntry = isCustomElementsBuild ? '/standalone' : '/loader';
-    const importPathName = normalizePath(componentCorePackage) +
-        (options.exportMaps ? exportMapEntry : isCustomElementsBuild ? `/${customElementsDir}` : '');
+    const importPathName = options.typesModule ?? normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     /**
      * Each component's events are typed with the per-component CustomEvent type
      * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a
@@ -360,16 +358,16 @@ const createDocComment = (doc) => {
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
- * @param exportMaps Import through the package's `exports` map instead of a deep path.
+ * @param typesModule The module every component type is imported from (Stencil v5 only).
  * @returns The component interface type definition as a string.
  */
-const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir, exportMaps = false) => {
+const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir, typesModule) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         customElementsDir,
         outputType,
-        exportMaps,
+        typesModule,
     });
     const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
@@ -835,13 +833,22 @@ const usesInputTransform = (components, booleanAttributes) => components.some((c
 /**
  * Whether the Stencil project generates a package.json `exports` map. Deep `dist/` imports are
  * blocked for consumers then, so the proxies import through the map's entries instead
- * (`<pkg>/<tag>`, `<pkg>/loader`, `<pkg>/standalone`).
+ * (`<pkg>/<tag>`, `<pkg>/components`, `<pkg>/standalone`).
  */
 function usesExportMaps(config) {
-    // Stencil v5 only: v4's map has no `./standalone` entry, and its root types aren't
-    // guaranteed to export the component types.
-    const isV5 = (config.outputTargets || []).some((o) => ['loader-bundle', 'standalone', 'ssr', 'types'].includes(o.type));
-    return isV5 && config.generateExportMaps === true;
+    // Stencil v5 only: v4's map has no `./components` or `./standalone` entry.
+    return isStencilV5(config) && config.generateExportMaps === true;
+}
+function isStencilV5(config) {
+    return (config.outputTargets || []).some((o) => ['loader-bundle', 'standalone', 'ssr', 'types'].includes(o.type));
+}
+/**
+ * For Stencil v5 only, use the `types/components.d.ts`
+ */
+function getEventTypesModule(config, outputTarget) {
+    return isStencilV5(config) && outputTarget.componentCorePackage
+        ? getPathToComponentTypes(config, outputTarget)
+        : undefined;
 }
 /**
  * The module specifier a proxy imports a component's `defineCustomElement` from.
@@ -1004,7 +1011,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, usesExportMaps(config));
+        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, getEventTypesModule(config, outputTarget));
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -1071,7 +1078,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     const inlineComponentProps = outputTarget.inlineProperties ? internalProps : [];
     const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
     const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-    const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, usesExportMaps(config));
+    const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, getEventTypesModule(config, outputTarget));
     const proxyFileOutput = [componentDefinition, '\n'];
     if (includeSingleComponentAngularModules) {
         proxyFileOutput.push(moduleDefinition, '\n');
@@ -1102,11 +1109,9 @@ function generateBarrelFile(components, outputTarget) {
 }
 function getPathToComponentTypes(config, outputTarget) {
     const basePkg = outputTarget.componentCorePackage || '';
-    // The entry of the output the proxies are built on always exports the component types - the
-    // package root only does when the project has no `src/index.ts`, or that file re-exports them
+    // for Stencil v5 use the `<pkg>/components` export entry when `generateExportMaps` is enabled
     if (usesExportMaps(config)) {
-        const entry = isOutputTypeCustomElementsBuild(outputTarget.outputType) ? 'standalone' : 'loader';
-        return `${normalizePath(basePkg)}/${entry}`;
+        return `${normalizePath(basePkg)}/components`;
     }
     // in v5, all types (including components.d.ts) are generated in the dist/types directory
     const typesTarget = config.outputTargets?.find((o) => o.type === 'types');

package/dist/output-angular.d.ts

@@ -3,7 +3,7 @@ import type { OutputTargetAngular, PackageJSON } from './types';
 /**
  * Whether the Stencil project generates a package.json `exports` map. Deep `dist/` imports are
  * blocked for consumers then, so the proxies import through the map's entries instead
- * (`<pkg>/<tag>`, `<pkg>/loader`, `<pkg>/standalone`).
+ * (`<pkg>/<tag>`, `<pkg>/components`, `<pkg>/standalone`).
  */
 export declare function usesExportMaps(config: Config): boolean;
 export declare function angularDirectiveProxyOutput(compilerCtx: CompilerCtx, outputTarget: OutputTargetAngular, components: ComponentCompilerMeta[], config: Config): Promise<void>;

package/dist/output-angular.js

@@ -49,13 +49,22 @@ const usesInputTransform = (components, booleanAttributes) => components.some((c
 /**
  * Whether the Stencil project generates a package.json `exports` map. Deep `dist/` imports are
  * blocked for consumers then, so the proxies import through the map's entries instead
- * (`<pkg>/<tag>`, `<pkg>/loader`, `<pkg>/standalone`).
+ * (`<pkg>/<tag>`, `<pkg>/components`, `<pkg>/standalone`).
  */
 export function usesExportMaps(config) {
-    // Stencil v5 only: v4's map has no `./standalone` entry, and its root types aren't
-    // guaranteed to export the component types.
-    const isV5 = (config.outputTargets || []).some((o) => ['loader-bundle', 'standalone', 'ssr', 'types'].includes(o.type));
-    return isV5 && config.generateExportMaps === true;
+    // Stencil v5 only: v4's map has no `./components` or `./standalone` entry.
+    return isStencilV5(config) && config.generateExportMaps === true;
+}
+function isStencilV5(config) {
+    return (config.outputTargets || []).some((o) => ['loader-bundle', 'standalone', 'ssr', 'types'].includes(o.type));
+}
+/**
+ * For Stencil v5 only, use the `types/components.d.ts`
+ */
+function getEventTypesModule(config, outputTarget) {
+    return isStencilV5(config) && outputTarget.componentCorePackage
+        ? getPathToComponentTypes(config, outputTarget)
+        : undefined;
 }
 /**
  * The module specifier a proxy imports a component's `defineCustomElement` from.
@@ -218,7 +227,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, usesExportMaps(config));
+        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, getEventTypesModule(config, outputTarget));
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -285,7 +294,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     const inlineComponentProps = outputTarget.inlineProperties ? internalProps : [];
     const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
     const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-    const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, usesExportMaps(config));
+    const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, getEventTypesModule(config, outputTarget));
     const proxyFileOutput = [componentDefinition, '\n'];
     if (includeSingleComponentAngularModules) {
         proxyFileOutput.push(moduleDefinition, '\n');
@@ -316,11 +325,9 @@ export function generateBarrelFile(components, outputTarget) {
 }
 export function getPathToComponentTypes(config, outputTarget) {
     const basePkg = outputTarget.componentCorePackage || '';
-    // The entry of the output the proxies are built on always exports the component types - the
-    // package root only does when the project has no `src/index.ts`, or that file re-exports them
+    // for Stencil v5 use the `<pkg>/components` export entry when `generateExportMaps` is enabled
     if (usesExportMaps(config)) {
-        const entry = isOutputTypeCustomElementsBuild(outputTarget.outputType) ? 'standalone' : 'loader';
-        return `${normalizePath(basePkg)}/${entry}`;
+        return `${normalizePath(basePkg)}/components`;
     }
     // in v5, all types (including components.d.ts) are generated in the dist/types directory
     const typesTarget = config.outputTargets?.find((o) => o.type === 'types');

package/dist/utils.d.ts

@@ -44,6 +44,9 @@ export declare const createComponentEventTypeImports: (componentTagName: string,
     componentCorePackage: string;
     customElementsDir?: string;
     outputType: OutputType;
-    /** Import through the package's `exports` map (`./standalone` or `./loader`) instead of a deep path. */
-    exportMaps?: boolean;
+    /**
+     * The module every component type is imported from (Stencil v5: the `types` output's
+     * `components.d.ts`). When not set, v4's own locations are used.
+     */
+    typesModule?: string;
 }) => string;

package/dist/utils.js

@@ -118,9 +118,7 @@ export const createComponentEventTypeImports = (componentTagName, events, option
     const imports = [];
     const namedImports = new Set();
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
-    const exportMapEntry = isCustomElementsBuild ? '/standalone' : '/loader';
-    const importPathName = normalizePath(componentCorePackage) +
-        (options.exportMaps ? exportMapEntry : isCustomElementsBuild ? `/${customElementsDir}` : '');
+    const importPathName = options.typesModule ?? normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     /**
      * Each component's events are typed with the per-component CustomEvent type
      * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a

package/dist/wizard.js

@@ -1,5 +1,5 @@
 import { access, mkdir, readFile, writeFile } from 'node:fs/promises';
-import { join, relative, dirname } from 'node:path';
+import { join, relative, dirname, isAbsolute } from 'node:path';
 // ---------------------------------------------------------------------------
 // pnpm build approval
 // ---------------------------------------------------------------------------
@@ -77,7 +77,22 @@ function toPascalCase(s) {
         .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
         .join('');
 }
-async function scaffoldWrapperPackage(wrapperDir, packageName, corePackageName, corePkgVersion, namespace, outputType) {
+/**
+ * The module the lazy loader's `defineCustomElements()` is imported from: the `./loader` entry
+ * when the project generates an `exports` map, otherwise its place in the `loader-bundle` output.
+ */
+function getLoaderModule(config, corePackageName) {
+    if (config.generateExportMaps === true) {
+        return `${corePackageName}/loader`;
+    }
+    const target = config.outputTargets?.find((o) => o.type === 'loader-bundle');
+    const rawDir = target?.dir ?? 'dist/loader-bundle';
+    const dir = (isAbsolute(rawDir) ? relative(config.rootDir, rawDir) : rawDir).replace(/\\/g, '/');
+    return `${corePackageName}/${dir}/${target?.loaderPath || 'loader'}`;
+}
+async function scaffoldWrapperPackage(wrapperDir, packageName, corePackageName, corePkgVersion, namespace, outputType, 
+/** For the 'component' type: the module to import the loader's `defineCustomElements()` from. */
+loaderModule) {
     const libDir = join(wrapperDir, 'src', 'lib');
     await mkdir(libDir, { recursive: true });
     const className = toPascalCase(namespace);
@@ -125,12 +140,23 @@ async function scaffoldWrapperPackage(wrapperDir, packageName, corePackageName,
     // NgModule file — only needed for 'component' outputType
     let ngModuleTs;
     if (outputType === 'component') {
+        // The 'component' type's wrappers register nothing themselves: this module does it, with the
+        // lazy loader, when the consuming app starts. It's written once and never regenerated.
         ngModuleTs =
-            `import { NgModule } from '@angular/core';\n` +
+            `import { NgModule, provideAppInitializer } from '@angular/core';\n` +
+                `import { defineCustomElements } from '${loaderModule}';\n` +
                 `import { DIRECTIVES } from './directives.array';\n\n` +
+                `/**\n` +
+                ` * Declares every component, and registers the custom elements when the app starts.\n` +
+                ` *\n` +
+                ` * This file is yours to edit - Stencil doesn't regenerate it. Do any setup your library\n` +
+                ` * needs before the components are defined in the initializer, e.g. \`setNonce()\` or\n` +
+                ` * \`setTagTransformer()\` (both exported by the loader).\n` +
+                ` */\n` +
                 `@NgModule({\n` +
                 `  declarations: [...DIRECTIVES],\n` +
                 `  exports: [...DIRECTIVES],\n` +
+                `  providers: [provideAppInitializer(() => defineCustomElements())],\n` +
                 `})\n` +
                 `export class ${className}Module {}\n`;
     }
@@ -240,7 +266,7 @@ export const wizard = {
                     const corePkgVersion = supportsWorkspaceProtocol
                         ? 'workspace:*'
                         : `file:${relative(wrapperDir, config.rootDir)}`;
-                    await scaffoldWrapperPackage(wrapperDir, wrapperPackageName, componentCorePackage, corePkgVersion, config.fsNamespace, selectedOutputType);
+                    await scaffoldWrapperPackage(wrapperDir, wrapperPackageName, componentCorePackage, corePkgVersion, config.fsNamespace, selectedOutputType, selectedOutputType === 'component' ? getLoaderModule(config, componentCorePackage) : undefined);
                     s.stop('Wrapper package scaffolded');
                 }
                 catch (e) {
@@ -263,7 +289,8 @@ export const wizard = {
             // Build target config
             const lines = [
                 `componentCorePackage: '${componentCorePackage}'`,
-                `customElementsDir: '${customElementsDir}'`,
+                // only the types built on the `standalone` output import from it
+                ...(selectedOutputType !== 'component' ? [`customElementsDir: '${customElementsDir}'`] : []),
                 `directivesProxyFile: '${directivesProxyFile}'`,
                 ...(directivesArrayFile ? [`directivesArrayFile: '${directivesArrayFile}'`] : []),
                 ...(selectedOutputType !== 'standalone' ? [`outputType: '${selectedOutputType}'`] : []),
@@ -276,8 +303,18 @@ export const wizard = {
                     editor.outputTargetsContains('type: "standalone"') ||
                     editor.outputTargetsContains("type: 'dist-custom-elements'") ||
                     editor.outputTargetsContains('type: "dist-custom-elements"');
-                if (!hasStandalone)
+                const hasLoaderBundle = editor.outputTargetsContains("type: 'loader-bundle'") ||
+                    editor.outputTargetsContains('type: "loader-bundle"') ||
+                    editor.outputTargetsContains("type: 'dist'") ||
+                    editor.outputTargetsContains('type: "dist"');
+                // 'component' wrappers rely on the lazy loader; the other types import from `standalone`
+                if (selectedOutputType === 'component') {
+                    if (!hasLoaderBundle)
+                        editor.addOutputTarget("{ type: 'loader-bundle' }");
+                }
+                else if (!hasStandalone) {
                     editor.addOutputTarget("{ type: 'standalone' }");
+                }
                 if (!editor.replaceOutputTarget('angularOutputTarget(', targetCode)) {
                     editor.addOutputTarget(targetCode);
                 }
@@ -306,6 +343,10 @@ export const wizard = {
                 ], { cwd: wrapperDir, dev: true });
                 log.success('Angular dependencies installed');
             }
+            if (selectedOutputType === 'component' && !shouldScaffold) {
+                log.info(`NgModule components: your Angular package's module needs to call defineCustomElements() ` +
+                    `from '${getLoaderModule(config, componentCorePackage)}' when the app starts, e.g. with provideAppInitializer().`);
+            }
             outro('Angular output target configured');
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -58,7 +58,7 @@
   "devDependencies": {
     "@angular/core": "8.2.14",
     "@angular/forms": "8.2.14",
-    "@stencil/cli": "^5.0.0 || >=5.0.0-beta.16 <5.0.0-next.0",
+    "@stencil/cli": "^5.0.0 || >=5.0.0-beta.18",
     "@stencil/core": "4.41.0",
     "@types/node": "^18.19.130",
     "npm-run-all2": "^6.2.6",
@@ -69,7 +69,7 @@
     "vitest": "^2.1.9"
   },
   "peerDependencies": {
-    "@stencil/core": ">=2.0.0 || >=3 || >=4.0.0 || ^5.0.0 || >=5.0.0-beta.16 <5.0.0-next.0"
+    "@stencil/core": ">=2.0.0 || >=3 || >=4.0.0 || ^5.0.0 || >=5.0.0-beta.18"
   },
   "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0"
 }