分步设置：Visual Studio 2015 Update 3 中的 Angular 2

Rahul Sabharwal

5.00/5 (6投票s)

2016 年 11 月 24 日

CPOL

3分钟阅读

78852

2159

设置 Visual Studio 2015 Update 3 中的 Angular2

下载源代码 - 578.5 KB

引言

本文提供一个逐步指南，介绍如何从 Visual Studio 2015 update3 MVC 应用程序设置和运行 Angular2 应用程序。当我开始使用 Angular2 应用程序来使其与 Visual Studio 2015 update 3 中的 MVC.NET 协同工作时，我发现它非常困难。但是，按照本文中提到的步骤，这对每个人来说都将是一件轻而易举的事情。

必备组件

Visual Studio 2015 update 3
Node (可以从 NodeJs 安装)

Using the Code

在 VS2015 中创建一个新的 ASP.NET Core 项目 => 另外，请确保取消选中 Application Insights 复选框。

选择 Web 应用程序作为模板，并将身份验证设置为 => 无身份验证
添加一个 NPM 配置文件 => 右键单击解决方案 => 添加新项 => Npm 配置文件，即package.json文件

现在，将以下内容添加到package.json文件中。这包括按如下方式添加dependencies和devDependencies

    {
  "name": "angular2withvs2015",
  "version": "1.0.0",
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "bootstrap": "3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "gulp": "3.9.1",
    "rimraf": "^2.5.4",
    "gulp-typescript": "^3.1.2",
    "typescript": "^2.0.7",
    "gulp-tsc": "^1.2.5",
    "@types/node": "6.0.40"
  }
}

现在，在您的解决方案中创建一个Scripts文件夹 => 您将在其中添加您的 TypeScript 代码 (.ts 文件)。
将tsconfig.json文件添加到您刚创建的Scripts文件夹中。右键单击 Scripts => 添加新项 => TypeScript JSON 配置文件。

修改tsconfig文件的内容，以便此文件夹中的所有*.ts文件都使用config文件中定义的设置进行编译

    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "outDir": "../wwwroot/app",
    "types": []
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

在这里，“outDir”设置为“../wwwroot/app” => 这确保了我所有已编译的 ts 代码文件都将复制到wwwroot文件夹中的app目录中。

接下来，您需要在解决方案中添加一个 Gulp 配置文件。右键单击解决方案 => 添加新项 => Gulp 配置文件
安装typings
打开 Visual Studio Developer Command Prompt
```
Run Command => npm install typings -g
```
这将全局安装typings。然后，运行这些命令来安装其余的依赖项。
```
typings install dt~core-js --global --save
```
```
typings install dt~node --global -–save
```
运行命令后，您的 Visual Studio 将在解决方案中拥有一个typings.json文件和一个typings文件夹，如下所示

此文件将用于创建任务，这些任务会将node_modules文件夹内容和编译的 typescript 文件复制到wwwroot目录中。为此，请修改gulpfile.js的内容，如下所示

/*
This file in the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/
var ts = require('gulp-typescript');

var gulp = require('gulp'),
 rimraf = require('rimraf');

gulp.task('clean', function (cb) {
    return rimraf('./wwwroot/lib1/', cb)
});

gulp.task('copy:lib', function () {
    return gulp.src('node_modules/**/*')
        .pipe(gulp.dest('./wwwroot/lib1/'));
}); 
gulp.task('copy:systemjs', function () {
    return gulp.src('Scripts/systemjs.config.js')
        .pipe(gulp.dest('./wwwroot/'));
});
var tsProject = ts.createProject('Scripts/tsconfig.json', {
    typescript: require('typescript')
});
gulp.task('ts', function () {
    var tsResult = gulp.src("Scripts/**/*.ts") 
        .pipe(tsProject());

    return tsResult.js.pipe(gulp.dest('./wwwroot'));
});

gulp.task('watch', ['watch.ts']);
gulp.task('watch.ts', ['ts'], function () {
    return gulp.watch('Scripts/**/*.ts', ['ts']);
});

gulp.task('default', ['watch']);

现在，剩下的唯一事情就是引导 Angular2 应用程序并在 ASP.NET Core MVC 应用程序中运行它。

为此，请按照以下步骤操作

您需要一些文件来引导和启动 angular2 应用程序

Systemjs.config.js - 此文件将是 MVC.NET 应用程序的起点。

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': '../../nodelib/'
        },
        // 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',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            // other libraries
'rxjs': 'npm:rxjs'
        },
        // 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'
            }
        }
    });
})(this);

Main.ts – 此文件是编写引导代码的地方。

    /// <reference path="../../typings/globals/node/index.d.ts" />
    /// <reference path="../../typings/globals/core-js/index.d.ts" />
    // main entry point
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app.module';
    
    platformBrowserDynamic().bootstrapModule(AppModule);

App.module.ts – 您可以在文件中定义主应用程序模块
app.component.ts – 在此文件中，您创建您的第一个 angular2 组件

完成添加所有 Angular2 应用程序文件后，您需要通过 Task Runner Explorer 运行 gulp 任务。这会将所有文件从“Scripts”复制到“wwwroot”文件夹

您的解决方案文件夹应如下所示
现在，修改您的index.cshtml文件，使其如下所示
修改您的_layout.cshtml文件并添加 angular2 相关的script标签

这就是您需要从 MVC.NET 运行 angular2 应用程序的全部内容。

关注点

您可以在此处了解有关 Angular2 的更多信息。