How to build a typescript-based ANGULAR2 project on ASP. NET 5

First, preface

Just last month, a colleague of the company suggested that the current front-end should be used to angularjs for development, and we were using the ASP. NET 5 project, originally my plan is to use typescript direct ANGULAR2 development. So take this time to write about how to build a typescript-based ANGUALR2 project under ASP. NET 5, and let's get to the point.

Second, the Environment configuration

If the reader directly according to Angular.io on the way to build is not able to pass, so below our tutorial is basically similar to the Angular.io, but the configuration will be different, and there will be a number of steps.

1. Create an empty ASP. NET 5 Project

Readers must have VS2015 installed, through "file"-"new"-"project", and then select the project as in:

Where the project name reader is free to take one, if the reader does not want to consider can be named "Angularweb". Then we click OK and continue to select this:

Such an empty ASP. NET 5 project was built.

2. Load ANGULAR2

Because the default empty project is no NPM profile, so we want to create a new one, first we right click on the project to add an item, as shown in (do not need to modify the file name):

When we're done, we can see that there's npm under the dependency, and this time we right-click on the NPM and follow the arrow that says as shown:

After opening, we enter the content in it:

{  "Name": "Angular2-quickstart",  "Version": "1.0.0",  "Scripts": {    "Start": "Concurrently \" NPM run tsc:w\ "\" NPM run Lite\ ",        "TSC": "TSC",    "Tsc:w": "Tsc-w",    "Lite": "Lite-server",    "Typings": "Typings",    "Postinstall": "Typings Install"   },  "License": "ISC",  "Dependencies": {    "Angular2": "2.0.0-beta.13",    "Systemjs": "0.19.25",    "Es6-shim": "^0.35.0",    "Reflect-metadata": "0.1.2",    "Rxjs": "5.0.0-beta.2",    "Zone.js": "0.6.6"  },  "Devdependencies": {    "Concurrently": "^2.0.0",    "Lite-server": "^2.1.0",    "Typescript": "^1.8.9",    "Typings": "^0.7.11",    "Gulp": "^3.9.1"  }}

This section is basically the same as Angular.io, and after you add the content, the vs2015 will automatically revert to the NPM reference.

3.TypeScript Configuration

As with the new NPM configuration file, we also need to create a new typescript configuration file, and this time we still right-click the project created by the new item, as shown in the corresponding file name does not need to change:

After the new completion we open this file and then enter the following to configure TS, so as to ensure that we can use the development process to the angular module and other modules, the specific content is as follows:

{  "CompilerOptions": {    "Emitdecoratormetadata":true,    "Experimentaldecorators":true,    "Module": "System",    "Moduleresolution": "Node",    "Noemitonerror":true,    "Noimplicitany":false,    "OutDir": "./wwwroot/app/",    "Removecomments":false,    "Sourcemap":true,    "Target": "ES5"  },  "Exclude": [    "Node_modules",    "Typings/main",    "Typings/main.d.ts"  ]}

Readers note that we are using the system's module management, if the use of other values here will result in the run time some functions do not exist. Configuration is not finished, we also need to rely on other configuration, this time we still follow the above section of the new typescript configuration file, but this time we need to modify the corresponding file name, changed to "Typings.json", Then talk about where the content is copied:

{  "ambientdependencies": {    "Es6-shim": "github:definitelytyped/definitelytyped/ Es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd ",    " Jasmine ":" Github:d Efinitelytyped/definitelytyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd "  }}

Of course this step is the official need, so far the configuration of the typescript is over.

4.GULP Configuration

Because we are developing projects are under the wwwroot, but we need to reference typescript compiled JS file, and this process we can not manual way, so we need to borrow gulp to automate this step, we create a new gulp configuration file:

The file name remains the default, and the following is the primary responsibility for copying the files we need in Node_module to the Libs folder under Wwwroot:

///<binding afterbuild= ' movetolibs '/>varGulp = require (' Gulp ')); Gulp.task (' Movetolibs ',function(done) {GULP.SRC ([' Node_modules/angular2/bundles/js ',      ' Node_modules/angular2/bundles/angular2.*.js* ',      ' Node_modules/angular2/bundles/angular2-polyfills.js ',      ' Node_modules/angular2/bundles/http.*.js* ',      ' Node_modules/angular2/bundles/router.*.js* ',      ' Node_modules/es6-shim/es6-shim.min.js* ',      ' Node_modules/angular2/es6/dev/src/testing/shims_for_ie.js ',      ' Node_modules/systemjs/dist/*.* ',      ' Node_modules/jquery/dist/jquery.*js ',      ' Node_modules/bootstrap/dist/js/bootstrap*.js ',      ' Node_modules/rxjs/bundles/rx.js ']). Pipe (Gulp.dest ('./wwwroot/libs/')); GULP.SRC ([' Node_modules/bootstrap/dist/css/bootstrap.css ']). Pipe (Gulp.dest ('./wwwroot/libs/css '));});

So we're going to end up with the gulp part.

5. Project configuration

For the site to work properly, so we also need to make some adjustments to the project itself, first we open the Project.json file, add a new module in it, and add some automation scripts:

So our project is configured to complete, the reader can generate the next project, if there is no error we will continue to go down, if the reader has an unresolved problem can be left in the comments below.

Three, sample development

If the reader completes the above initialization, we can complete a small project to verify that our environment is a single success, first we open the Wwwroot folder, in which the new app folder.

1.app.component.ts Development

Create a new file in the app folder, and then enter the content in it:

Import {Component} from ' Angular2/core '; @Component ({    ' My-app ',    ' }) export class AppComponent {}

This allows us to complete the development of a component.

2.main.ts Development

To create a new file in the app folder, our portal folder will use the following files, and it will use the one we created above.

Import {bootstrap} from    ' Angular2/platform/browser './app.component '; bootstrap (AppComponent);

3.STYLE.CSS Development

To make our results look good, here we create the style file under Wwwroot and enter the following in it:

/*Master Styles*/H1{Color:#369;font-family:Arial, Helvetica, Sans-serif;font-size:250%;}H2, H3{Color:#444;font-family:Arial, Helvetica, Sans-serif;Font-weight:Lighter;}Body{margin:2em; }body, Input[text], button{Color:#888;font-family:Cambria, Georgia; }

4.index.html Development

We create this file under Wwwroot, where we will use the content developed above and show the final effect, as follows:

<HTML><Head>    <title>Angular 2 QuickStart</title>    <Metaname= "Viewport"content= "Width=device-width, initial-scale=1">    <Linkrel= "stylesheet"href= "Styles.css">    <Scriptsrc= "Libs/es6-shim.min.js"></Script>    <Scriptsrc= "Libs/system-polyfills.js"></Script>    <Scriptsrc= "Libs/shims_for_ie.js"></Script>    <Scriptsrc= "Libs/angular2-polyfills.js"></Script>    <Scriptsrc= "Libs/system.js"></Script>    <Scriptsrc= "Libs/rx.js"></Script>    <Scriptsrc= "Libs/angular2.dev.js"></Script>        <Script>System.config ({packages: {app: {format:'Register', Defaultextension:'JS'          }        }      }); System.import ('App/main'). Then (NULL, Console.error.bind (console)); </Script></Head><Body>    <My-app>Loading ...</My-app></Body></HTML>

If the JS file we need is not automatically copied to it under Libs, we can do it manually through the "Gulp movetolibs" command in the root directory of the project by CMD.

Final effect:

How to build a typescript-based ANGULAR2 project on ASP. NET 5