From 2c9a53a6fa5f0e43e8107769f4565869b9563057 Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Thu, 2 May 2024 16:36:54 +0200
Subject: [PATCH] docs: Add section on IDE support to ui extensions guide

---
 .../creating-detail-views/index.md            |  4 +-
 .../getting-started/index.md                  | 37 +++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/docs/docs/guides/extending-the-admin-ui/creating-detail-views/index.md b/docs/docs/guides/extending-the-admin-ui/creating-detail-views/index.md
index 236e8a5f99..21543f9598 100644
--- a/docs/docs/guides/extending-the-admin-ui/creating-detail-views/index.md
+++ b/docs/docs/guides/extending-the-admin-ui/creating-detail-views/index.md
@@ -28,7 +28,7 @@ This example assumes you have set up your project to use code generation as desc
 import { ResultOf } from '@graphql-typed-document-node/core';
 import { ChangeDetectionStrategy, Component, OnInit, OnDestroy } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
-import { TypedBaseDetailComponent, LanguageCode, SharedModule } from '@vendure/admin-ui/core';
+import { TypedBaseDetailComponent, LanguageCode, NotificationService, SharedModule } from '@vendure/admin-ui/core';
 
 // This is the TypedDocumentNode & type generated by GraphQL Code Generator
 import { graphql } from '../../gql';
@@ -329,4 +329,4 @@ Then add a card for your custom fields to the template:
         </vdr-page-block>
     </vdr-page-detail-layout>
 </form>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/guides/extending-the-admin-ui/getting-started/index.md b/docs/docs/guides/extending-the-admin-ui/getting-started/index.md
index c03a641dec..a7f50be0fa 100644
--- a/docs/docs/guides/extending-the-admin-ui/getting-started/index.md
+++ b/docs/docs/guides/extending-the-admin-ui/getting-started/index.md
@@ -371,6 +371,43 @@ yarn add copyfiles
 
 While the Admin UI natively supports extensions written with Angular or React, it is still possible to create extensions using other front-end frameworks such as Vue or Solid. Note that creating extensions in this way is much more limited, with only the ability to define new routes, and limited access to internal services such as data fetching and notifications. See [UI extensions in other frameworks](/guides/extending-the-admin-ui/using-other-frameworks/).
 
+## IDE Support
+
+### WebStorm
+
+If you are using Angular in your UI extensions and WebStorm is not recognizing the Angular templates, you can
+add an `angular.json` file to the `/src/plugins/<my-plugin>/ui` directory:
+
+```json title="angular.json"
+{
+    "$schema": "../../../../node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "ui-extensions": {
+            "root": "",
+            "sourceRoot": "src",
+            "projectType": "application"
+        }
+    }
+}
+```
+
+This allows WebStorm's built-in Angular support to recognize the Angular templates in your UI extensions. Note that depending
+on your folder structure, you may need to adjust the path to the schema file in the `$schema` property.
+
+### VS Code
+
+If you are using Angular in your UI extensions and VS Code is not recognizing the Angular templates, you can
+add an empty `tsconfig.json` file to the `/src/plugins/<my-plugin>/ui` directory:
+
+```json title="tsconfig.json"
+{}
+```
+
+This works around the fact that your main `tsconfig.json` file excludes the `src/plugins/**/ui` directory, 
+which would otherwise prevent the Angular Language Service from working correctly.
+
 ## Legacy API < v2.1.0
 
 Prior to Vendure v2.1.0, the API for extending the Admin UI was more verbose and less flexible (React components were not supported at all, for instance). This API is still supported, but from v2.1 is marked as deprecated and will be removed in a future major version.