Angular + C# + TypeScript の Visual Studio 環境を一つテンプレ的に持っておく。

9948 ワード
Angular TypeScript C# VisualStudio2017 C# テキストリンク

概要

Angular + C# + TypeScript の環境をVisual Studio で作成して、
最強の開発環境を作りたい、と思いまして、海外のサイトを参考にVSで簡単なものを作りました。
なぜAngularか、というのは、TypeScriptを使いたいから。なぜTSなのか、というのは、強力な型付けと、
静的分析が良いから、です。そして、最強の開発環境で、Visual Studio のパワーを発揮させる、というのが究極の目的です。

手順のもととなるサイト：　http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html　

＜やりたいことイメージ図＞

やったこと

インストール系

In Visual Studio click on Tools - Options.
In the "Options" window, expand "Projects and Solutions" and select "External Web Tools"
In the right pane, move the global $(PATH) entry to be above the internal path $(DevEnvDir) entries. This tells Visual Studio to look for external tools (like npm) in the global path before the internal path.
Click "OK" to close the "Options" window and then restart Visual Stduio for the changes to take effect

テンプレ作成

  • Visual Studio 2017 で、まずは空のプロジェクトを作成
    • Web　⇒　Visual C#　⇒　ASP Net MVC　⇒　空のぺーじ（SPAなどは選ばない）
  • AngularのQuickStartのZipファイルのなかから、以下の４つを、VSのソリューションにコピー
    • src folder and it's contents
    • bs-config.json
    • package.json
    • tslint.json

  • コピーするとこうなる

  • Package.json を右クリックし、リストアする。

Restore the required packages.
In the "Solution Explorer" right click on "package.json" file and select "Restore Packages" from the context menu. This takes a few minutes to load all the modules. You can see the status in "Visual Studio Output" window. After the restoration is complete, you will see a message "Installing Packages Complete". To see all the installed node modules, click on "Show all Files" icon in Solution Explorer. DO NOT include "node_modules" folder in the project.

パスをいじる。

まず今のままだと、/src/の下にもろもろある状態なので、パスがずれてしまっています。
試しに、ビルドしてみると、以下の通りエラーとなる。

src/index.html

上記のパスを以下の通りに直す（４か所）

  <head>
    <title>Angular QuickStart</title>
    <base href="/src/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="/node_modules/core-js/client/shim.min.js"></script>

    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

src/systemjs.config.js

上記のパスを以下の通りに直す（１か所,　"/" いれるだけ）

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': '/node_modules/'
    },

直りました。

この通り、TypeScriptで、開発ができます。

ファイル： src/app\app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular!!'; }

TypeScriptは、ブラウザがそのまま理解できないので、ビルドしないと修正が反映されないため、
「tsconfig.json」に、ComplieOnSave を入れて、保存の時にCompileしてもらうように一行追加。

追加するのもこの通り、Visual Studio のインテリセンスが書いてくれるので、らくちんです。

モジュール追加したときのimport もアシストしてくれます。

これで、コードが多少大きくなっても、開発が効率的に行うことができます。