Merge pull request #28145 from storybookjs/valentin/angular-introduce…

…-preserve-symlink-option

Angular: Introduce preserveSymlink builder option

CONTRIBUTING.md

@@ -61,6 +61,19 @@ yarn build --watch react core-server api addon-docs
 yarn task --task dev --template <your template> --start-from=publish
 ```
 
+### Making code changes when working on Angular-specific code
+
+If you are working on Angular-specific code, you will need to append `--prod` to the above mentioned commands to ensure that the Angular compiler is able to pick up the changes appropriately and doesn't fail. This will build all the packages in production mode.
+
+```sh
+yarn task --prod
+```
+
+```bash
+cd code
+yarn build --prod --watch angular core-server api addon-docs
+```
+
 ## Contributing to Storybook
 
 For further advice on how to contribute, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/contribute).

code/frameworks/angular/src/builders/build-storybook/index.ts

@@ -40,6 +40,7 @@ export type StorybookBuilderOptions = JsonObject & {
   enableProdMode?: boolean;
   styles?: StyleElement[];
   stylePreprocessorOptions?: StylePreprocessorOptions;
+  preserveSymlinks?: boolean;
   assets?: AssetPattern[];
   sourceMap?: SourceMapUnion;
 } & Pick<
@@ -102,6 +103,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
         assets,
         previewUrl,
         sourceMap = false,
+        preserveSymlinks = false,
       } = options;
 
       const standaloneOptions: StandaloneBuildOptions = {
@@ -121,6 +123,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
           ...(styles ? { styles } : {}),
           ...(assets ? { assets } : {}),
           sourceMap,
+          preserveSymlinks,
         },
         tsConfig,
         webpackStatsJson,

code/frameworks/angular/src/builders/build-storybook/schema.json

@@ -19,6 +19,11 @@
       "description": "Directory where to store built files.",
       "default": "storybook-static"
     },
+    "preserveSymlinks": {
+      "type": "boolean",
+      "description": "Do not use the real path when resolving modules. If true, symlinks are resolved to their real path, if false, symlinks are resolved to their symlinked path.",
+      "default": false
+    },
     "configDir": {
       "type": "string",
       "description": "Directory where to load Storybook configurations from.",

code/frameworks/angular/src/builders/start-storybook/index.ts

@@ -37,6 +37,7 @@ export type StorybookBuilderOptions = JsonObject & {
   styles?: StyleElement[];
   stylePreprocessorOptions?: StylePreprocessorOptions;
   assets?: AssetPattern[];
+  preserveSymlinks?: boolean;
   sourceMap?: SourceMapUnion;
 } & Pick<
     // makes sure the option exists
@@ -118,6 +119,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         statsJson,
         previewUrl,
         sourceMap = false,
+        preserveSymlinks = false,
       } = options;
 
       const standaloneOptions: StandaloneOptions = {
@@ -141,6 +143,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
           ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
           ...(styles ? { styles } : {}),
           ...(assets ? { assets } : {}),
+          preserveSymlinks,
           sourceMap,
         },
         tsConfig,

code/frameworks/angular/src/builders/start-storybook/schema.json

@@ -19,6 +19,11 @@
       "type": "string",
       "description": "The full path for the TypeScript configuration file, relative to the current workspace."
     },
+    "preserveSymlinks": {
+      "type": "boolean",
+      "description": "Do not use the real path when resolving modules. If true, symlinks are resolved to their real path, if false, symlinks are resolved to their symlinked path.",
+      "default": false
+    },
     "port": {
       "type": "number",
       "description": "Port to listen on.",

code/frameworks/angular/src/builders/utils/standalone-options.ts

@@ -18,6 +18,7 @@ export type StandaloneOptions = CLIOptions &
       stylePreprocessorOptions?: StylePreprocessorOptions;
       assets?: AssetPattern[];
       sourceMap?: SourceMapUnion;
+      preserveSymlinks?: boolean;
     };
     angularBuilderContext?: BuilderContext | null;
     tsConfig?: string;

scripts/task.ts

@@ -157,6 +157,11 @@ export const options = createOptions({
     inverse: true,
     promptType: false,
   },
+  prod: {
+    type: 'boolean',
+    description: 'Build code for production',
+    promptType: false,
+  },
   dryRun: {
     type: 'boolean',
     description: "Don't execute commands, just list them (dry run)?",

scripts/tasks/compile.ts

@@ -33,9 +33,9 @@ export const compile: Task = {
       return false;
     }
   },
-  async run({ codeDir }, { link, dryRun, debug }) {
+  async run({ codeDir }, { link, dryRun, debug, prod }) {
     return exec(
-      link ? linkCommand : noLinkCommand,
+      link && !prod ? linkCommand : noLinkCommand,
       { cwd: codeDir },
       {
         startMessage: '🥾 Bootstrapping',

scripts/tasks/sandbox-parts.ts

@@ -620,18 +620,24 @@ export async function setImportMap(cwd: string) {
   await writeJson(join(cwd, 'package.json'), packageJson, { spaces: 2 });
 }
 
-/**
- * Sets compodoc option in angular.json projects to false. We have to generate compodoc
- * manually to avoid symlink issues related to the template-stories folder.
- * In a second step a docs:json script is placed into the package.json to generate the
- * Compodoc documentation.json, which respects symlinks
- * */
 async function prepareAngularSandbox(cwd: string, templateName: string) {
   const angularJson = await readJson(join(cwd, 'angular.json'));
 
   Object.keys(angularJson.projects).forEach((projectName: string) => {
+    /**
+     * Sets compodoc option in angular.json projects to false. We have to generate compodoc
+     * manually to avoid symlink issues related to the template-stories folder.
+     * In a second step a docs:json script is placed into the package.json to generate the
+     * Compodoc documentation.json, which respects symlinks
+     */
     angularJson.projects[projectName].architect.storybook.options.compodoc = false;
     angularJson.projects[projectName].architect['build-storybook'].options.compodoc = false;
+    /**
+     * Sets preserveSymlinks option in angular.json projects to true. This is necessary to
+     * respect symlinks so that Angular doesn't complain about wrong types in @storybook/* packages
+     */
+    angularJson.projects[projectName].architect.storybook.options.preserveSymlinks = true;
+    angularJson.projects[projectName].architect['build-storybook'].options.preserveSymlinks = true;
   });
 
   await writeJson(join(cwd, 'angular.json'), angularJson, { spaces: 2 });