This week I did a technical presentation at the .NET User Group of BC in Vancouver.

Thanks to the organizers for having me, it was fun, as always I live coded an app and even did a live upgrade to Angular 6.0.0-rc5, to my great surprise all went so well!

Here is my slide deck:

ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017


As always, whenever I go somewhere to host my Angular Workshop, I also try to do a free User Group presentation.

Those are the next 2 events where I will speak:

Ottawa IT Community

Title: ASP.NET Core 2 and Angular 5 in Visual Studio 2017
When: Monday, March 26, 2018 at 12:00pm
Where: Microsoft Office at 100 Queen Street, Suite 500 , Ottawa, ON
Registration:
https://www.meetup.com/ottawaitcommunity/events/248541582/

Vancouver .NET User Group

Title: ASP.NET Core 2 and Angular 5 in Visual Studio 2017
When: Wednesday, April 25, 2018 at 5:45pm
Where: To be confirmed
Registration: www.meetup.com/NET-User-Group-of-BC/



Visual Studio Code has been my favorite tool to build Angular apps since 1 year ago (October 2015).

It comes with lots of good stuff from the “big” Visual Studio rich code editor, like code navigation, IntelliSense and refactoring, plus adds tons of productivity stuff in the context of web development and has TypeScript built-in, see: http://code.visualstudio.com/docs/editor/editingevolved

I particularly like the extensions model for productivity and I want to list here my TOP 3 extensions used while working on an Angular 2 app with TypeScript.

If you are new to VS Code you might want to read how to install extensions:
https://code.visualstudio.com/docs/editor/extension-gallery

My TOP 3 Code Extensions

  • Angular 2 TypeScript Snippets by John Papa

This is a must have! type “ng2-”… and you’ll get access to several TypeScript code snippets (think about code templates), some of them are available in your HTML files.

Angular 2 TypeScript Snippets by John Papa

  • Path Intellisense by Christian Kohler

This extension autocompletes filenames when you reference a file in your project, like a link to a css, a component template or an ES import.

Path Intellisense by Christian Kohler

  • Auto Import by steoates

Sometimes I don’t want to import objects myself, so I auto import them!

Auto Import by steoates

What are your fav extensions ?

Feel free to comment!


Following the recent release of Visual Studio Code v1, here is an updated version of my Getting Angular Intellisense in Visual Studio Code tutorial:

1. jsconfig.json

Notice you now have an icon to generate the jsconfig.json file!

Now right-click on the project’s folder and select Open in Command Prompt (or Open in Terminal on OS X or Linux).

2. Install Typings

In the command prompt (or terminal), type the following command:

npm install typings –D

Assuming you have a package.json file, the –D argument will have Typings listed as a dev dependency.

3. Grabs the typings files from the Definitely Typed repository

typings install angular –ambient –save

This will create a typings.json file and a typings folder with the .d.ts files.

Now open a js file and you should have Angular IntelliSense working!

Hopefully this will help you have a great IntelliSense experience when using Angular in Visual Studio Code!


Visual Studio Code (VS Code) is an awesome and free (Open Source) code editor that allows you to build and debug any modern web applications.

http://code.visualstudio.com/

VS Code provides built-in intellisense (code completion) for JavaScript, TypeScript, C#, … just hit CTRL+SPACE and have your code auto-complete!

IntelliSense for Angular Directives (HTML)

VS Code has native support for built-in Angular directives in IntelliSense within HTML tag.

Angular Directives Intellisense

IntelliSense for Angular API (Js Code)

VS Code has no out of the box intellisense for Angular code:

No Angular intellisense out of the box

But with some setup you can get it!

VS Code uses type definition files (.d.ts) from the DefinitelyTyped project, which provides typings files for all major JavaScript libraries and environments.

Typings files are managed using Typings, the TypeScript Definition manager.

Notes:

  • You no longer need to add the /// to all your .js files!
  • You also no longer want to use tsd as it has been deprecated.

Instead, we just need a jsconfig.json file at the root directory of your project.

1. jsconfig.json

Create an empty jsconfig.json at the root of your project. You need this jsconfig.json file to get cross-file IntelliSense to work.

2. Install Typings

npm install typings –D

Assuming you have a package.json file, the –D argument will have Typings listed as a dev dependency.

3. Grabs the typings files from the Definitely Typed repository

typings install angular –ambient –save

This will create a typings.json file and a typings folder with the .d.ts files.

Now open a js file and you should have Angular IntelliSense working!

Angular Intellisense in VS Code

Hopefully this will help you have a great IntelliSense experience when using Angular in Visual Studio Code!


ASP.NET Web Camp

OH YES, a free ASP.NET Web Conf coming to Montreal!!

This event is part of the Let’s Dev this Tour, organized by Microsoft, which in fact will offers 3 tracks: Web, Cloud and Windows 10.

Yes, a real Microsoft conference back in Montreal!!

1 DAY. 1 VENUE. 3 DEEP DIVE WORKSHOPS – WEB. CLOUD. WINDOWS 10.

The web content is based on the latest and greatest from the official ASP.NET Web Camp 2016.

Where: Le Centre Sheraton Montreal Hotel

When: March 30th

How much: Free!

What: The Future of Web Development. Build, Deploy, Scale! Build cutting edge web sites with the new release of ASP.NET, Node.JS and Web Tools for Visual Studio 2015 or Visual Studio Code, then deploy and scale them with Azure. Learn about the future of JavaScript with ECMAScript 2015. Attendees will learn how to develop beautiful, interactive and fast web sites using Microsoft’s web tools and platform. They will also learn how to deploy and scale web sites with the cloud.

Registration link for the Web track:
http://aka.ms/mvp1MTLweb

Other tracks link are available on the event site.

See you there!


visual studio code

It is the start of a New Year and you have decided to try Visual Studio Code, good resolution!

One of the things you will find the most surprising, is that unlike its big brother Visual Studio which has IIS Express, VS Code does not come with a built-in web server…

If you are building a client side SPA, such as an Angular app, it is crucial to develop and test in the context of a web server (http://localhost:xxx/…).

So nothing built-in so far, but no worries, there are at least 1 thousand way to setup a local web server.

I chose to use the following procedure, which is quite simple yet powerful. What works for me might not suit your need, your mileage might vary.

Please note: this is for your Development Environment only, not Production!

The following procedure is valid for MAC or PC.

1. Install Node.js

If not already installed, get it here: https://docs.npmjs.com/getting-started/installing-node

It comes with npm (the package manager for acquiring and managing your development libraries)

2. Create a new folder for your project

Somewhere in your drive, create a new folder for your web app.

3. Add a package.json file to the project folder

Then copy/paste the following text:

{
   “name”: “Demo”,
   “version”: “1.0.0”,
   “description”: “demo project.”,
   “scripts”: {
     “lite”: “lite-server –port 10001”,
     “start”: “npm run lite”
   },
   “author”: “”,
   “license”: “ISC”,
   “devDependencies”: {
     “lite-server”: “^1.3.1”
   }
}

4. Install the web server

In a terminal window (command prompt in Windows) opened on your project folder, run this command:

npm install

This will install lite-server (defined in package.json), a static server that loads index.html in your default browser and auto refreshes it when application files change.

5. Start the local web server!

(Assuming you have an index.html file in your project folder).

In the same terminal window (command prompt in Windows) run this command:

npm start

Wait a second and index.html is loaded and displayed in your default browser served by your local web server!

lite-server is watching your files and refreshes the page as soon as you make changes to any html, js or css files.

And if you have VS Code configured to auto save (menu File / Auto Save), you see changes in the browser as you type!

Notes:

  • Do not close the command line prompt until you’re done coding in your app for the day
  • It opens on http://localhost:10001 but you can change the port by editing the package.json file.

That’s it. Now before any coding session just type npm start and you are good to go!