mirror of
https://github.com/BillyOutlast/posthog.com.git
synced 2026-02-06 12:21:21 +01:00
99 lines
2.6 KiB
Plaintext
99 lines
2.6 KiB
Plaintext
---
|
|
title: Upload source maps for Angular
|
|
showStepsToc: true
|
|
---
|
|
|
|
import CLIDownload from '../_snippets/cli/download.mdx'
|
|
import CLIAuthenticate from '../_snippets/cli/authenticate.mdx'
|
|
import InjectSourceMap from './_snippets/inject-source-map.mdx'
|
|
import UploadSourceMap from './_snippets/upload-source-map.mdx'
|
|
|
|
<Steps>
|
|
|
|
<Step title="Install the PostHog CLI" badge="required">
|
|
|
|
<CLIDownload />
|
|
|
|
|
|
</Step>
|
|
|
|
<Step title="Authenticate the PostHog CLI" badge="required">
|
|
<CLIAuthenticate />
|
|
</Step>
|
|
|
|
<Step title="Output source maps for Angular" badge="required">
|
|
|
|
You can configure Angular to [generate source maps](https://angular.dev/reference/configs/workspace-config#source-map-configuration) by adding the following to your `angular.json` file:
|
|
|
|
```json file=angular.json focusOnLines=4-14
|
|
{
|
|
"projects": {
|
|
"my-app": {
|
|
"architect": {
|
|
"build": {
|
|
"builder": "@angular-devkit/build-angular:application",
|
|
"options": {
|
|
"sourceMap": {
|
|
"scripts": true, // +
|
|
"styles": true, // +
|
|
"hidden": true, // +
|
|
"vendor": true // +
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Then, build your Angular application:
|
|
|
|
```bash
|
|
ng build --configuration production
|
|
```
|
|
|
|
</Step>
|
|
|
|
<Step checkpoint title="Verify source map generation" subtitle="Confirm source maps are generated">
|
|
|
|
Confirm that the source maps are generated in the `dist/<your-app-name>/` directory. You should see a `.js.map` file for each JS bundle.
|
|
|
|
</Step>
|
|
|
|
<Step title="Inject source map" subtitle="Your goal in this step: Add metadata to associate maps with your code." badge="required">
|
|
|
|
<InjectSourceMap />
|
|
|
|
</Step>
|
|
|
|
<Step checkpoint title="Verify source map injection" subtitle="Confirm source map comments are present">
|
|
|
|
Confirm that the served files are injected with the correct source map comment in production in dev tools:
|
|
|
|
You should see a comment like this in your minified JS files, for example `main-IX6K2QJM.js`:
|
|
|
|
```js
|
|
//# chunkId=0197e6db-9a73-7b91-9e80-4e1b7158db5c
|
|
```
|
|
|
|
</Step>
|
|
|
|
<Step title="Upload source map" subtitle="Your goal in this step: Send the processed source maps to PostHog." badge="required">
|
|
<UploadSourceMap />
|
|
|
|
</Step>
|
|
|
|
<Step checkpoint title="Verify source map upload" subtitle="Confirm source maps are successfully uploaded">
|
|
|
|
Before proceeding, confirm that source maps are successfully uploaded to PostHog.
|
|
|
|
<CallToAction className="my-2" size="sm" type="secondary" to="https://app.posthog.com/settings/project-error-tracking#error-tracking-symbol-sets" external={true}>
|
|
Check symbol sets in PostHog
|
|
</CallToAction>
|
|
|
|
</Step>
|
|
</Steps>
|
|
|
|
|