Build: Add --prod flag to be able to create Angular-specific sandboxe…

…s in linked mode

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).

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 });