feat(angular): allow per-component standalone import paths for better code-splitting

.github/workflows/actions/build-angular/action.yml

@@ -42,4 +42,4 @@ runs:
       with:
         name: ionic-angular
         output: ./packages/angular/AngularBuild.zip
-        paths: ./packages/angular/dist
+        paths: ./packages/angular/dist ./packages/angular/css

.github/workflows/actions/build-core/action.yml

@@ -33,4 +33,4 @@ runs:
         output: core/CoreBuild.zip
         # Include generated proxy files from Stencil output targets so
         # framework builds can detect when they need to be updated
-        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/api.txt packages/angular/src/directives/proxies.ts packages/angular/src/directives/proxies-list.ts packages/angular/standalone/src/directives/proxies.ts packages/vue/src/proxies.ts packages/react/src/components/proxies.ts packages/react/src/components/inner-proxies.ts packages/react/src/components/routing-proxies.ts
+        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/api.txt packages/angular/src/lazy/directives/proxies.ts packages/angular/src/lazy/directives/proxies-list.ts packages/angular/src/standalone/directives packages/vue/src/proxies.ts packages/react/src/components/proxies.ts packages/react/src/components/inner-proxies.ts packages/react/src/components/routing-proxies.ts

.github/workflows/release-ionic.yml

@@ -81,13 +81,12 @@ jobs:
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
         working-directory: 'packages/angular'
-        folder: './dist'
     - name: Cache Built @ionic/angular
       uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-angular
         output: packages/angular/AngularBuild.zip
-        paths: packages/angular/dist
+        paths: packages/angular/dist packages/angular/css
 
   release-react:
     needs: [release-core]

core/stencil.config.ts

@@ -30,14 +30,14 @@ const getAngularOutputTargets = () => {
   return [
     angularOutputTarget({
       componentCorePackage,
-      directivesProxyFile: '../packages/angular/lazy/src/directives/proxies.ts',
-      directivesArrayFile: '../packages/angular/lazy/src/directives/proxies-list.ts',
+      directivesProxyFile: '../packages/angular/src/lazy/directives/proxies.ts',
+      directivesArrayFile: '../packages/angular/src/lazy/directives/proxies-list.ts',
       excludeComponents,
       outputType: 'component',
     }),
     angularOutputTarget({
       componentCorePackage,
-      directivesProxyFile: '../packages/angular/standalone/src/directives/proxies.ts',
+      directivesProxyFile: '../packages/angular/src/standalone/directives/proxies.ts',
       excludeComponents: [
         ...excludeComponents,
         /**
@@ -64,6 +64,8 @@ const getAngularOutputTargets = () => {
 
       ],
       outputType: 'standalone',
+      // Emit each component in a separate file rather than putting them all in one large file.
+      esModules: true,
     })
   ];
 }

docs/component-guide.md

@@ -853,21 +853,21 @@ registerOnChange(fn: (_: number | null) => void): void {
 
 #### Standalone Directive
 
-For standalone components, create a directive in the [standalone package](/packages/angular/standalone/src/directives). Look at the implementation of the most similar existing component as a reference:
+For standalone components, create a directive in the [standalone package](/packages/angular/src/standalone/directives). Look at the implementation of the most similar existing component as a reference:
 
-- For text/numeric inputs: See [ion-input](/packages/angular/standalone/src/directives/input.ts) or [ion-input-otp](/packages/angular/standalone/src/directives/input-otp.ts)
-- For boolean inputs: See [ion-checkbox](/packages/angular/standalone/src/directives/checkbox.ts) or [ion-toggle](/packages/angular/standalone/src/directives/toggle.ts)
-- For select-like inputs: See [ion-select](/packages/angular/standalone/src/directives/select.ts) or [ion-radio-group](/packages/angular/standalone/src/directives/radio-group.ts)
+- For text/numeric inputs: See [ion-input](/packages/angular/src/standalone/directives/input.ts) or [ion-input-otp](/packages/angular/src/standalone/directives/input-otp.ts)
+- For boolean inputs: See [ion-checkbox](/packages/angular/src/standalone/directives/checkbox.ts) or [ion-toggle](/packages/angular/src/standalone/directives/toggle.ts)
+- For select-like inputs: See [ion-select](/packages/angular/src/standalone/directives/select.ts) or [ion-radio-group](/packages/angular/src/standalone/directives/radio-group.ts)
 
 After creating the directive, you need to export it in two places:
 
-1. First, add your component to the directives export group in [`packages/angular/standalone/src/directives/index.ts`](/packages/angular/standalone/src/directives/index.ts):
+1. First, add your component to the directives export group in [`packages/angular/src/standalone/directives/index.ts`](/packages/angular/src/standalone/directives/index.ts):
 
 ```typescript
 export { IonNewComponent } from './new-component';
 ```
 
-2. Then, add it to the main standalone package's index file in [`packages/angular/standalone/src/index.ts`](/packages/angular/standalone/src/index.ts):
+2. Then, add it to the main standalone package's index file in [`packages/angular/src/standalone/index.ts`](/packages/angular/src/standalone/index.ts):
 
 ```typescript
 export {

packages/angular/.prettierignore

@@ -2,5 +2,6 @@ dist
 scripts
 test
 proxies.ts
-lazy/src/directives/proxies-list.ts
+src/lazy/directives/proxies-list.ts
+src/standalone/directives/ion-*.ts
 **/*/angular-component-lib/utils.ts

packages/angular/README.md

@@ -57,7 +57,6 @@ This guide shows you how to test the local Ionic Framework build with a new Angu
 
 5. Create a tarball:
     ```sh
-    cd dist
     npm pack
     ```
 

packages/angular/eslint.config.js

@@ -20,7 +20,7 @@ const tsConfigs = [...compat.extends('@ionic/eslint-config/recommended'), ...ang
 
 module.exports = [
   {
-    ignores: ['dist/**', 'build/**', 'scripts/**', '**/proxies.ts', 'test/**'],
+    ignores: ['dist/**', 'build/**', 'scripts/**', '**/proxies.ts', 'test/**', 'src/standalone/directives/ion-*.ts'],
   },
   ...tsConfigs,
   {
@@ -32,7 +32,7 @@ module.exports = [
         // inferred project for them (the ts-eslint 8 equivalent of the old
         // createDefaultProgram option).
         projectService: {
-          allowDefaultProject: ['lazy/src/ionic-core.ts', 'schematics/add/*.ts', 'schematics/utils/*.ts'],
+          allowDefaultProject: ['src/lazy/ionic-core.ts', 'schematics/add/*.ts', 'schematics/utils/*.ts'],
         },
         tsconfigRootDir: __dirname,
       },