65.9K
CodeProject 正在变化。 阅读更多。
Home

在 ASP.NET 5 环境中设置 Angular 2

andre.lombaard
starIconstarIconstarIconstarIconstarIcon

5.00/5 (17投票s)

2016年6月13日

CPOL

7分钟阅读

viewsIcon

30754

downloadIcon

301

解释在 ASP.NET 5 环境中设置 Angular 2 所涉及的过程

引言

按照5 分钟快速入门教程，启动并运行一个简单的 Angular 2 应用程序是相当直接的。但在 ASP.NET 5 环境中实现相同的应用程序会增加许多教程中未解释的复杂性，因此本文的目的是解释在 ASP.NET 5 环境中设置基本 Angular 2 应用程序所涉及的过程。

IDE 和其他开发工具版本

编写本文时使用的 IDE 和其他开发工具的版本如下所示：

  • Visual Studio 2015 14.0.24720.00 Update 1
  • Resharper Ultimate 2016.1.2
  • TypeScript 1.8.6
  • nodejs 4.4.5

非常重要

  • 更新到最新版本的 ReSharper 至关重要，JetBrains 修复了一些与 TypeScript 检查设置相关的错误。
  • Visual Studio 2015 附带了旧版本的 Node.js，请务必更新到最新版本。

设置一个空的 ASP.NET 5 Web 项目

从“文件”菜单中，选择“新建”>“项目”，这将打开“新建项目”对话框。

从“新建项目”对话框中，选择 ASP.NET Web 应用程序模板并将其命名为 Angular2QuickStart。

单击“确定”按钮，然后从 ASP.NET 项目对话框中选择“空 ASP.NET 5”模板。

单击“确定”按钮，这将为您创建一个空的 ASP.NET 5 项目。

配置 ASP.NET 应用程序以提供静态文件

打开 Startup.cs 文件并删除 Configure 方法中的以下代码：

app.Run(async (context) =>
{
    await context.Response.WriteAsync("Hello World!");
});

现在将以下内容添加到 Configure 方法以使应用程序能够提供默认和静态文件，例如 index.html。

app.UseDefaultFiles();
app.UseStaticFiles();

Configure 方法现在应该如下所示：

public void Configure(IApplicationBuilder app)
{
    app.UseIISPlatformHandler();
    app.UseDefaultFiles();
    app.UseStaticFiles();
}

创建 Index.html 文件

右键单击“解决方案资源管理器”中的 wwwroot 文件夹，然后选择“添加”>“新建项...”，这将打开“添加新项”对话框。

选择“文本文件”模板并将其命名为 Index.html。

单击“添加”按钮，这将创建 Index.html 文件并将以下 HTML 代码添加到该文件。

更新 project.json 文件

在撰写本文时，ASP.NET 5 应用程序在运行项目时会突然中止，这是因为 project.json 文件中 Microsoft.AspNet.StaticFiles 依赖项的版本问题。要解决此问题，请对 project.json 文件进行以下更改：

  • 删除 "dnxcore50": { }（此应用程序不使用核心框架）
  • 将 Microsoft.AspNet.StaticFiles 依赖项的版本更新为 1.0.0-rc1-final

project.json 现在应该如下所示：

{
    "version": "1.0.0-*",
    "compilationOptions": {
        "emitEntryPoint": true
    },

    "dependencies": {
        "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
        "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
        "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
    },

    "commands": {
        "web": "Microsoft.AspNet.Server.Kestrel"
    },

    "frameworks": {
        "dnx451": { }
    },

    "exclude": [
        "wwwroot",
        "node_modules"
    ],
    "publishExclude": [
        "**.user",
        "**.vspscc"
    ]
}

保存文件，这将反过来更新项目依赖项。现在按 F5 运行应用程序。

创建 typings.json 文件

到本文的这一点，我们完成了为提供静态文件的 ASP.NET 5 Web 应用程序的设置和配置。下一节将重点介绍合并 Angular 2 所需的设置和配置。在项目根文件夹中创建 typings.json 文件。

选择“客户端”>“JSON 文件”模板，然后单击“添加”按钮。

将以下内容添加到 typings.json 并保存文件。

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

创建 package.json 文件

在项目根文件夹中创建一个 package.json 文件。package.json 文件用于安装 Angular 2 和其他一些开发依赖项。右键单击项目并选择“添加”>“新建项...”，这将打开“添加新项”对话框。

选择“客户端”>“NPM 配置文件”模板，然后单击“添加”按钮。

将以下内容添加到 package.json 并保存文件，这将反过来安装指定的依赖项。该文件类似于5 分钟快速入门教程提供的 package.json 文件。

请注意：唯一的区别是需要“gulp”: “3.9.1”开发依赖项才能将文件复制到 wwwroot 文件夹。

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && 
    concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "@angular/upgrade": "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.11",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "gulp": "3.9.1", 
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}

创建 gulpfile.js 文件

在使用5 分钟快速入门教程中解释的基本 Angular 2 应用程序与 ASP.NET 5 环境中的 Angular 2 应用程序的主要区别之一是，node_modules 文件夹中的文件无法从 ASP.NET 5 应用程序访问。因此，我们必须将所需文件从 node_modules 文件夹复制到 wwwroot 文件夹。我们将使用 gulp 来完成此操作。

右键单击项目并选择“添加”>“新建项...”，这将打开“添加新项”对话框。

选择“客户端”>“Gulp 配置文件”模板，然后单击“添加”按钮。

将以下内容添加到 gulpfile.js 以创建将 Angular 2 依赖项复制到 wwwroot 文件夹的任务。

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

var paths = {
    npm: './node_modules/',
    angular: './wwwroot/lib/@angular/',
    angular2InMemoryWebApi: './wwwroot/lib/angular2-in-memory-web-api/',
    rxjs: './wwwroot/lib/rxjs/',
    lib: './wwwroot/lib/'
};

var angular = [
    paths.npm + '@angular/**/*'
];

var angular2InMemoryWebApi = [
    paths.npm + 'angular2-in-memory-web-api/**/*'
];

var rxjs = [
    paths.npm + 'rxjs/**/*'
];

var libs = [
    paths.npm + 'core-js/client/shim.min.js',
    paths.npm + 'zone.js/dist/zone.js',
    paths.npm + 'reflect-metadata/Reflect.js',
    paths.npm + 'systemjs/dist/system.src.js'
];

gulp.task('angular', function() {
    return gulp.src(angular).pipe(gulp.dest(paths.angular));
});

gulp.task('angular2InMemoryWebApi', function () {
    return gulp.src(angular2InMemoryWebApi).pipe(gulp.dest(paths.angular2InMemoryWebApi));
});

gulp.task('rxjs', function () {
    return gulp.src(rxjs).pipe(gulp.dest(paths.rxjs));
});

gulp.task('libs',function() {
    return gulp.src(libs).pipe(gulp.dest(paths.lib));
});

gulp.task('clean', function(callback) {
    rimraf(paths.lib, callback);
});

将 gulp 任务绑定到 Visual Studio 事件

要执行 gulp 任务，我们必须将它们绑定到 Visual Studio 事件。右键单击“解决方案资源管理器”中的 gulpfile.js 并选择“任务运行器资源管理器”。

单击“任务运行器资源管理器”中的刷新按钮以更新创建的 gulp 任务。

要将 gulp 任务绑定到 Visual Studio 事件，请右键单击 [任务] > 绑定 > [Visual Studio 事件]

将 gulp 任务绑定到如下所示的 Visual Studio 事件：

  • angular -> 编译后
  • angular2InMemoryWebApi -> 编译后
  • clean -> 清理
  • libs -> 编译后
  • rxjs -> 编译后

构建项目，这应该会在 wwwroot 文件夹中创建 lib 文件夹。

请注意：首次复制可能需要一段时间才能完成。

构建后，wwwroot 文件夹将如下所示。

创建 Angular 2 TypeScript 文件

本文的目的是解释在 ASP.NET 5 环境中设置 Angular 2 所涉及的过程，因此我不会解释我们将在本节中创建的 TypeScript 文件的内容。

另请注意，您不必使用 TypeScript，这只是我的个人偏好。您还可以使用以下方法编写 Angular 2 应用程序：

  • JavaScript
  • Dart

右键单击项目并选择“添加”>“新建文件夹”。

将文件夹重命名为 scripts

右键单击 scripts 并选择“添加”>“新建项...”，这将打开“添加新项”对话框。

通过选择“客户端”>“TypeScript 文件”模板并单击“添加”按钮来添加 app.component.ts 文件。

将以下代码添加到 app.component.ts 文件：

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: Congratulations on your fisrt Angular 2 application in an ASP.NET 5 environment!'
})
export class AppComponent { }

右键单击 scripts 文件夹并选择“添加”>“新建项...”，这将打开“添加新项”对话框。

通过选择“客户端”>“TypeScript 文件”模板并单击“添加”按钮来添加 main.ts 文件。

将以下代码添加到 main.ts 文件：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

创建 tsconfig.json 文件

我们必须配置 TypeScript 编译器选项，这通过创建 tsconfig.json 文件来完成。

右键单击项目并选择“添加”>“新建项...”，这将打开“添加新项”对话框。

通过选择“客户端”>“TypeScript JSON 配置文件”模板并单击“添加”按钮来添加 tsconfig.json 文件。

将以下内容添加到 tsconfig.json 文件：

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

构建项目，这应该会创建包含 main.js 和 app.component.js 的 wwwroot/app 文件夹。

创建 systemjs.config.js 文件

此文件改编自5 分钟快速入门教程中提供的文件。

右键单击 wwwroot 文件夹并选择“添加”>“新建项...”，这将打开“添加新项”对话框。

通过选择“客户端”>“JavaScript 文件”模板并单击“添加”按钮来添加 systemjs.config.js 文件。

将以下内容添加到 systemjs.config.js 文件：

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'lib/@angular',
        'angular2-in-memory-web-api': 'lib/angular2-in-memory-web-api',
        'rxjs': 'lib/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
    };
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    }
    System.config(config);
})(this);

更新 Index.html 文件

更新 Index.html 文件，如下图所示，以设置 Angular 2 应用程序。

构建并运行应用程序以查看正在运行的 Angular 2 应用程序。

恭喜！您刚刚在 ASP.NET 5 环境中创建了您的第一个 Angular 2 应用程序。

© . All rights reserved.