web-dev-qa-db-ja.com

TypeScriptを使用してVisual Studio 2015でangular2を動作させるにはどうすればよいですか？

Angular 2でVisual Studio 2015をTypeScriptで動作させようとしています。 MVC 5タイプのWebプロジェクト（web.configの代わりにconfig.json）で動作する最も基本的な例を取得しようとしています。

import {Component, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

この作業を行うために必要な最小限のものを試しています。そこで、最新のAngular 2（alpha .45））をダウンロードし、ダウンロードしたTypeScriptフォルダー内のすべてのmodulesをコピーしました。 （minusdocsおよびexamplesのもの。）

これは以前に行ったようにVisual Studioの外でも動作するはずですが、Visual Studioで動作するようにしようとしていますが、3,000以上のエラーが発生しているようです。他のモジュールか何かが欠けているからです。

ここに私が見逃しているものがいくつかあります：

Map（default_keyvalue_differ.ts、および他の多く）：

export class DefaultKeyValueDiffer implements KeyValueDiffer {
  private _records: Map<any, any> = new Map();

assert（lexer.ts）：

  scanCharacter(start: number, code: number): Token {
    assert(this.peek == code);

Set（command_compiler.ts）：

function removeKeyValueArrayDuplicates(keyValueArray: string[]): string[] {
  var knownPairs = new Set();

startsWith（shadow_css.ts）

rule.selector.startsWith('@page')

require（parse5_adapter.ts）

var parse5 = require('parse5/index');

@ reactivex/rxjs/dist/cjs/Rx（async.ts）

export {Subject} from '@reactivex/rxjs/dist/cjs/Rx';

これ以上のものがあります。だから私の最初の質問は、私は本当にこれらすべてのものが必要なのか、それとも必要ではないのかということです。 2番目に重要なことは、Visual Studioを取得してソリューションを構築する方法です。

注：この「非常に長い例/チュートリアル」は、MVCの代わりにMVC 6（.NET Core）用に調整されていることを除いて、私が探していたものだと思います5： http://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-TypeScript/

asp.net-mvc-5typescriptvisual-studio-2015angular
18
Serj Sagan

SOはものへのリンクを貼り付けることに熱心ではないことを知っていますが、これは従うべきかなり大きなチュートリアルです。ここに貼り付けてコピーするだけです...とにかく、Visual Studio MVC 5でNG2を動作させるためにAngular 2チームが提供するチュートリアルがあります。

https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

3
Serj Sagan

Visual Studio 2015を使用する古いnpmバージョンに問題があると思います。VisualStudioの[出力]ウィンドウを開き、[Bower/npm]から[出力を表示]を選択することをお勧めします。次の図のようなものが表示されます。

enter image description here

出力の最もインポートされた行は長く、カットされています。 separetelsを含めます。

npm ERR！コマンド "C：\ Program Files（x86）\ Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External \\ node\node" "C：\ Program Files（x86）\ Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\bin\npm-cli.js ""インストール "

言い換えれば、Visual Studio 2015はC:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\Externalディレクトリのnpmを含むいくつかのツールを使用することを理解することが重要です。 Angular2には、_reactivex/rxjs_を必要とする依存パッケージ_"npm":"~2.0.0"_がありますが、Visual Studioは代わりに古い_1.4.9_バージョンを使用します（"C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\package.json"のversionを確認できます） 。 Nodejsとnpmの最新バージョンをインストールする場合でも、Visual Studio 2015は同じ古いバージョンのnpmを使用するため、役に立ちません。

問題を解決するには、次のことを行うことをお勧めします。

  • nodeJsの最新バージョンをインストールします。 https://nodejs.org/en/ からダウンロードできます。 x64バージョンを使用する場合は、C:\Program Files (x86)\nodejsにx86が既にインストールされていることを確認することをお勧めします。 x86バージョンが存在する場合は、x64バージョンのインストールを開始する前にアンインストールします。その後、Nodejsをインストールできます。今日は_node-v5.0.0-x64.msi_のNodeJs 5.0.0になります。
  • 次に、コマンドプロンプトを管理モード（マンドリーではない）で起動し、_npm update -g_を使用してnpmを更新するか、_npm install -g npm@latest_を使用して最新バージョンをインストールします。インストールの前後に_npm -v_を使用して、最新バージョンをインストールすることを確認することをお勧めします。今日はバージョン3.3.12です。 npmのインストール/更新方法に応じて、_C:\Program Files\nodejs\node_modules\npm_または_%AppData%\npm_（たとえばdiretcory _C:\Users\Oleg\AppData\Roaming\npm_）または両方のインストール先にインストールできます。
  • 管理者権限でテキストエディタを起動する必要があります（[スタート]メニュー、検索、たとえば_notepad.exe_と入力して、 Ctrl+Shift+Enter）。その後、ファイルC:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmdを変更し、コンテンツとして_@"C:\Program Files\nodejs\node.exe" "%AppData%\npm\node_modules\npm\bin\npm-cli.js" %*_または_@"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" %*_のようなものを設定する必要があります

その後、_package.json_または_"angular2": "^2.0.0-alpha.45"_セクションに_"devDependencies"_のようなエントリを持つ_"dependencies"_を保存するだけでインストールが成功します。おそらく次のような警告だけが表示されます

enter image description here

npmの「非常に良い」バージョンを使用しているため：いくつかの_2.x.x_バージョンの代わりにバージョン3.3.12（依存関係パッケージ_"npm":"~2.0.0"_のルール_reactivex/rxjs_に基づく） ）。

追伸プレリリースバージョンのMVC6（ASP.NET 5）の代わりにMVC5を使用すると、おそらく他のエラーメッセージが表示されますが、主な問題は同じです。新しいバージョンのノードとnpmをインストールし、C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmdを変更して新しいバージョンのnpmを使用する必要があります。

14
Oleg

私の答えはMVC6に対するものです（MVC5が必要だとは思わなかった）

スターターテンプレートを使用することをお勧めします。 HMRとAngular Universal（SEOのサーバー側レンダリングと高速なページ読み込み）も使用するテンプレートを推奨できます。

https://github.com/aspnet/JavaScriptServices

はじめに： http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/

1
daniel