microsoft/angular2-in-visual-studio

Sample project for using the Angular 2 Language Service in Visual Studio

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:

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:

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

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

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":

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

.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:

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:

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:

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:

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

angular2-in-visual-studio's Issues

New behaviour not visible if npm install from VS

Not sure if this is the correct place to make a note of this, as if its an issue its a VS issue. I didn't follow the instructions to the letter but this might indicate a potential issue?

Rather than opening the cloned folded after npm install I npm installed from the package manager console after having opened the cloned folder. Then opening app/app.component.ts. This meant that I didn't get any of the semantic warning mentioned. Closing visual studio after this and reopening, did show the semantic warnings.

How to enable this in an existing angular-cli application (within an ASP.NET MVC app)?

I added the devDependency @angular/language-service to the package.json.
In the tsconfig.json, I added
"plugins": [
{ "name": "@angular/language-service" }
]
Are there any other things to do? Could not find further hints in this demo project.

Also the use of the ngml extension is not fine.
I assume you find the corresponding component just by filename?
So why not support all .html files which have a corresponding .ts file?

[Question] Is `.ngml` a requirement for intellisense in Angular 2 Language Service?

The CLI by default generates .html not .ngml.

It's not a big deal, just wondering if there's a way it would work with .html templates.

Thanks!
Joe

SSR doesn't work

Server Side rendering in the example doesn't work! In the iis there is not file. Is the publishing never tested?

NGML Bug

I am considering moving whole team to VS instead of VSCode. I tested converting one of my components to .ngml and then enabling language service in tsconfig. However the entire ngml now complains since it's expecting typescript and not html...

the errors are for every single different html element

I also can not follow definitions or anything.

Its really annoying that to us VS we have to change all the extensions to ngml and then too this does not work properly.

P.S. i'm using the new Angular CLI dotnet core template shipped with the dotnet cli. All TS languge service stuff works.

How to use features on existing Angular 2 .NET Core 2.0 app

Upgraded to VS 15.5 this morning. I'd like to use these features on an existing Angular 2 app (based on the .NET Core 2.0 SPA template) but I can't tell how to enable them.

How does one build with ngml files?

How does one build with ngml files?

As the title says, how do you build/serve a project with ngml files without getting this:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

error?