
Product
Secure Your AI-Generated Code with Socket MCP
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
@analogjs/storybook-angular
Advanced tools
Integration package for Storybook using Angular & Vite.
If you don't have Storybook setup already, run the following command to initialize Storybook for your project:
npx storybook@latest init
Follow the provided prompts, and commit your changes.
Install the Storybook Plugin for Angular and Vite. Depending on your preferred package manager, run one of the following commands:
npm install @analogjs/storybook-angular --save-dev
Add the zone.js
import to the top of the .storybook/preview.ts
file.
import 'zone.js';
import { applicationConfig, type Preview } from '@storybook/angular';
import { provideNoopAnimations } from '@angular/platform-browser/animations';
const preview: Preview = {
decorators: [
applicationConfig({
providers: [provideNoopAnimations()],
}),
],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;
Next, update the .storybook/main.ts
file to use the StorybookConfig
. Also update the framework
to use the @analogjs/storybook-angular
package.
import { StorybookConfig } from '@analogjs/storybook-angular';
const config: StorybookConfig = {
// other config, addons, etc.
framework: {
name: '@analogjs/storybook-angular',
options: {},
},
};
Remove the existing webpackFinal
config function if present.
Next, update the Storybook builders in the angular.json
or project.json
.
"storybook": {
"builder": "@analogjs/storybook-angular:start-storybook",
},
"build-storybook": {
"builder": "@analogjs/storybook-angular:build-storybook"
}
Remove any webpack
specific options and remove the browserTarget
option.
Add the /storybook-static
folder to your .gitignore
file.
Run the command for starting the development server.
npm run storybook
Run the command for building the storybook.
npm run build-storybook
To load shared CSS paths, configure them using loadPaths
css option in the viteFinal
function.
import path from 'node:path';
async viteFinal() {
return {
css: {
preprocessorOptions: {
scss: {
loadPaths: `${path.resolve(__dirname, '../src/lib/styles')}`
}
}
}
};
}
If you are using paths
in your tsconfig.json
, support for those aliases can be added to the vite.config.ts
.
First, install the vite-tsconfig-paths
package.
npm install vite-tsconfig-paths --save-dev
Next, add the plugin to the plugins
array.
import viteTsConfigPaths from 'vite-tsconfig-paths';
async viteFinal() {
return {
plugins: [
viteTsConfigPaths()
],
};
}
For Nx workspaces, import and use the nxViteTsPaths
plugin from the @nx/vite
package.
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
async viteFinal(config: UserConfig) {
return {
plugins: [
nxViteTsPaths()
],
};
}
1.16.1 (2025-05-12)
FAQs
Storybook Integration for Angular & Vite
The npm package @analogjs/storybook-angular receives a total of 0 weekly downloads. As such, @analogjs/storybook-angular popularity was classified as not popular.
We found that @analogjs/storybook-angular demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.