Browse Source

docs: Add section on IDE support to ui extensions guide

Michael Bromley 1 year ago
parent
commit
2c9a53a6fa

+ 2 - 2
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>
-```
+```

+ 37 - 0
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.