将 Angular 2 与 ASP.NET Core 结合使用

2018-12-15 08:00:00 · 飞浪

本 Angular 2 教程面向希望提高 ASP.NET Core 中 Angular 技能的初学者。了解 Angular 2 webpack 等！

介绍

使用 Microsoft Visual Studio 2015 将 Angular 2 与 ASP.NET Core 和 TypeScript 结合使用

本教程面向使用 Visual Studio 2015 在 ASP.NET Core 中启动 Angular 2 的初学者。我整理了开始学习 Angular 2 所涉及的步骤。这基本上是一个循序渐进的解释，在文章结束时您会感到更加自信。

步骤 1：创建一个空的 ASP.NET Core 项目

我使用了 Visual Studio 2015 Community Edition Update 3、TypeScript 2.0、最新 NPM 和 Gulp。对于 Visual Studio 和 TypeScript，我建议您使用本指南中使用的相同版本。

步骤 2：配置 ASP.NET Core 以提供静态文件

ASP.NET Core 被设计为可插入式框架，仅包含和使用必要的包，而不是最初包含太多模块。

让我们在wwwroot文件夹下创建一个名为index.html的 HTML 文件。

右键单击wwwroot文件夹，添加新项并创建index.html文件。此 HTML 页面将作为默认页面。

      <html>
<head>
    <meta charset="utf-8" />
    <title>Angular 2 with ASP.NET Core</title>
</head>
<body>
    <h1>Demo of Angular 2 using ASP.NET Core with Visual Studio 2015</h1>
</body>
</html>
    

为了使 ASP.NET Core 提供静态文件服务，我们需要在Startup.cs页面的Configure方法中添加 StaticFiles 中间件。确保正确恢复包。

project.json经过重新设计，变得更好，我们有 StaticFiles 中间件来提供静态资产，如 HTML、JS 文件等。

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

      {
  "dependencies": {
    "Microsoft.NETCore.App": {
      "version": "1.0.1",
      "type": "platform"
    },
    "Microsoft.AspNetCore.Diagnostics": "1.0.0",
    "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
    "Microsoft.AspNetCore.Server.Kestrel": "1.0.1",
    "Microsoft.Extensions.Logging.Console": "1.0.0",
    "Microsoft.AspNetCore.StaticFiles": "1.0.0"
  },

  "tools": {
    "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
  },

  "frameworks": {
    "netcoreapp1.0": {
      "imports": ["dotnet5.6", "portable-net45+win8"]
    }
  },

  "buildOptions": {
    "emitEntryPoint": true,
    "preserveCompilationContext": true,
    "compile": {
      "exclude": ["node_modules"]
    }
  },

  "runtimeOptions": {
    "configProperties": {
      "System.GC.Server": true
    }
  },

  "publishOptions": {
    "include": ["wwwroot", "web.config"]
  },

  "scripts": {
    "postpublish": [
      "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%"
    ]
  }
}
    

有趣的是，Program.cs 就像 main() 一样，是应用程序执行的入口点。

现在运行应用程序。请注意，ASP.NET Core 呈现静态 HTML 页面。

删除此index.html页面，稍后我们将动态注入该页面。到目前为止，您已经看到了“wwwroot”作为 ASP.NET Core Web 应用程序根文件夹的演示。

步骤 3：ASP.NET Core 中的 Angular 2

Angular 2 被称为是移动和桌面应用程序的唯一框架。

本教程参考了5 分钟快速入门指南。5 分钟指南更侧重于其他轻量级代码编辑器。但是，我们使用 Visual Studio 2015 Community Edition Update 3，因为它内置了 TypeScript 工具和其他功能。

我们将使用 Webpack 作为模块打包器。它是 systemJS 方法的绝佳替代方案。要了解有关 Webpack 的更多信息，请阅读Webpack 和 Angular 2

Webpack 脚本大部分基于 AngularClass 的angular2-webpack-starter。我根据 ASP.NET Core Web 应用对其进行了修改。

ASP.NET Core 遵循单页应用程序 (SPA) 架构，而不是模型-视图-控制器 (MVC) 框架。

为什么在 ASP.NET Core 中使用 Webpack 来打包 Angular 2？我可能也用过许多其他打包工具。

然而，Webpack 确实有很多优点：

基于插件的静态文件编码更加简单。
Webpack 2 搭配 dev-server 在内存中运行应用程序，实时重新加载和编译非常简单。它提供 tree shake 来消除未使用的代码。
与 Angular Material 2、AngularFire、bootstrap 等第三方软件包的集成非常简单。
AngularClass webpack 入门套件提供了 HMR（热模块替换）——在代码修改时保持执行状态。
Angular CLI 和微软的 AngularService 都采用了 Webpack，用于将打包文件变得更小。

步骤 4：为 Angular 2 包添加 NPM 配置文件

Angular 2 团队使用 NPM 而不是 CDN 或任何其他来源来推动代码更改。因此，我们需要向此 ASP.NET Core 应用程序添加一个 NPM 配置文件 ( package.json )。

右键单击“ngCoreContacts”，添加新文件“NPM 配置文件”；默认情况下，package.json会添加到 ASP.NET Core 项目。它充当 Node 包管理器 (NPM) 文件，是使用 Angular 2 时添加包的必备文件。

从上面提供的 Angular 2 快速入门中，我们需要添加所需的依赖项。将以下配置复制粘贴到你的package.json文件中

      {
    "version": "1.0.0",
    "description": "ngcorecontacts",
    "main": "wwwroot/index.html",
  "scripts": {
    "build:dev": "webpack --config config/webpack.dev.js --progress --profile",
    "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --bail",
    "build": "npm run build:dev",
    "server:dev:hmr": "npm run server:dev -- --inline --hot",
    "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base clientsrc/",
    "server:prod": "http-server dist --cors",
    "server": "npm run server:dev",
    "start:hmr": "npm run server:dev:hmr",
    "start": "npm run server:dev",
    "version": "npm run build",
    "watch:dev:hmr": "npm run watch:dev -- --hot",
    "watch:dev": "npm run build:dev -- --watch",
    "watch:prod": "npm run build:prod -- --watch",
    "watch:test": "npm run test -- --auto-watch --no-single-run",
    "watch": "npm run watch:dev",
    "webpack-dev-server": "webpack-dev-server",
    "webpack": "webpack"
  },
  "dependencies": {
    "@angular/common": "~2.0.1",
    "@angular/compiler": "~2.0.1",
    "@angular/core": "~2.0.1",
    "@angular/forms": "~2.0.1",
    "@angular/http": "~2.0.1",
    "@angular/platform-browser": "~2.0.1",
    "@angular/platform-browser-dynamic": "~2.0.1",
    "@angular/router": "~3.0.1",
    "@angular/upgrade": "~2.0.1",
    "angular-in-memory-web-api": "~0.1.1",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.0",
    "@angularclass/hmr-loader": "~3.0.2",
    "@angularclass/request-idle-callback": "^1.0.7",
    "@angularclass/webpack-toolkit": "^1.3.3",
    "assets-webpack-plugin": "^3.4.0",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "~0.6.17",
    "@angular/material": "^2.0.0-alpha.9",
    "hammerjs": "^2.0.8"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.34",
    "@types/node": "^6.0.38",
    "@types/source-map": "^0.1.27",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^1.12.34",
    "angular2-template-loader": "^0.5.0",
    "awesome-typescript-loader": "^2.2.1",
    "codelyzer": "~0.0.28",
    "copy-webpack-plugin": "^3.0.1",
    "clean-webpack-plugin": "^0.1.10",
    "css-loader": "^0.25.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.9.0",
    "gh-pages": "^0.11.0",
    "html-webpack-plugin": "^2.21.0",
    "imports-loader": "^0.6.5",
    "json-loader": "^0.5.4",
    "parse5": "^1.3.2",
    "phantomjs": "^2.1.7",
    "raw-loader": "0.5.1",
    "rimraf": "^2.5.2",
    "source-map-loader": "^0.1.5",
    "string-replace-loader": "1.0.5",
    "style-loader": "^0.13.1",
    "sass-loader": "^3.1.2",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.1",
    "ts-node": "^1.3.0",
    "tslint": "3.15.1",
    "tslint-loader": "^2.1.3",
    "typedoc": "^0.4.5",
    "typescript": "2.0.3",
    "url-loader": "^0.5.7",
    "webpack": "2.1.0-beta.22",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^2.1.0-beta.2",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^0.14.1"
  }
}
{
    "version": "1.0.0",
    "description": "ngcorecontacts",
    "main": "wwwroot/index.html",
  "scripts": {
    "build:dev": "webpack --config config/webpack.dev.js --progress --profile",
    "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --bail",
    "build": "npm run build:dev",
    "server:dev:hmr": "npm run server:dev -- --inline --hot",
    "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base clientsrc/",
    "server:prod": "http-server dist --cors",
    "server": "npm run server:dev",
    "start:hmr": "npm run server:dev:hmr",
    "start": "npm run server:dev",
    "version": "npm run build",
    "watch:dev:hmr": "npm run watch:dev -- --hot",
    "watch:dev": "npm run build:dev -- --watch",
    "watch:prod": "npm run build:prod -- --watch",
    "watch:test": "npm run test -- --auto-watch --no-single-run",
    "watch": "npm run watch:dev",
    "webpack-dev-server": "webpack-dev-server",
    "webpack": "webpack"
  },
  "dependencies": {
    "@angular/common": "~2.0.1",
    "@angular/compiler": "~2.0.1",
    "@angular/core": "~2.0.1",
    "@angular/forms": "~2.0.1",
    "@angular/http": "~2.0.1",
    "@angular/platform-browser": "~2.0.1",
    "@angular/platform-browser-dynamic": "~2.0.1",
    "@angular/router": "~3.0.1",
    "@angular/upgrade": "~2.0.1",
    "angular-in-memory-web-api": "~0.1.1",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.0",
    "@angularclass/hmr-loader": "~3.0.2",
    "@angularclass/request-idle-callback": "^1.0.7",
    "@angularclass/webpack-toolkit": "^1.3.3",
    "assets-webpack-plugin": "^3.4.0",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "~0.6.17",
    "@angular/material": "^2.0.0-alpha.9",
    "hammerjs": "^2.0.8"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.34",
    "@types/node": "^6.0.38",
    "@types/source-map": "^0.1.27",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^1.12.34",
    "angular2-template-loader": "^0.5.0",
    "awesome-typescript-loader": "^2.2.1",
    "codelyzer": "~0.0.28",
    "copy-webpack-plugin": "^3.0.1",
    "clean-webpack-plugin": "^0.1.10",
    "css-loader": "^0.25.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.9.0",
    "gh-pages": "^0.11.0",
    "html-webpack-plugin": "^2.21.0",
    "imports-loader": "^0.6.5",
    "json-loader": "^0.5.4",
    "parse5": "^1.3.2",
    "phantomjs": "^2.1.7",
    "raw-loader": "0.5.1",
    "rimraf": "^2.5.2",
    "source-map-loader": "^0.1.5",
    "string-replace-loader": "1.0.5",
    "style-loader": "^0.13.1",
    "sass-loader": "^3.1.2",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.1",
    "ts-node": "^1.3.0",
    "tslint": "3.15.1",
    "tslint-loader": "^2.1.3",
    "typedoc": "^0.4.5",
    "typescript": "2.0.3",
    "url-loader": "^0.5.7",
    "webpack": "2.1.0-beta.22",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^2.1.0-beta.2",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^0.14.1"
  }
}
    

保存后，ASP.NET Core 立即开始恢复包。它将下载package.json文件的依赖项部分中提到的所有包。

Visual Studio 解决方案资源管理器可能会显示“依赖项 - 未安装”。不用担心；所有 npm 包都已安装。这只是工具中的一个错误。

步骤5：添加TypeScript配置文件。

您必须在使用 TypeScript 的 ASP.NET Core 应用程序中为 Angular 2 执行此操作。TypeScript 配置文件负责将我们的应用程序转换为 JavaScript、加载模块并满足 ES5 标准。

如果想要了解 TypeScript 配置的初学者指南，请参阅TypeScript 入门。

在项目中添加tsconfig.json ，并添加下面的配置。

“baseUrl” 确保 TypeScript 文件从 './clientsrc' 转换为 JavaScript。此文件夹是 TypeScript 的虚拟目录

      {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,<fon

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

将 Angular 2 与 ASP.NET Core 结合使用

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

<html> <head> <meta charset="utf-8" /> <title>Angular 2 with ASP.NET Core</title> </head> <body> <h1>Demo of Angular 2 using ASP.NET Core with Visual Studio 2015</h1> </body> </html>

{ "dependencies": { "Microsoft.NETCore.App": { "version": "1.0.1", "type": "platform" }, "Microsoft.AspNetCore.Diagnostics": "1.0.0", "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0", "Microsoft.AspNetCore.Server.Kestrel": "1.0.1", "Microsoft.Extensions.Logging.Console": "1.0.0", "Microsoft.AspNetCore.StaticFiles": "1.0.0" }, "tools": { "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final" }, "frameworks": { "netcoreapp1.0": { "imports": ["dotnet5.6", "portable-net45+win8"] } }, "buildOptions": { "emitEntryPoint": true, "preserveCompilationContext": true, "compile": { "exclude": ["node_modules"] } }, "runtimeOptions": { "configProperties": { "System.GC.Server": true } }, "publishOptions": { "include": ["wwwroot", "web.config"] }, "scripts": { "postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ] } }

{ "version": "1.0.0", "description": "ngcorecontacts", "main": "wwwroot/index.html", "scripts": { "build:dev": "webpack --config config/webpack.dev.js --progress --profile", "build:prod": "webpack --config config/webpack.prod.js --progress --profile --bail", "build": "npm run build:dev", "server:dev:hmr": "npm run server:dev -- --inline --hot", "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base clientsrc/", "server:prod": "http-server dist --cors", "server": "npm run server:dev", "start:hmr": "npm run server:dev:hmr", "start": "npm run server:dev", "version": "npm run build", "watch:dev:hmr": "npm run watch:dev -- --hot", "watch:dev": "npm run build:dev -- --watch", "watch:prod": "npm run build:prod -- --watch", "watch:test": "npm run test -- --auto-watch --no-single-run", "watch": "npm run watch:dev", "webpack-dev-server": "webpack-dev-server", "webpack": "webpack" }, "dependencies": { "@angular/common": "~2.0.1", "@angular/compiler": "~2.0.1", "@angular/core": "~2.0.1", "@angular/forms": "~2.0.1", "@angular/http": "~2.0.1", "@angular/platform-browser": "~2.0.1", "@angular/platform-browser-dynamic": "~2.0.1", "@angular/router": "~3.0.1", "@angular/upgrade": "~2.0.1", "angular-in-memory-web-api": "~0.1.1", "@angularclass/conventions-loader": "^1.0.2", "@angularclass/hmr": "~1.2.0", "@angularclass/hmr-loader": "~3.0.2", "@angularclass/request-idle-callback": "^1.0.7", "@angularclass/webpack-toolkit": "^1.3.3", "assets-webpack-plugin": "^3.4.0", "core-js": "^2.4.1", "http-server": "^0.9.0", "ie-shim": "^0.1.0", "rxjs": "5.0.0-beta.12", "zone.js": "~0.6.17", "@angular/material": "^2.0.0-alpha.9", "hammerjs": "^2.0.8" }, "devDependencies": { "@types/hammerjs": "^2.0.33", "@types/jasmine": "^2.2.34", "@types/node": "^6.0.38", "@types/source-map": "^0.1.27", "@types/uglify-js": "^2.0.27", "@types/webpack": "^1.12.34", "angular2-template-loader": "^0.5.0", "awesome-typescript-loader": "^2.2.1", "codelyzer": "~0.0.28", "copy-webpack-plugin": "^3.0.1", "clean-webpack-plugin": "^0.1.10", "css-loader": "^0.25.0", "exports-loader": "^0.6.3", "expose-loader": "^0.7.1", "file-loader": "^0.9.0", "gh-pages": "^0.11.0", "html-webpack-plugin": "^2.21.0", "imports-loader": "^0.6.5", "json-loader": "^0.5.4", "parse5": "^1.3.2", "phantomjs": "^2.1.7", "raw-loader": "0.5.1", "rimraf": "^2.5.2", "source-map-loader": "^0.1.5", "string-replace-loader": "1.0.5", "style-loader": "^0.13.1", "sass-loader": "^3.1.2", "to-string-loader": "^1.1.4", "ts-helpers": "1.1.1", "ts-node": "^1.3.0", "tslint": "3.15.1", "tslint-loader": "^2.1.3", "typedoc": "^0.4.5", "typescript": "2.0.3", "url-loader": "^0.5.7", "webpack": "2.1.0-beta.22", "webpack-dev-middleware": "^1.6.1", "webpack-dev-server": "^2.1.0-beta.2", "webpack-md5-hash": "^0.0.5", "webpack-merge": "^0.14.1" } } { "version": "1.0.0", "description": "ngcorecontacts", "main": "wwwroot/index.html", "scripts": { "build:dev": "webpack --config config/webpack.dev.js --progress --profile", "build:prod": "webpack --config config/webpack.prod.js --progress --profile --bail", "build": "npm run build:dev", "server:dev:hmr": "npm run server:dev -- --inline --hot", "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base clientsrc/", "server:prod": "http-server dist --cors", "server": "npm run server:dev", "start:hmr": "npm run server:dev:hmr", "start": "npm run server:dev", "version": "npm run build", "watch:dev:hmr": "npm run watch:dev -- --hot", "watch:dev": "npm run build:dev -- --watch", "watch:prod": "npm run build:prod -- --watch", "watch:test": "npm run test -- --auto-watch --no-single-run", "watch": "npm run watch:dev", "webpack-dev-server": "webpack-dev-server", "webpack": "webpack" }, "dependencies": { "@angular/common": "~2.0.1", "@angular/compiler": "~2.0.1", "@angular/core": "~2.0.1", "@angular/forms": "~2.0.1", "@angular/http": "~2.0.1", "@angular/platform-browser": "~2.0.1", "@angular/platform-browser-dynamic": "~2.0.1", "@angular/router": "~3.0.1", "@angular/upgrade": "~2.0.1", "angular-in-memory-web-api": "~0.1.1", "@angularclass/conventions-loader": "^1.0.2", "@angularclass/hmr": "~1.2.0", "@angularclass/hmr-loader": "~3.0.2", "@angularclass/request-idle-callback": "^1.0.7", "@angularclass/webpack-toolkit": "^1.3.3", "assets-webpack-plugin": "^3.4.0", "core-js": "^2.4.1", "http-server": "^0.9.0", "ie-shim": "^0.1.0", "rxjs": "5.0.0-beta.12", "zone.js": "~0.6.17", "@angular/material": "^2.0.0-alpha.9", "hammerjs": "^2.0.8" }, "devDependencies": { "@types/hammerjs": "^2.0.33", "@types/jasmine": "^2.2.34", "@types/node": "^6.0.38", "@types/source-map": "^0.1.27", "@types/uglify-js": "^2.0.27", "@types/webpack": "^1.12.34", "angular2-template-loader": "^0.5.0", "awesome-typescript-loader": "^2.2.1", "codelyzer": "~0.0.28", "copy-webpack-plugin": "^3.0.1", "clean-webpack-plugin": "^0.1.10", "css-loader": "^0.25.0", "exports-loader": "^0.6.3", "expose-loader": "^0.7.1", "file-loader": "^0.9.0", "gh-pages": "^0.11.0", "html-webpack-plugin": "^2.21.0", "imports-loader": "^0.6.5", "json-loader": "^0.5.4", "parse5": "^1.3.2", "phantomjs": "^2.1.7", "raw-loader": "0.5.1", "rimraf": "^2.5.2", "source-map-loader": "^0.1.5", "string-replace-loader": "1.0.5", "style-loader": "^0.13.1", "sass-loader": "^3.1.2", "to-string-loader": "^1.1.4", "ts-helpers": "1.1.1", "ts-node": "^1.3.0", "tslint": "3.15.1", "tslint-loader": "^2.1.3", "typedoc": "^0.4.5", "typescript": "2.0.3", "url-loader": "^0.5.7", "webpack": "2.1.0-beta.22", "webpack-dev-middleware": "^1.6.1", "webpack-dev-server": "^2.1.0-beta.2", "webpack-md5-hash": "^0.0.5", "webpack-merge": "^0.14.1" } }