How To Setup AngularDart5 on VS Code

Question

I have searched far and wide on documentation on how to effectively set up Angular Dart 5 on Visual Studio Code but found nothing conclusive so far.

Places I've searched already:

• Youtube
• StackOverflow
• https://webdev.dartlang.org - The documentation only talks about WebStorm.

The VS Code plugin for dart doesn't provide functionality to make a new empty project. So I'm currently at a loss.

How would I go about setting up an AngularDart 5 project on my VS Code IDE? Could someone refer me to resources for the same?

Answer 1

VS Code with the Dart Code plugin offers basic support for editing AngularDart project files.

Integrated support for building and running apps is still work in progress (use Dart-Code#68 to track progress).

I don't know of any support to create an empty AngularDart 5 project, but you can use CLI tools to create starter projects, for example:

• Create a starter project from angular-examples/quickstart.
• Use stagehand 2.x to create a project from the web-angular template:

$ pub global activate stagehand
$ mkdir ng_project
$ cd ng_project
$ stagehand web-angular

The template also illustrates use of Angular Components.

To build and serve your app use the webdev CLI tool:

$ pub global activate webdev 
$ webdev serve

The serve command will build, serve and watch your app sources. You can, of course, launch this command from within a VS Code integrated terminal.

Answer 2

The newest version of the Dart Code (the official VS Code extension for Dart) now offers an AngularDart template for bootstraping new projects.

You can access it with the VScommand (CTRL+SHIFT+P):

> Dart: New Project

You will be prompted to select the template. Select the "Angular Dart Web App" template.

Then, you'll be prompted to give your project a name and select the containing directory.

After that, VSCode should run pub get automatically to install the dependencies and you should be good to go.

You can test the default project by running

webdev serve