一、基础环境配置

1.安装VS 2017 v15.3或以上版本
2.安装VS Code最新版本
3.安装Node.js v6.9以上版本
4.重置全局npm源，修正为 淘宝的 NPM 镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

5.安装TypeScript

cnpm install -g typescript typings

6.安装 AngularJS CLI

cnpm install -g @angular/cli

7.安装 Yarn

cnpm i -g yarn
yarn config set registry http://registry.npm.taobao.org
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

8.启用Yarn for Angular CLI

ng set --global packageManager=yarn

至此，开发环境的基础配置工作基本完成。

二、 配置.Net Core项目

 搭建.Net Core项目时，采用Api模板构建一个空的解决方案，并在此基础上启用静态文件支持，详细配置如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

namespace App.Integration
{
 public class Startup
 {
  public Startup(IHostingEnvironment env)
  {
   var builder = new ConfigurationBuilder()
    .SetBasePath(env.ContentRootPath)
    .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
    .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
    .AddEnvironmentVariables();
   Configuration = builder.Build();
  }

  public IConfigurationRoot Configuration { get; }

  // This method gets called by the runtime. Use this method to add services to the container.
  public void ConfigureServices(IServiceCollection services)
  {
   // Add framework services.
   //services.AddMvc();
  }

  // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
  public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
  {
   loggerFactory.AddConsole(Configuration.GetSection("Logging"));
   loggerFactory.AddDebug();

   //app.UseMvc();
   app.UseDefaultFiles();
   app.UseStaticFiles();
  }
 }
}

静态文件需要安装名为Microsoft.AspNetCore.StaticFiles的nuget包，请自行从包管理中安装。

 三、配置Angular Cli调试环境

在开始项目调试之前，我们需将angular资源中的index.html移入wwwroot中，需注意，此index.html文件需是由ng build命令生成的版本，一般存储在/dist目录中

在编译angular资源前，我们需要在angular cli设置中，将DeployUrl选项设置为ng server的默认调试地址：

"deployUrl": "//127.0.0.1:4200", // 指定站点的部署地址，该值最终会赋给webpack的output.publicPath，注意，ng serve启动调试时并不会调研此参数

以下为Angular Cli的各个配置项说明。　　

{
 "project": {
 "name": "angular-questionare",
 "ejected": false // 标记该应用是否已经执行过eject命令把webpack配置释放出来
 },
 "apps": [
 {
  "root": "src", // 源码根目录
  "outDir": "dist", // 编译后的输出目录，默认是dist/
  "assets": [ // 记录资源文件夹，构建时复制到`outDir`指定的目录
  "assets",
  "favicon.ico"
  ],
  "index": "index.html", // 指定首页文件，默认值是"index.html"
  "main": "main.ts", // 指定应用的入门文件
  "polyfills": "polyfills.ts", // 指定polyfill文件
  "test": "test.ts", // 指定测试入门文件
  "tsconfig": "tsconfig.app.json", // 指定tsconfig文件
  "testTsconfig": "tsconfig.spec.json", // 指定TypeScript单测脚本的tsconfig文件
  "prefix": "app", // 使用`ng generate`命令时，自动为selector元数据的值添加的前缀名
  "deployUrl": "//cdn.com.cn", // 指定站点的部署地址，该值最终会赋给webpack的output.publicPath，常用于CDN部署
  "styles": [ // 引入全局样式，构建时会打包进来，常用语第三方库引入的样式
  "styles.css"
  ],
  "scripts": [ // 引入全局脚本，构建时会打包进来，常用语第三方库引入的脚本
  ],
  "environmentSource": "environments/environment.ts", // 基础环境配置
  "environments": { // 子环境配置文件
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
  }
 }
 ],
 "e2e": {
 "protractor": {
  "config": "./protractor.conf.js"
 }
 },
 "lint": [
 {
  "project": "src/tsconfig.app.json"
 },
 {
  "project": "src/tsconfig.spec.json"
 },
 {
  "project": "e2e/tsconfig.e2e.json"
 }
 ],
 "test": {
 "karma": {
  "config": "./karma.conf.js"
 }
 },
 "defaults": { // 执行`ng generate`命令时的一些默认值
 "styleExt": "css", // 默认生成的样式文件后缀名
 "component": {
  "flat": false, // 生成组件时是否新建文件夹包装组件文件，默认为false（即新建文件夹）
  "spec": true, // 是否生成spec文件，默认为true
  "inlineStyle": false, // 新建时是否使用内联样式，默认为false
  "inlineTemplate": false, // 新建时是否使用内联模板，默认为false
  "viewEncapsulation": "Emulated", // 指定生成的组件的元数据viewEncapsulation的默认值
  "changeDetection": "OnPush", // 指定生成的组件的元数据changeDetection的默认值
 }
 }
}

为实现以.Net Core Api项目为主体的站点结构，我们需在使用ng server时启用Deploy选项，打开对静态资源“部署地址”的支持。注意：双站部署可能会产生JS跨域，请自行解决

在命令行启动Angular Cli调试服务器时加上deploy参数 ng serve --deploy-url '//localhost:4200/' 

最后，通过VS的F5命令，打开Api项目的运行时，我们可以看到网站的运行效果。Enjoy Coding~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# .Net  # Core  # Angular  # Cli  # Angular4  # .Net Core3.0 WebApi 项目框架搭建之使用Serilog替换掉Log4j  # .Net Core服务治理Consul搭建集群  # 基于Jenkins搭建.NET Core持续集成环境过程图解  # Centos7系统下搭建.NET Core2.0+Nginx+Supervisor环境  # CodeFirst从零开始搭建Asp.Net Core2.0网站  # VS2015 搭建Asp.net core开发环境的方法  # 详解.Net Core + Angular2 环境搭建  # 云服务器下搭建ASP.NET Core环境  # Linux(Ubuntu)下搭建ASP.NET Core环境  # win10下ASP.NET Core部署环境搭建步骤  # Windows Server 2012 R2 Standard搭建ASP.NET Core环境图文教  # Ubuntu16.04系统搭建.Net Core开发环境  # 默认值  # 默认为  # 第三方  # 请自行  # 是由  # 可以看到  # 镜像  # 或以上  # 淘宝  # 设置为  # 最新版本  # 首页  # 为主体  # 命令行  # 在此基础上  # 配置文件  # 大家多多  # 需注意  # 构建一个  # 目录中 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  php485函数参数是什么意思_php485各参数详细说明【介绍】  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  如何快速搭建FTP站点实现文件共享？  Laravel如何实现文件上传和存储？（本地与S3配置）  如何快速搭建高效WAP手机网站吸引移动用户？  Windows10电脑怎么查看硬盘通电时间_Win10使用工具检测磁盘健康  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  ,怎么在广州志愿者网站注册？  如何在服务器上配置二级域名建站？  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  Laravel如何优化应用性能？（缓存和优化命令）  Thinkphp 中 distinct 的用法解析  如何快速搭建高效服务器建站系统？  如何用好域名打造高点击率的自主建站？  如何快速打造个性化非模板自助建站？  非常酷的网站设计制作软件,酷培ai教育官方网站？  LinuxCD持续部署教程_自动发布与回滚机制  如何在IIS中配置站点IP、端口及主机头？  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  Laravel如何配置任务调度？（Cron Job示例）  Swift中循环语句中的转移语句 break 和 continue  网站页面设计需要考虑到这些问题  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】  Laravel如何为API编写文档_Laravel API文档生成与维护方法  魔毅自助建站系统：模板定制与SEO优化一键生成指南  如何使用 jQuery 正确渲染 Instagram 风格的标签列表  Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询  如何用搬瓦工VPS快速搭建个人网站？  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  如何在Windows服务器上快速搭建网站？  如何在阿里云购买域名并搭建网站？  如何在腾讯云免费申请建站？  网站建设保证美观性，需要考虑的几点问题！  jQuery中的100个技巧汇总  如何在建站之星绑定自定义域名？  Linux系统命令中tree命令详解  php json中文编码为null的解决办法  详解Android——蓝牙技术 带你实现终端间数据传输  Laravel如何创建自定义Artisan命令？（代码示例）  Laravel API资源类怎么用_Laravel API Resource数据转换  如何用AI帮你把自己的生活经历写成一个有趣的故事？  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  Laravel如何配置和使用缓存？（Redis代码示例）  如何在阿里云部署织梦网站？  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？