叡揚資訊

GSS 技術部落格

在這個園地裡我們將從技術、專案管理、客戶對談面和大家分享我們多年的經驗，希望大家不管是喜歡或是有意見，都可以回饋給我們，讓我們有機會和大家對話並一起成長！
若有任何問題請來信：gss_crm@gss.com.tw

4 分鐘閱讀時間 (754 個字)

字體大小: + –

[ASP.NET]使用Visual Studio 2015來開發ASP.NET Core Angular 2 專案 - 2

.NET

2016/10/24, 週一

763 點擊

0 評論

在前一篇使用Visual Studio 2015來開發ASP.NET Core Angular 2 專案中，

是將 typescript檔案放在Server的目錄，然後再透過 gulp-typescript 去編譯，

然後再 copy 到 wwwroot 下面去。

但是這樣如果沒有將 typescript檔案也一併 Copy 過去的話，

在 Browser 中又沒有辦法針對 typescript檔案 Debug。

直接將Client端都放在 wwwroot 目錄下比較簡單，

所以一開始我們一樣建立一個 ASP.NET Core 的專案，

然後選取 Empty Templates，

在 project.json 的 dependencies 中加入 "Microsoft.AspNetCore.StaticFiles": "1.0.0" ，

在 Startup.cs 中的 Configure Method 中加入處理靜態檔案的Code，如下，

然後在 Startup.cs 中的 Configure Method 中改成以下的內容，

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)

{

	app.UseStaticFiles();

	app.Use(async (context, next) =>

	{

		await next();



		if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))

		{

			context.Request.Path = "/index.html"; // Put your Angular root page here 			await next();

		}

	});

}

接著依 Angular2 官網 - 快速起步的範例，

從创建配置文件開始，在 wwwroot 目錄下新增 package.json，tsconfig.json，typings.json 及 systemjs.config.js。

我們要調整 package.json 及 tsconfig.json，

package.json，因為我們是透過 VS.NET 來 Run 所以不需要 scripts 中的 start。

所以 devDependencies 中的 concurrently 及 lite-server 也可以不用加入，如下，

{

  "name": "angular-quickstart",

  "version": "1.0.0",

  "private": true,

  "scripts": {

    "postinstall": "typings install",

    "tsc": "tsc",

    "tsc:w": "tsc -w",

    "typings": "typings"  },

  "license": "ISC",

  "dependencies": {

    "@angular/common": "~2.0.1",

    "@angular/compiler": "~2.0.1",

    "@angular/core": "~2.0.1",

    "@angular/forms": "~2.0.1",

    "@angular/http": "~2.0.1",

    "@angular/platform-browser": "~2.0.1",

    "@angular/platform-browser-dynamic": "~2.0.1",

    "@angular/router": "~3.0.1",

    "@angular/upgrade": "~2.0.1",

    "angular-in-memory-web-api": "~0.1.1",

    "bootstrap": "^3.3.7",

    "core-js": "^2.4.1",

    "reflect-metadata": "^0.1.8",

    "rxjs": "5.0.0-beta.12",

    "systemjs": "0.19.39",

    "zone.js": "^0.6.25"  },

  "devDependencies": {

    "typescript": "^2.0.3",

    "typings": "^1.4.0"  }

}

tsconfig.json ，請多加入 exclude 的設定，如下，

{

  "compilerOptions": {

    "target": "es5",

    "module": "commonjs",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false  },

  "exclude": [

    "node_modules",

    "typings"  ]

}