Here is the quickstart for “Angular 2 quickstart” using
Visual Studio 2017. With this you can setup and run Angular 2 quickstart in
Visual Studio 2017. Please refer to the official Angular 2 Quickstart.
This Visual Studio adaption of the Angular 2 Quickstart can be found on my
GitHub site.
Here are the step by step details on how to setup Angular 2
project in Visual Studio.
·
Let’s start by creating a new ASP.NET Core project
in Visual Studio
·
Use Empty template to create a blank solution
·
Using Nuget install MVC
·
After installing MVC, install static files
middleware. This middleware is needed to serve javascript and html pages
·
Build the project to ensure all the dependencies
are downloaded
·
Add MVC services in ConfigureServices method in
Startup.cs
services.AddMvc();
·
After that, in Configure method configure Angular
2 startup and MVC (replace the app.Run code)
// to serve index.html as the default page
app.UseDefaultFiles();
// to serve all the javascript, css and other static pages
app.UseStaticFiles();
// configure route for webapi
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller}/{action}/{id?}");
});
·
To download all the Angular dependencies using
npm add package.json under wwwroot
·
From Angular 2 Quickstart GitHub copy the package.json.
In this blog unit testing is not covered. Hence there is no need to include
devDependenies. Here is the complete code for package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart
package.json from the documentation, supplemented with testing support",
"keywords": [],
"author": "Prasanna Kumar
Pattam",
"license": "MIT",
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "~2.4.0",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"angular-in-memory-web-api": "~0.2.2",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
"repository": {}
}
· Wait for the packages to be downloaded
·
From Angular 2 Quickstart GitHub copy the
following files/folder to the wwwroot folder
o
index.html
o
systemjs.config.js
o
styles.css
o
favicon.ico
o
tsconfig.json
o
app\main.ts
o
app\app.module.ts
o
app\app.component.ts
·
Once you copy the above files, the solution
explorer for wwwroot should look like this
·
Build the solution so that javascript files are
generated for the typescript files
·
If you get compile error, delete tsconfig.json
files under node_modules (not the one we copied). We don’t need to compile the
node_modules
·
Once you successfully compiled, run the application.
Voila our first Angular 2 app running in Visual Studio 2017.
Thank you for the article. I followed all steps without issue. However, when running the application I do not see the text 'Hello Angular'. Only see 'Loading the application...' which comes by default in the HTML page. Any thoughts?
ReplyDeleteI suspect that angular javascript files might not be properly loaded. Have you checked the errors in developer tools console. Please post those errors, which can give a clue on what's happening
DeleteI had the same issue. Turns out you also need to include systemjs-angular-loader.js from the GitHub QuickStart.
DeleteVery good version angulara! It is very convenient for me to use it in programming
ReplyDeleteWhy do I need ASP.Net MVC or any of the .net infrastructure? I just want to create an HTML5 app with no ASP.Net dependencies. Zero. None.
ReplyDeleteI just want to understand the deployment process for a typescript app and get it onto a server running IIS or out to the phone store to publish through Cordova
That is sgood programme to perform my work perfectly and have the result I expect form it.
ReplyDeleteSuch a detailed tutorial, awesome! I have learned a lot of tricks and tips here, you are doing such a great job! Thanks a lot for posting!
ReplyDeletethanks for helping to deal with the program, long time did not understand what I do with it, but now I understand everything
ReplyDelete