Home > Backend Development > C#.Net Tutorial > .Net Core + Angular Cli to implement development environment construction

.Net Core + Angular Cli to implement development environment construction

零下一度
Release: 2017-06-23 15:22:52
Original
2359 people have browsed it

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 }
Copy after login

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启动调试时并不会调研此参数
Copy after login

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的默认值
    }
  }
}
Copy after login

 

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template