<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當(dāng)前位置: 首頁 - 科技 - 知識(shí)百科 - 正文

        .Net Core+Angular Cli/Angular4開發(fā)環(huán)境搭建教程

        來源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 22:35:39
        文檔

        .Net Core+Angular Cli/Angular4開發(fā)環(huán)境搭建教程

        .Net Core+Angular Cli/Angular4開發(fā)環(huán)境搭建教程:一、基礎(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.or
        推薦度:
        導(dǎo)讀.Net Core+Angular Cli/Angular4開發(fā)環(huán)境搭建教程:一、基礎(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.or

        一、基礎(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", // 編譯后的
        輸出目錄,默認(rèn)是dist/ "assets": [ // 記錄資源文件夾,構(gòu)建時(shí)復(fù)制到`outDir`指定的目錄 "assets", "favicon.ico" ], "index": "index.html", // 指定首頁文件,默認(rèn)值是"index.html" "main": "main.ts", // 指定應(yīng)用的入門文件 "polyfills": "polyfills.ts", // 指定polyfill文件 "test": "test.ts", // 指定測(cè)試入門文件 "tsconfig": "tsconfig.app.json", // 指定tsconfig文件 "testTsconfig": "tsconfig.spec.json", // 指定TypeScript單測(cè)腳本的tsconfig文件 "prefix": "app", // 使用`ng generate`命令時(shí),自動(dòng)為selector元數(shù)據(jù)的值添加的前綴名 "deployUrl": "http://cdn.com.cn", // 指定站點(diǎn)的部署地址,該值最終會(huì)賦給webpack的output.publicPath,常用于CDN部署 "styles": [ // 引入全局樣式,構(gòu)建時(shí)會(huì)打包進(jìn)來,常用語第三方庫引入的樣式 "styles.css" ], "scripts": [ // 引入全局腳本,構(gòu)建時(shí)會(huì)打包進(jìn)來,常用語第三方庫引入的腳本 ], "environmentSource": "environments/environment.ts", // 基礎(chǔ)環(huán)境配置 "environments": { // 子環(huán)境配置文件 "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": { // 執(zhí)行`ng generate`命令時(shí)的一些默認(rèn)值 "styleExt": "css", // 默認(rèn)生成的樣式文件后綴名 "component": { "flat": false, // 生成組件時(shí)是否新建文件夾包裝組件文件,默認(rèn)為false(即新建文件夾) "spec": true, // 是否生成spec文件,默認(rèn)為true "inlineStyle": false, // 新建時(shí)是否使用內(nèi)聯(lián)樣式,默認(rèn)為false "inlineTemplate": false, // 新建時(shí)是否使用內(nèi)聯(lián)模板,默認(rèn)為false "viewEncapsulation": "Emulated", // 指定生成的組件的元數(shù)據(jù)viewEncapsulation的默認(rèn)值 "changeDetection": "OnPush", // 指定生成的組件的元數(shù)據(jù)changeDetection的默認(rèn)值 } } }

        為實(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

        文檔

        .Net Core+Angular Cli/Angular4開發(fā)環(huán)境搭建教程

        .Net Core+Angular Cli/Angular4開發(fā)環(huán)境搭建教程:一、基礎(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.or
        推薦度:
        標(biāo)簽: 安裝 配置 搭建
        • 熱門焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲精品无码久久久久APP| 亚洲日本国产精华液| 国产精品亚洲一区二区三区在线观看 | 成年人免费的视频| 亚洲综合在线观看视频| 18禁美女黄网站色大片免费观看| 亚洲国产精品久久久久婷婷软件| 久久久精品午夜免费不卡| 亚洲国产高清人在线| 在线免费观看你懂的| 亚洲人成高清在线播放| 女人被男人躁的女爽免费视频| 亚洲AV色吊丝无码| 成人毛片免费播放| 色天使亚洲综合一区二区| 免费一区二区三区四区五区| 菠萝菠萝蜜在线免费视频| 亚洲一区二区三区香蕉| 久久国产乱子伦精品免费不卡| 亚洲经典在线中文字幕| 妞干网免费视频在线观看| 国产精品亚洲综合| 亚洲尤码不卡AV麻豆| 久久午夜夜伦鲁鲁片免费无码影视| 亚洲娇小性xxxx色| 国产伦精品一区二区三区免费迷| 一级做α爱过程免费视频| 亚洲国产精品无码久久久不卡 | 成人在线免费视频| 国产AV无码专区亚洲精品| 国产v精品成人免费视频400条| 亚洲AV无码国产剧情| 亚洲综合色婷婷七月丁香| 222www在线观看免费| 疯狂做受xxxx高潮视频免费| 亚洲精品无码成人AAA片| 成人免费视频试看120秒| 成人A毛片免费观看网站| 亚洲天堂一区在线| 亚洲国产电影av在线网址| 95老司机免费福利|