Merge pull request #1729 from analogjs/beta

chore: release 1.16.1

Author: brandonroberts

.github/ISSUE_TEMPLATE/01-bug-report.yml

@@ -32,6 +32,7 @@ body:
         - platform
         - trpc
         - astro-angular
+        - storybook-angular
         - Docs
         - Don't know / other
     validations:

.github/ISSUE_TEMPLATE/02-feature-request.yml

@@ -23,6 +23,7 @@ body:
         - platform
         - trpc
         - astro-angular
+        - storybook-angular
         - Docs
         - Don't know / other
     validations:

.github/workflows/ci.yml

@@ -10,6 +10,7 @@ on:
 env:
   NODE_OPTIONS: --max-old-space-size=16384
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+  NX_VERBOSE_LOGGING: ${{ vars.NX_VERBOSE_LOGGING }}
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.number || github.sha }}

CHANGELOG.md

@@ -1,3 +1,51 @@
+## [1.16.1-beta.8](https://github.com/analogjs/analog/compare/v1.16.1-beta.7...v1.16.1-beta.8) (2025-05-12)
+
+### Bug Fixes
+
+- **platform:** add support for Nx 21 release ([#1727](https://github.com/analogjs/analog/issues/1727)) ([ef442a7](https://github.com/analogjs/analog/commit/ef442a7ae2a1292535ea9e22d65998d56f45a4b9))
+
+## [1.16.1-beta.7](https://github.com/analogjs/analog/compare/v1.16.1-beta.6...v1.16.1-beta.7) (2025-05-12)
+
+### Bug Fixes
+
+- **vite-plugin-angular:** adjust output path for library dts files ([#1728](https://github.com/analogjs/analog/issues/1728)) ([54390e0](https://github.com/analogjs/analog/commit/54390e019a0841ad3d538275197b71b8bbc3f60f))
+
+## [1.16.1-beta.6](https://github.com/analogjs/analog/compare/v1.16.1-beta.5...v1.16.1-beta.6) (2025-05-10)
+
+### Bug Fixes
+
+- **vite-plugin-angular:** improve support for building Angular libraries ([#1724](https://github.com/analogjs/analog/issues/1724)) ([a2d9141](https://github.com/analogjs/analog/commit/a2d9141c72cd56575138dcfe9f54e36768b33b30))
+
+## [1.16.1-beta.5](https://github.com/analogjs/analog/compare/v1.16.1-beta.4...v1.16.1-beta.5) (2025-05-10)
+
+### Bug Fixes
+
+- **storybook-angular:** include preset as ESM for Windows support ([#1725](https://github.com/analogjs/analog/issues/1725)) ([c8bace5](https://github.com/analogjs/analog/commit/c8bace5c221e90fcab97c5c25eca8ec92fa6981f))
+
+## [1.16.1-beta.4](https://github.com/analogjs/analog/compare/v1.16.1-beta.3...v1.16.1-beta.4) (2025-05-09)
+
+### Bug Fixes
+
+- **vite-plugin-angular:** defer initial compilation in Vitest VSCode extension ([#1721](https://github.com/analogjs/analog/issues/1721)) ([fc89624](https://github.com/analogjs/analog/commit/fc896241683cc1c74fdb21b5565cf82e0549d522))
+
+## [1.16.1-beta.3](https://github.com/analogjs/analog/compare/v1.16.1-beta.2...v1.16.1-beta.3) (2025-05-09)
+
+### Bug Fixes
+
+- **nx-plugin:** update Angular v19 template files ([#1720](https://github.com/analogjs/analog/issues/1720)) ([9b1e065](https://github.com/analogjs/analog/commit/9b1e06576c491093d18ac03622e12b57cf5aa9d1))
+
+## [1.16.1-beta.2](https://github.com/analogjs/analog/compare/v1.16.1-beta.1...v1.16.1-beta.2) (2025-05-09)
+
+### Performance Improvements
+
+- **vite-plugin-angular:** optimize memory usage for large workspaces ([#1719](https://github.com/analogjs/analog/issues/1719)) ([6364190](https://github.com/analogjs/analog/commit/6364190da3212d1d29fded36fe9d2deea1fa7be5))
+
+## [1.16.1-beta.1](https://github.com/analogjs/analog/compare/v1.16.0...v1.16.1-beta.1) (2025-04-30)
+
+### Bug Fixes
+
+- **vite-plugin-nitro:** check for custom apiPrefix with api directory ([#1715](https://github.com/analogjs/analog/issues/1715)) ([11c4f36](https://github.com/analogjs/analog/commit/11c4f36bb76e74dda2cffa08a6b17dd6cea069c4))
+
 # [1.16.0](https://github.com/analogjs/analog/compare/v1.15.1...v1.16.0) (2025-04-29)
 
 ### Bug Fixes

apps/analog-app/src/app/pages/package.page.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+import { MyPackageComponent } from 'my-package';
+
+@Component({
+  imports: [MyPackageComponent],
+  template: ` <lib-my-package /> `,
+})
+export default class PackagePageComponent {}

apps/analog-app/vite.config.ts

@@ -44,7 +44,7 @@ export default defineConfig(({ mode, isSsrBuild }) => {
             supportAnalogFormat: true,
           },
         },
-        liveReload: true,
+        liveReload: false,
         nitro: {
           routeRules: {
             '/cart/**': {

apps/docs-app/docs/guides/libraries.md

@@ -0,0 +1,194 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Building an Angular Library
+
+Angular libraries are built for supporting many different services and functionality. Angular libraries can be built using Vite that can be published to npm.
+
+## Creating a Library
+
+If you are creating a new package, use the `library` schematic:
+
+```sh
+ng generate lib my-lib
+```
+
+For an existing library, follow the setup instructions.
+
+## Setup
+
+Install the `@analogjs/platform` package:
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm">
+
+```shell
+npm install @analogjs/platform --save-dev
+```
+
+  </TabItem>
+
+  <TabItem label="Yarn" value="yarn">
+
+```shell
+yarn add @analogjs/platform --dev
+```
+
+  </TabItem>
+
+  <TabItem value="pnpm">
+
+```shell
+pnpm install -w @analogjs/platform
+```
+
+  </TabItem>
+</Tabs>
+
+Next, create a `vite.config.ts` at the root of the project, and configure it to build the library.
+
+> Update the references to `my-lib` to match the library project name.
+
+```ts
+import { defineConfig } from 'vite';
+import angular from '@analogjs/vite-plugin-angular';
+
+export default defineConfig(({ mode }) => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/libs/my-lib',
+  plugins: [angular()],
+  resolve: {
+    mainFields: ['module'],
+  },
+  build: {
+    target: ['esnext'],
+    sourcemap: true,
+    lib: {
+      // Library entry point
+      entry: 'src/public-api.ts',
+
+      // Package output path, must contain fesm2022
+      fileName: `fesm2022/my-lib`,
+
+      // Publish as ESM package
+      formats: ['es'],
+    },
+    rollupOptions: {
+      // Add external libraries that should be excluded from the bundle
+      external: [/^@angular\/.*/, 'rxjs', 'rxjs/operators'],
+      output: {
+        // Produce a single file bundle
+        preserveModules: false,
+      },
+    },
+    minify: false,
+  },
+}));
+```
+
+Next, update the project configuration to use the `@analogjs/platform:vite` builder to build the library.
+
+```json
+{
+  "name": "my-lib",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "projects/my-lib/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "architect": {
+    "build": {
+      "builder": "@analogjs/platform:vite",
+      "options": {
+        "configFile": "projects/my-lib/vite.config.ts",
+        "outputPath": "dist/projects/my-lib"
+      },
+      "defaultConfiguration": "production",
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "sourcemap": true,
+          "mode": "production"
+        }
+      }
+    }
+  }
+}
+```
+
+Adjust the `package.json` at the root of the project to point to the built output. Include any necessary `dependencies` or `peerDependencies` that are needed when installing the package.
+
+```json
+{
+  "name": "my-lib",
+  "description": "A description of the Angular library",
+  "type": "module",
+  "peerDependencies": {
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "types": "./src/public-api.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "import": "./fesm2022/my-lib.mjs",
+      "require": "./fesm2022/my-lib.mjs",
+      "default": "./fesm2022/my-lib.mjs"
+    }
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}
+```
+
+## Copying Assets
+
+Static assets in the `public` directory are copied to the build output directory by default. If you want to copy additional assets outside of that directory, use the `nxCopyAssetsPlugin` Vite plugin.
+
+Import the plugin and set it up:
+
+```ts
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vite';
+import analog from '@analogjs/vite-plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => ({
+  // ...
+  plugins: [angular(), nxCopyAssetsPlugin(['*.md', 'package.json'])],
+}));
+```
+
+## Building the Library
+
+Run the build command:
+
+```sh
+ng build my-lib
+```
+
+## Publishing the Library
+
+After logging using `npm login`, use the `npm publish` command to publish the package.
+
+To see the output without publishing, use the `--dry-run` flag.
+
+```sh
+npm publish dist/projects/my-lib --dry-run
+```
+
+To publish the library to npm:
+
+```sh
+npm publish dist/projects/my-lib
+```

apps/docs-app/docs/integrations/angular-material/index.md

@@ -39,16 +39,22 @@ pnpm install @angular/cdk @angular/material
   </TabItem>
 </Tabs>
 
-> Make sure you have installed `sass` version 1.85.1 or higher.
-
 ## Step 2: Configuring the Angular Material library
 
-1. Rename the file `styles.css` to `styles.scss`.
-2. Set the `inlineStylesExtension` property to `'scss'` in the `vite.config.ts` file:
+1. Rename the `src/styles.css` file to `src/styles.scss`.
+2. If you're using `zone.js`, configure the `scss` preprocessorOptions to use the `legacy` api.
+3. Set the `inlineStylesExtension` property to `'scss'` in the `vite.config.ts` file:
 
 ```ts
 export default defineConfig(({ mode }) => {
   return {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'legacy',
+        },
+      },
+    },
     plugins: [
       analog({
         vite: {
@@ -60,7 +66,7 @@ export default defineConfig(({ mode }) => {
 });
 ```
 
-3. Update the `index.html` file to reference the SCSS file:
+4. Update the `index.html` file to reference the SCSS file:
 
 ```html
 <head>
@@ -81,7 +87,7 @@ export default defineConfig(({ mode }) => {
 </body>
 ```
 
-4. Update the `styles.scss` file to import the Angular Material styles and define your custom theme:
+5. Update the `styles.scss` file to import the Angular Material styles and define your custom theme:
 
 ```scss
 @use '@angular/material' as mat;

apps/docs-app/sidebars.js

@@ -185,6 +185,11 @@ const sidebars = {
           id: 'guides/migrating',
           label: 'Migrating an Angular app to Analog',
         },
+        {
+          type: 'doc',
+          id: 'guides/libraries',
+          label: 'Building an Angular library',
+        },
         {
           type: 'doc',
           id: 'guides/compatibility',

libs/my-package/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}