feat(angular): Add service worker guide for fixing invalid file hashes in ngsw (#11494)

---------

Co-authored-by: Lukas Stracke <[email protected]>

Author: lennybakkalian

docs/platforms/javascript/common/sourcemaps/uploading/cli.mdx

@@ -30,3 +30,21 @@ If you want to configure source map uploading using the CLI, follow the steps be
 You can generate source maps using the tooling of your choice. See examples from other guides linked under <PlatformLink to="/sourcemaps/uploading/">Uploading Source Maps</PlatformLink>.
 
 <Include name="sentry-cli-sourcemaps.mdx" />
+
+<PlatformSection supported={['javascript.angular']}>
+
+## Fixing Angular Service Worker caching issues
+
+If you use the [Angular service worker](https://angular.dev/ecosystem/service-workers), you might encounter caching issues when uploading source maps with Sentry CLI.
+This happens because Sentry CLI injects debugIds into the generated JavaScript chunks after the build process.
+This means that the file hashes in `ngsw.json` for these chunks become invalid.
+To resolve the invalid hashes, regenerate `ngsw.json` after the debugIds have been injected using the following command:
+
+```bash
+node_modules/.bin/ngsw-config <dist> <config>
+```
+
+- `dist` Path to the built chunk files. The `ngsw.json` with the old hashes should be located there.
+- `config` Location of `ngsw-config.json` (should be in project root)
+
+</PlatformSection>

docs/platforms/javascript/common/troubleshooting/index.mdx

@@ -386,4 +386,17 @@ export default defineConfig({
 
 </Expandable>
 
+<PlatformSection supported={['javascript.angular']}>
+
+<Expandable
+  permalink
+  title="Invalid hashes in Angular Service Worker ngsw.json"
+>
+If you upload source maps for your Angular application with <PlatformLink to="/sourcemaps/uploading/cli">Sentry CLI</PlatformLink>, you might encounter caching issues if you use the [Angular service worker](https://angular.dev/ecosystem/service-workers).
+Learn more about fixing these caching issues in the <PlatformLink to="/sourcemaps/uploading/cli/#fixing-angular-service-worker-caching-issues">Uploading Source Maps with Sentry CLI</PlatformLink> guide.
+
+</Expandable>
+
+</PlatformSection>
+
 If you need additional help, you can [ask on GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose). Customers on a paid plan may also contact support.

platform-includes/sourcemaps/upload/primer/javascript.angular.mdx

@@ -1,10 +1,10 @@
 To upload your Angular project's source maps to Sentry, we recommend one of these options:
 
-- [**Angular CLI and Sentry webpack plugin**](./angular-webpack/) <br/>
+- [Angular CLI and Sentry webpack plugin](./angular-webpack/) <br/>
   Use the Angular CLI, a custom Angular builder and the Sentry webpack plugin to set releases and upload source maps automatically when running `ng build`.
-- [**Nx Angular CLI and Sentry webpack plugin**](./angular-nx/) <br/>
+- [Nx Angular CLI and Sentry webpack plugin](./angular-nx/) <br/>
   If you're using Nx, use `@nx/angular` CLI and the Sentry webpack plugin to set releases and upload source maps automatically when running `nx build`.
-- [**Sentry CLI**](./cli/)<br/>
+- [Sentry CLI](./cli/)<br/>
   Upload source maps manually using Sentry CLI.
 
 These options work well with Angular projects out of the box. For other bundlers or more advanced projects and configurations, take a look at the following guides and options for uploading sourcemaps: