.Net Core + Angular Cli to implement development environment construction

1. Basic environment configuration

1. Install VS 2017 v15.3 or above

2 .Install the latest version of VS Code

3.Install Node.js v6.9 or above

4.Reset the global npm source and correct it to Taobao NPM image:

##npm install <span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>-<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>g cnpm <span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>--<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>registry<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>=<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>https<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>://<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>registry<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>.<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>npm<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"> </span>.<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>taobao<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>.<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>org<span style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333333;"></span>

##5. Install TypeScript

cnpm install -g typescript typings

6.Install

AngularJS CLI

cnpm install -g @angular/cli

7.Install

Yarn

cnpm i -g yarn

yarn config set registry

yarn config set sass-binary-site

8. Enable Yarn for Angular CLI

ng set --global packageManager=yarn

At this point, the basic configuration of the development environment is basically completed.

2. Configure the .Net Core project

When building the .Net Core project, use the Api template to build an empty solution, and based on this Enable static file support. The detailed configuration is as follows:

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Threading.Tasks; 5 using Microsoft.AspNetCore.Builder; 6 using Microsoft.AspNetCore.Hosting; 7 using Microsoft.Extensions.Configuration; 8 using Microsoft.Extensions.DependencyInjection; 9 using Microsoft.Extensions.Logging;10 11 namespace App.Integration12 {13     public class Startup14     {15         public Startup(IHostingEnvironment env)16         {17             var builder = new ConfigurationBuilder()18                 .SetBasePath(env.ContentRootPath)19                 .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)20                 .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)21                 .AddEnvironmentVariables();22             Configuration = builder.Build();23         }24 25         public IConfigurationRoot Configuration { get; }26 27         // This method gets called by the runtime. Use this method to add services to the container.28         public void ConfigureServices(IServiceCollection services)29         {30             // Add framework services.31             //services.AddMvc();32         }33 34         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.35         public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)36         {37             loggerFactory.AddConsole(Configuration.GetSection("Logging"));38             loggerFactory.AddDebug();39 40             //app.UseMvc();41             app.UseDefaultFiles();42             app.UseStaticFiles();43         }44     }45 }

Static files require the installation of a nuget package named Microsoft.AspNetCore.StaticFiles. Please install it yourself from the package management .

3. Configure the Angular Cli debugging environment

Before starting project debugging, we need to move the index.html in the angular resource into wwwroot. Please note that , this index.html file needs to be the version generated by the ng build command, generally stored in the /dist directory

Before compiling angular resources, we need to set the DeployUrl option to ng server in the angular cli settings The default debugging address:

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

The following is a description of each configuration item of 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?1.1.10"
      ],
      "scripts": [ // 引入全局脚本，构建时会打包进来，常用语第三方库引入的脚本
      ],
      "environmentSource": "environments/environment.ts", // 基础环境配置
      "environments": { // 子环境配置文件
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js?1.1.10"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js?1.1.10"
    }
  },
  "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的默认值
    }
  }
}

　

In order to realize the site structure with .Net Core Api project as the main body, we need to enable the Deploy option when using ng server and turn on the "deployment" of static resources Address" support. Note: Dual-site deployment may cause JS cross-domain, please solve it yourself

Add the deploy parameter ng serve --deploy-url '// when starting the Angular Cli debugging server on the command line localhost:4200/'

Finally, when the Api project is opened through the F5 command of VS, we can see the running effect of the website. Enjoy Coding~

The above is the detailed content of .Net Core + Angular Cli to implement development environment construction. For more information, please follow other related articles on the PHP Chinese website!