一、基礎(chǔ)環(huán)境配置
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
至此,開發(fā)環(huán)境的基礎(chǔ)配置工作基本完成。
二、 配置.Net Core項(xiàng)目
搭建.Net Core項(xiàng)目時(shí),采用Api模板構(gòu)建一個(gè)空的解決方案,并在此基礎(chǔ)上啟用靜態(tài)文件支持,詳細(xì)配置如下:
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(); } } }
靜態(tài)文件需要安裝名為Microsoft.AspNetCore.StaticFiles的nuget包,請(qǐng)自行從包管理中安裝。
三、配置Angular Cli調(diào)試環(huán)境
在開始項(xiàng)目調(diào)試之前,我們需將angular資源中的index.html移入wwwroot中,需注意,此index.html文件需是由ng build命令生成的版本,一般存儲(chǔ)在/dist目錄中
在編譯angular資源前,我們需要在angular cli設(shè)置中,將DeployUrl選項(xiàng)設(shè)置為ng server的默認(rèn)調(diào)試地址:
"deployUrl": "http://127.0.0.1:4200", // 指定站點(diǎn)的部署地址,該值最終會(huì)賦給webpack的output.publicPath,注意,ng serve啟動(dòng)調(diào)試時(shí)并不會(huì)調(diào)研此參數(shù)
以下為Angular Cli的各個(gè)配置項(xiàng)說明。
{ "project": { "name": "angular-questionare", "ejected": false // 標(biāo)記該應(yīng)用是否已經(jīng)執(zhí)行過eject命令把webpack配置釋放出來 }, "apps": [ { "root": "src", // 源碼根目錄 "outDir": "dist", // 編譯后的
為實(shí)現(xiàn)以.Net Core Api項(xiàng)目為主體的站點(diǎn)結(jié)構(gòu),我們需在使用ng server時(shí)啟用Deploy選項(xiàng),打開對(duì)靜態(tài)資源“部署地址”的支持。注意:雙站部署可能會(huì)產(chǎn)生JS跨域,請(qǐng)自行解決
在命令行啟動(dòng)Angular Cli調(diào)試服務(wù)器時(shí)加上deploy參數(shù) ng serve --deploy-url '//localhost:4200/'
最后,通過VS的F5命令,打開Api項(xiàng)目的運(yùn)行時(shí),我們可以看到網(wǎng)站的運(yùn)行效果。Enjoy Coding~
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com