一、基础环境配置

1.安装VS 2017 v15.3或以上版本2.安装对代码最新版本3.安装Node.js v6.9以上版本4.重置全局国家预防机制源，修正为淘宝的NPM镜像：

NPM安装-g cnpm-注册表=https://注册表。NPM。淘宝。组织5 .安装以打字打的文件

cnpm install -g typescript类型6。安装AngularJS命令行界面

cnpm安装-g @angular/cli7 .安装故事

cnpm I-g yarn Yan配置集注册表http://注册表。NPM。淘宝。（同organic）有机纱配置集萨斯二进制-站点http://npm.taobao.org/mirrors/node-sass8.启用角线用纱线

ng集-全局包装管理器=纱线至此，开发环境的基础配置工作基本完成。

二、配置。网核心项目

搭建。净核心项目时，采用美国石油学会(美国石油协会)模板构建一个空的解决方案，并在此基础上启用静态文件支持，详细配置如下：

使用系统；使用系统。集合。通用；使用系统Linq .使用系统。线程化。任务；使用微软AspNetCore。建设者使用微软。托管；使用微软。扩展。配置；使用微软。扩展。依赖注射；使用微软。扩展。日志记录；命名空间应用程序.集成{公共类启动{公共启动(IHostingEnvironment env){ var builder=新配置生成器().SetBasePath(env .ContentRootPath ).AddJsonFile('appsettings.json '，optional: false，reloadOnChange: true).AddJsonFile($'appsettings .{env .环境名称}。json '，optional: true ).AddEnvironmentVariables()；配置=构建器build()；} public IConfigurationroot Configuration { get；} //此方法由运行时调用。使用此方法向容器添加服务public void ConfigureServices(IServiceCollection services){//添加框架服务。//服务addMVc()；} //此方法由运行时调用。使用此方法配置超文本传送协议请求管道公共空间配置(IApplicationBuilder)应用程序，IHostingEnvironment env，ILoggerFactory记录器工厂){记录器工厂.添加控制台（配置GetSection('日志')；伐木工厂AddDebug()；//app .UseMvc()；应用程序.UseDefaultFiles()；应用程序.UseStaticFiles()；} }}静态文件需要安装名为微软。静态文件的nuget包，请自行从包管理中安装。

三、配置Angular Cli调试环境

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

在编译有角的资源前，我们需要在angular cli设置中，将部署选项设置为尼日利亚服务器的默认调试地址：

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

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

{ ' project ' : { ' name ' : ' angular-questionaire '，' excluded ' : false//标记应用程序是否执行了exclude命令以释放webpack配置}，' apps': [{'root': 'src '，//源根目录' outDir': 'dist '，//编译后的输出目录默认为dist/' assets ' 3360[//record resource文件夹，复制到目录' assets '，' favIndex': 'index.html '，//指定第一页文件，默认值为' index.html'' main' :' main.ts '，//指定应用程序入口文件' polyfills': 'polyfills.ts '，//指定polyfill文件' test': 'test.ts '，//指定测试入口文件' tsconfig ' : ' tsconfig . app . JSON '，//指定tsconfig文件' testsconfig' :' tsconfig 常用于CDN部署' styles': [//引入全局样式，将在构建过程中打包，以及styles ' styles。 CSS']和' scripts ' :[//引入全局脚本，构建时会打包。第三方库引入的常用脚本]，'环境源' : ' environments/environment . ts '，//基本环境配置' environments': {//子环境配置文件' dev ' : ' environments/environment . ts '，' prod ' : ' environments/environment . prod . ts ' } }]，' e2e ' 3: { '量角器' : { ' config ' : '。/量角器. conf.js' } }，' lint ' :[{ ' project ' : ' src/tsconfig . app . JSON ' }，{ ' project ' : ' src/tsconfig . spec . JSON ' }，{ ' project ' : ' e2e/tsconfig . e2e . JSON ' }]，Test ' : { ' karma ' : { ' config ' 3: '。/karma.conf.js'}}，' defaults ' : {//某些默认值' styleExt': 'css '在执行' nggenerate '命令时，//生成的样式文件的后缀名称默认为' component ' : { ' flat ' : false。//生成组件时是否新建文件夹包装组件文件，默认值为false(即新建文件夹)，“spec”: true。//是否生成规范文件，默认值为真' inlinestyle' : false。//默认值为false“inlinetemplate”:为false。//默认值为false“视图封装”:“模拟”。//指定元数据视图的默认值生成组件的封装，' ' changeDetection' :' onpush '，//指定元数据的默认值changeDetection生成的组件}}}以便用实现站点结构。Net Core Api项目为主体，我们在使用ng server时需要启用Deploy选项，并开启静态资源“部署地址”的支持。注意：两站部署可能会出现JS跨域，请自行解决

在命令行启动Angular Cli调试服务器时，添加部署参数ngserve-deploy-URL '//localhost :4200/'

最后我们可以看到vs. Enjoy Coding的F5命令打开Api项目时网站的运行效果~

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