Installing Angular 2.0 for Visual Studio 2015 from Scratch, Tutorial
Step one. Accessories.
First, it is necessary to prepare Visual Studio for working with Node.js and NPM, as all the packets that Angular 2 depends on, are in NPM.
Install NPM Task Runner and Package Installer. They are needed for the connection between the Studio and NPM.
A few words about NPM and Windows.
As it turns out, Windows OS is quite original. By installing Node.js you automatically install NPM as well. But then if you install NPM globally (using -g flag), it’s very likely that it will be installed to a different location.
And it will not be used.
The problem lies in the fact that while installing Node.js, its installer writes into the PATH environmental variable the pathway to the NPM which comes with it. That’s why launching NPM from a console will address the NPM which comes with it and not the global one.
To fix this, do the following:
Find the location where the global NPM was installed (you can execute the npm root -g command). Then substitute the pathway to Node NPM in the PATH environmental variable with the pathway to the global NPM. Do not forget to do it for the system and for the user, as well as to reboot your workstation.
After installing extensions, launch the Studio and create a blank web project. Then you need to update the node.js and NPM used by Visual Studio. The Studio uses local NPM and node.js, not global ones. It does not know anything about the things installed in your system as it relies on the node.js which is in External Web Tools. If you don’t take this into consideration, the Studio will use outdated components and you won’t launch your application. So, click on the project and choose “quick install package”. In the appearing dialogue box type “gulp” and install it. Of course, this is not a must, but, frankly speaking, I don’t feel like creating package.json manually.
Having installed “gulp”, we receive package.json which we can work with.
And the first thing to do at this point is to check versions of node.js and NPM, which our studio will be working with.
Add a “scripts” section with commands «npm -v» and «node -v» and execute them from task runner.
package.json
{ "name": "myproject", "version": "1.0.0", "devDependencies": { "gulp": "^3.9.1" }, "scripts": { "getNpmVersion": "npm -v", "getNodeVersion": "node -v" } }
The results I got were impressive: node v0.10.31 and NPM 1.4.9. I’d like to point out once again that these are the versions to be used by Visual Studio, and neither the installed node, nor the global npm have anything to do with them at the moment.
Now, it is time to bring everything to order. Add a new command to the package.json: “updateNpm”: “npm install npm@latest”, and launch it. Having waited a little, launch getNpmVersion. Npm has updated and is now version 3.10.5.
This will not, however, work for node.js. Frankly speaking, I have not found a way to update node.js, but I have figured out how to make the Studio use the version of node.js that I need.
First, find the location, where your node.js is installed, and copy the path there. Now go to Tools -> Options -> Projects and Solutions -> External web tools and add a new path there which directs the Studio to the necessary node version (if there isn’t one, just download and install it). Don’t forget to bring the new path to the top. Restart the Studio (you don’t have to restart Windows), and execute getNodeVersion command. You should get the update.
Take a break here, because it is not going to get easier now.
Step two. Installing dependencies.
Continue with project.json. Modify it with the following code and install all the dependencies of our application to it.
package.json
{ "name": "myproject", "version": "1.0.0", "devDependencies": { "gulp": "^3.9.1", "typescript": " 2.0.3 ", "typings": "^1.0.4" }, "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@angular/upgrade": "2.0.0", "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.27", "zone.js": "^0.6.23", "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6" }, "scripts": { "postinstall": "typings install", "typings": "typings", "cmd": "npm typescript", "getNpmVersion": "npm -v", "getNodeVersion": "node -v" } }
Step three. Configuring typescript for Visual Studio.
Let’s add our first .ts file. Create in the root the “app” folder and add an empty app.component.ts file. Do not create your own file names, because it may ruin everything. Now, close the Studio.
Visual Studio and TypeScript! TypeScript and Visual Studio
In other programs typescript settings are configured in a separate file – tsconfig.json, but everything is different in Visual Studio. If we work with typescript in CommonJS mode (and that’s the mode we are going to work in), the Studio will ignore tsconfig.json. Meanwhile, tsconfig.json has two options of major importance for us — “emitDecoratorMetadata”: true,
“experimentalDecorators”: true.
These flags are configured in .csproj file manually. More information can be found here.
Fuller set of options
<PropertyGroup Condition="'$(Configuration)' == 'Debug'"> <TypeScriptRemoveComments>false</TypeScriptRemoveComments> <TypeScriptSourceMap>true</TypeScriptSourceMap> <TypeScriptTarget>ES5</TypeScriptTarget> <TypeScriptJSXEmit>None</TypeScriptJSXEmit> <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled> <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny> <TypeScriptModuleKind>System</TypeScriptModuleKind> <TypeScriptOutFile /> <TypeScriptOutDir /> <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations> <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError> <TypeScriptMapRoot /> <TypeScriptSourceRoot /> <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata> </PropertyGroup>
Close the Studio, find *.csproj file, and add two new lines to PropertyGroup node:
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators> <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
Now, open the project, go to properties, and find a new tab – TypeScript Build.
Set the following values there: EcmaScript 6 and Module System — Common Js. Then save.
Step four. Code.
Now we can start writing code in our app.component.ts.
Copy the following there and build the project:
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { }
If everything goes well, the build will be completed without errors. This is our main component, or, in other words, this is our application.’
Add app.module.ts near app.component.ts with the following code:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }
Now it’s time to configure its bootstrap. Add the file to the “app” folder:
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule);
Now, build the project again. There should be no error at this point as well. Building again is not necessary, but I recommend doing it to be on the safe side.
Then add to the root of the project the following:
index.html
<html> <head> <title>Angular 2 QuickStart</title> <meta charset=""UTF-8""> <meta name=""viewport"" content=""width=device-width, initial-scale=1""> <link rel=""stylesheet"" href=""styles.css""> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src=""node_modules/core-js/client/shim.min.js""></script> <script src=""node_modules/zone.js/dist/zone.js""></script> <script src=""node_modules/reflect-metadata/Reflect.js""></script> <script src=""node_modules/systemjs/dist/system.src.js""></script> <!-- 2. Configure SystemJS --> <script src=""systemjs.config.js""></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
And then add the following to the root as well:
systemjs.config.js
(function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' } } }); })(this);
Step five. Launching.
Now we can launch our application.
If everything went well, you should see the following on your screen: My First Angular 2 App.
The ready code is available on GitHub.
Thank you and success attend you!
What is Angular 2.0?