Sample project for using the Angular 2 Language Service in Visual Studio
Switch branches/tags
Nothing to show
Clone or download
Latest commit a4e8188 Oct 18, 2017
Permalink
Failed to load latest commit information.
src Enhance tour Oct 18, 2017
tour_images Enhance tour Oct 18, 2017
.editorconfig Initial commit Oct 18, 2017
.gitignore Update gitignore Oct 18, 2017
LICENSE Initial commit Oct 18, 2017
README.md Enhance tour Oct 18, 2017
package-lock.json Initial commit Oct 18, 2017
package.json Initial commit Oct 18, 2017
tsconfig.aot.json Initial commit Oct 18, 2017
tsconfig.json Initial commit Oct 18, 2017
webpack.config.js Initial commit Oct 18, 2017
yarn.lock Initial commit Oct 18, 2017

README.md

Angular 2 in Visual Studio Sample Project

Introduction

This repo is a sample project that shows off Angular 2 Language Service support in Visual Studio.

Usage

Prerequisite: Visual Studio 2017 Update 5 or later

To use this project:

  • git clone https://github.com/Microsoft/angular2-in-visual-studio.git
  • cd angular2-in-visual-studio
  • npm install
  • In Visual Studio, "Open Folder" (Ctrl-Alt-Shift-O or File -> Open -> Folder...)
  • Select the cloned directory (not src)

Tour

Once the project is opened, you can observe these new behaviors

Semantic Warnings

Open src\app\app.component.ts. The Angular2 language service warns you that the InlineComponent class doesn't belong to a module:

Error about missing module

Errors in Inline Templates

Still in src\app\app.component.ts, you can try editing the inline template in InlineComponent. The project includes a syntax error:

Syntax error

Fix the syntax error by changing </spa> to </span>. You'll now see a semantic error:

Inline semantic error

Angular2 identified another mistake here - there is no method named toLower; fix this to toLowerCase. The error disappears:

Errors resolved

Navigation

Now that we've fixed the errors, let's try some navigation. Place the caret on prop1 in the inline template. Open the context menu and select "Go to Definition":

Go to Definition

This will take us to the definition of prop1 in the corresponding component:

Navigated

.ngml Files

Open src\app\app.component.ngml. This is the template file for the corresponding class AppComponent in app.component.ts. On line 5, place the caret on prop1 and invoke "Go to Definition" again:

Go to Definition from ngml

This navigates us to the prop1 declaration in app.component.ts. Note that even though the file had two classes, both with properties named prop1, we were properly navigated to the correct one:

Navigated from ngml

Completions

In both inline templates and ngml files, we'll get completion lists.

Open src\app\contact\contact.component.ngml. Go to line 29 and place the caret to the right of . in contactForm.status, and press Ctrl-Space to open the completion list:

Completions in ngml

Visual Studio will display all the members of the contactForm. You can also see completions in NGML template positions. Place the caret on line 23 after div, and press Ctrl-Space to open the completion list:

Template completions in ngml

Now you'll see a list of the allowed attribute names, including those specific to Angular 2's template syntax, in the completion list.