For VS2015, choose ASP.NET Web Application > ASP.NET 5 Empty, and let’s uncheck “Host in the cloud” since we’re going to run this locally.
\n![\"Use](\"../../assets/images/tutorials/aspnet/new-asp-project-empty.png\")
For VS2017, choose ASP.NET Core Web Application (.NET Core) > ASP.NET Core 1.1 Empty instead.
\n![\"Use](\"../../assets/images/tutorials/aspnet/new-asp-project-empty-17.PNG\")
First, install ASP.NET Core if you need it. This quick-start guide requires Visual Studio 2015 or 2017.
\nNext, if your version of Visual Studio does not already have the latest TypeScript, you can install it.
\nFor VS2015, choose ASP.NET Web Application > ASP.NET 5 Empty, and let’s uncheck “Host in the cloud” since we’re going to run this locally.
\n
For VS2017, choose ASP.NET Core Web Application (.NET Core) > ASP.NET Core 1.1 Empty instead.
\n
Run the application and make sure that it works.
\nIn project.json add another entry in \"dependencies\":
\njson\"Microsoft.AspNet.StaticFiles\": \"1.0.0-rc1-final\"
The resulting dependencies should look like this:
\n\njson\"dependencies\": {\n \"Microsoft.AspNet.IISPlatformHandler\": \"1.0.0-rc1-final\",\n \"Microsoft.AspNet.Server.Kestrel\": \"1.0.0-rc1-final\",\n \"Microsoft.AspNet.StaticFiles\": \"1.0.0-rc1-final\"\n },
Replace the body of Configure in Startup.cs with
public void Configure(IApplicationBuilder app)\n{\n app.UseIISPlatformHandler();\n app.UseDefaultFiles();\n app.UseStaticFiles();\n}\nOpen Dependencies > Manage NuGet Packages > Browse. Search and install Microsoft.AspNetCore.StaticFiles 1.1.2:
![\"Install](\"../../assets/images/tutorials/aspnet/install-nuget-packages.png\")
Replace the body of Configure in Startup.cs with
public void Configure(IApplicationBuilder app)\n{\n app.UseDefaultFiles();\n app.UseStaticFiles();\n}\nYou may need to restart VS for the red squiggly lines below UseDefaultFiles and UseStaticFiles to disappear.
The next step is to add a folder for TypeScript.
\n![\"Create](\"../../assets/images/tutorials/aspnet/new-folder.png\")
We’ll just call it scripts.
![\"scripts](\"../../assets/images/tutorials/aspnet/scripts-folder.png\")
Right click on scripts and click New Item.\nThen choose TypeScript File (it may be in the .NET Core section) and name the file app.ts.
![\"New](\"../../assets/images/tutorials/aspnet/new-item.png\")
Type the following code into app.ts.
\n\ntsfunction sayHello() {\n const compiler = (document.getElementById(\"compiler\") as HTMLInputElement)\n .value;\n const framework = (document.getElementById(\"framework\") as HTMLInputElement)\n .value;\n return `Hello from ${compiler} and ${framework}!`;\n}
First we need to tell TypeScript how to build.\nRight click on the scripts folder and click New Item.\nThen choose TypeScript Configuration File and use the default name tsconfig.json.
![\"Create](\"../../assets/images/tutorials/aspnet/new-tsconfig.png\")
Replace the default tsconfig.json with the following:
\njson{\n \"compilerOptions\": {\n \"noImplicitAny\": true,\n \"noEmitOnError\": true,\n \"sourceMap\": true,\n \"target\": \"es5\"\n },\n \"files\": [\"./app.ts\"],\n \"compileOnSave\": true\n}
This is similar to the default, with the following differences:
\n\"noImplicitAny\": true.\"files\" instead of relying on \"excludes\".\"compileOnSave\": true.\"noImplicitAny\" is good idea whenever you’re writing new code — you can make sure that you don’t write any untyped code by mistake.\n\"compileOnSave\" makes it easy to update your code in a running web app.
Now we need to set up npm so we can download JavaScript packages.\nRight click on the project and click New Item.\nThen choose npm Configuration File and use the default name package.json.\nInside \"devDependencies\" add “gulp” and “del”:
\njson\"devDependencies\": {\n \"gulp\": \"3.9.0\",\n \"del\": \"2.2.0\"\n}
Visual Studio should start installing gulp and del as soon as you save the file.\nIf not, right-click package.json and then Restore Packages.
\nFinally, add a new JavaScript file named gulpfile.js.\nPut the following code inside:
\njs/// <binding AfterBuild='default' Clean='clean' />\n/*\nThis file is the main entry point for defining Gulp tasks and using Gulp plugins.\nClick here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007\n*/\n\nvar gulp = require(\"gulp\");\nvar del = require(\"del\");\n\nvar paths = {\n scripts: [\"scripts/**/*.js\", \"scripts/**/*.ts\", \"scripts/**/*.map\"]\n};\n\ngulp.task(\"clean\", function() {\n return del([\"wwwroot/scripts/**/*\"]);\n});\n\ngulp.task(\"default\", function() {\n gulp.src(paths.scripts).pipe(gulp.dest(\"wwwroot/scripts\"));\n});
The first line tells Visual Studio to run the task ‘default’ after the build finishes.\nIt will also run the ‘clean’ task when you ask Visual Studio to clean the build.
\nNow right-click on gulpfile.js and click Task Runner Explorer.\nIf ‘default’ and ‘clean’ tasks don’t show up, refresh the explorer:
![\"Refresh](\"../../assets/images/tutorials/aspnet/task-runner-explorer.png\")
Add a New Item named index.html inside wwwroot.\nUse the following code for index.html:
\nhtml<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <script src=\"scripts/app.js\"></script>\n <title></title>\n </head>\n <body>\n <div id=\"message\"></div>\n <div>\n Compiler:\n <input\n id=\"compiler\"\n value=\"TypeScript\"\n onkeyup=\"document.getElementById('message').innerText = sayHello()\"\n /><br />\n Framework:\n <input\n id=\"framework\"\n value=\"ASP.NET\"\n onkeyup=\"document.getElementById('message').innerText = sayHello()\"\n />\n </div>\n </body>\n</html>
![\"Picture](\"../../assets/images/tutorials/aspnet/running-demo.png\")
return.![\"Demo](\"../../assets/images/tutorials/aspnet/paused-demo.png\")
That’s all you need to know to include basic TypeScript in your ASP.NET project.\nNext we’ll include Angular and write a simple Angular app.
\nAdd Angular 2 and SystemJS to dependencies in package.json.
For VS2015, the new dependencies list:
\njson\"dependencies\": {\n \"angular2\": \"2.0.0-beta.11\",\n \"systemjs\": \"0.19.24\",\n \"gulp\": \"3.9.0\",\n \"del\": \"2.2.0\"\n },
For VS2017, due to the deprecation of peer dependencies in npm@3, we need to list Angular 2’s peer dependencies directly as dependencies as well:
\n\njson\"dependencies\": {\n \"angular2\": \"2.0.0-beta.11\",\n \"reflect-metadata\": \"0.1.2\",\n \"rxjs\": \"5.0.0-beta.2\",\n \"zone.js\": \"^0.6.4\",\n \"systemjs\": \"0.19.24\",\n \"gulp\": \"3.9.0\",\n \"del\": \"2.2.0\"\n },
Now that Angular 2 and its dependencies are installed, we need to enable TypeScript’s experimental support for decorators.\nWe also need to add declarations for ES2015, since Angular uses core-js for things like Promise.\nIn the future decorators will be the default and these settings will not be needed.
Add \"experimentalDecorators\": true, \"emitDecoratorMetadata\": true to the \"compilerOptions\" section.\nNext, add \"lib\": [\"es2015\", \"es5\", \"dom\"] to \"compilerOptions\" as well to bring in declarations from ES2015.\nFinally, we’ll need to add a new entry in \"files\" for another file, \"./model.ts\", which we’ll create.\nOur tsconfig should now look like this:
\njson{\n \"compilerOptions\": {\n \"noImplicitAny\": true,\n \"noEmitOnError\": true,\n \"sourceMap\": true,\n \"experimentalDecorators\": true,\n \"emitDecoratorMetadata\": true,\n \"target\": \"es5\",\n \"lib\": [\"es2015\", \"es5\", \"dom\"]\n },\n \"files\": [\"./app.ts\", \"./model.ts\", \"./main.ts\"],\n \"compileOnSave\": true\n}
Finally, we need to make sure that the Angular files are copied as part of the build.\nWe need to add:
\nlib task to pipe the files to wwwroot.lib to the default task.The updated gulpfile.js should look like this:
\nxml/// <binding AfterBuild='default' Clean='clean' />\n/*\nThis file is the main entry point for defining Gulp tasks and using Gulp plugins.\nClick here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007\n*/\n\nvar gulp = require('gulp');\nvar del = require('del');\n\nvar paths = {\n scripts: ['scripts/**/*.js', 'scripts/**/*.ts', 'scripts/**/*.map'],\n libs: ['node_modules/angular2/bundles/angular2.js',\n 'node_modules/angular2/bundles/angular2-polyfills.js',\n 'node_modules/systemjs/dist/system.src.js',\n 'node_modules/rxjs/bundles/Rx.js']\n};\n\ngulp.task('lib', function () {\n gulp.src(paths.libs).pipe(gulp.dest('wwwroot/scripts/lib'));\n});\n\ngulp.task('clean', function () {\n return del(['wwwroot/scripts/**/*']);\n});\n\ngulp.task('default', ['lib'], function () {\n gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/scripts'));\n});
Again, make sure that Task Runner Explorer sees the new lib task after you save the gulpfile.
First, change the code in app.ts to:
\ntsimport { Component } from \"angular2/core\";\nimport { MyModel } from \"./model\";\n\n@Component({\n selector: `my-app`,\n template: `\n <div>Hello from {{ getCompiler() }}</div>\n `\n})\nexport class MyApp {\n model = new MyModel();\n getCompiler() {\n return this.model.compiler;\n }\n}
Then add another TypeScript file in scripts named model.ts:
\ntsexport class MyModel {\n compiler = \"TypeScript\";\n}
And then another TypeScript file in scripts named main.ts:
\ntsimport { bootstrap } from \"angular2/platform/browser\";\nimport { MyApp } from \"./app\";\nbootstrap(MyApp);
Finally, change the code in index.html to the following:
\nhtml<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <script src=\"scripts/lib/angular2-polyfills.js\"></script>\n <script src=\"scripts/lib/system.src.js\"></script>\n <script src=\"scripts/lib/rx.js\"></script>\n <script src=\"scripts/lib/angular2.js\"></script>\n <script>\n System.config({\n packages: {\n scripts: {\n format: \"cjs\",\n defaultExtension: \"js\"\n }\n }\n });\n System.import(\"scripts/main\").then(null, console.error.bind(console));\n </script>\n <title></title>\n </head>\n <body>\n <my-app>Loading...</my-app>\n </body>\n</html>
This loads the app.\nWhen you run the ASP.NET application you should see a div that says “Loading…” and then updates to say “Hello from TypeScript”.
","headings":[{"value":"Setup","depth":1},{"value":"Install ASP.NET Core and TypeScript","depth":2},{"value":"Create a new project","depth":2},{"value":"Set up the server","depth":2},{"value":"VS2015","depth":3},{"value":"VS2017","depth":3},{"value":"Add TypeScript","depth":1},{"value":"Add TypeScript code","depth":2},{"value":"Add example code","depth":2},{"value":"Set up the build","depth":2},{"value":"Configure the TypeScript compiler","depth":3},{"value":"Set up npm","depth":3},{"value":"Set up gulp","depth":3},{"value":"Write an HTML page","depth":2},{"value":"Test","depth":2},{"value":"Debug","depth":2},{"value":"Add Angular 2","depth":1},{"value":"Add npm dependencies","depth":2},{"value":"Update tsconfig.json","depth":2},{"value":"Add Angular to the gulp build","depth":2},{"value":"Write a simple Angular app in TypeScript","depth":2}],"frontmatter":{"permalink":"/docs/handbook/asp-net-core.html","title":"ASP.NET Core"}}},"pageContext":{"slug":"/docs/handbook/asp-net-core.html","isOldHandbook":true}}}