web-dev-qa-db-ja.com

Angular 2 Beta：Visual Studio ASP .NET MVC

Angular 2 alpha 45のアプリケーションを作成しましたが、うまく機能しましたが、機能させるには多くのことを「混乱」させる必要がありました。Angular = 2ですが、実際にAngular 2を使用し始めるためにそれを機能させる方法がわかりません。

'Angular 2：5 min Quickstart' のクリーンビルドを試しています。いくつかの問題がありますが、できるだけ具体的に説明します。これらの問題が発生している理由と、うまくいけばそれらを修正する方法を知りたいです。 Visual Studio 2015 Update 1、TypeScript1.7。

TypeScript構成：クイックスタートにはtsconfig.jsonファイルが含まれています。

_{  
    "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
 },
 "exclude": [
    "node_modules"
 ]
}
_

ProjectName.csprojファイルを編集し、Experimental Decorators Errorを取り除くために_<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>_という行を追加する必要があったため、これで何ができるかはわかりません。 https://github.com/Microsoft/TypeScript/issues/3124 動作するには、tsconfigファイルが/ Scriptsにある必要があることを示唆しているようですが、それも動作しません。

このtsconfigファイルを機能させる方法、または.csprojファイルを編集して同じコンパイラオプションを取得する方法を知りたいです。プロジェクトのプロパティ> TypeScriptビルドを見ると。これらは重要ですか？モジュールシステムは次のようにする必要があります：システム？

私のファイル構造はクイックスタートと同じです。

_app/
    app.component.ts
    boot.ts
node_modules/
    blah
index.html
tsconfig.json
package.json
_

Powershellを使用してnpminstallを実行し、node_modulesディレクトリ内のすべてを取得しました。

_import {Component} from 'angular2/core';_はエラーを表示します。 _../node_modules/angular2/core';_はエラーを表示しませんが、プロジェクトをビルドすると、_node_moduels/angular2/src/*_のファイルに多くのビルドエラーが発生します。これで、これらの問題を手動で修正できる可能性がありますが、これらのエラーが表示されている場合は、構成が間違っているように感じます。 tsconfigは_node_modules_を除外したいようです。 _'angular2/core'_を使用できず、代わりに相対パスを使用する必要があるのはなぜですか？ Visual Studioプロジェクトにnode_modulesを含めると、_node_modules_に非常に多くのビルドエラーが発生します。別に：プロジェクトをアルファ45からベータ0に更新する方法がわからなかったため、このクリーンビルドを実行しています。Angular 2の変更は簡単ですが、プロジェクトのバグを修正することは簡単です。現時点でアプリにすべてのモジュールをロードさせることは不可能です。

次の部分は、ビルドエラーを乗り越えたと仮定しています。_index.html_には次のものがあります。

_System.config({
    packages: {
    app: {
        format: 'register',
            defaultExtension: 'js'
        }
    }
});
System.import('app/boot')
    .then(null, console.error.bind(console));
_

ファイル拡張子を指定せずにSystem.import('app/boot')を機能させたことはありません。これはVisualStudioの問題ですか、それとも.NET MVCの問題ですか？ _index.html_でファイル拡張子を指定すると、System.jsで404が取得され、ファイル拡張子のないコンポーネントファイルを検索しようとします（構成に_defaultExtension: 'js'_がある場合でも、これは含める必要があるためです）私のプロジェクトのjsファイル？それから私がその問題を乗り越えたら、私は対処しなければなりません

_system.src.js:1049 GET http://localhost:63819/angular2/http 404 (Not Found)
_

ビルドエラーは1つもありませんでしたが、System.jsは何もロードしていません。

これらはすべて、TypeScriptを異なる方法で解釈するさまざまなシステムによって作成された問題のように感じます。はっきりしていない気がしますが、どうすればこの問題をはっきりさせることができますか。あなたが私に与えることができるどんな助けと指導にも本当に感謝します。私はこれに対する答えを何日も探していたような気がします。

typescriptvisual-studio-2015angularsystemjs
16
Adam Hitchens

私も最初はいくつか問題がありましたが、ほとんどの場合修正は簡単です。

TsConfigと同等

まず、プロジェクトのセットアップ：

<TypeScriptToolsVersion>1.7.6</TypeScriptToolsVersion>
<TypeScriptModuleKind>system</TypeScriptModuleKind>
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --experimentalDecorators </TypeScriptAdditionalFlags>
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --emitDecoratorMetadata </TypeScriptAdditionalFlags>

システムモジュールは正しいですが、htmlファイルに正しく含まれていることを確認してください。プロジェクトオプションウィンドウで選択することもできます。

VSのバージョンに応じて、追加のフラグ（古いバージョン）または専用タグでフラグを指定する必要があります。プロジェクトオプションでソースマップとesターゲットバージョンを確認する必要があります（es5は明らかにEcmaScriptバージョンのEcmaScript 5です）。

最新のTypeScriptバージョンをインストールすることを忘れないでください。そうしないと、RxJが機能しません。

Angular2ファイル

Npmを介してangular2をダウンロードすることは理にかなっていますが、TypeScriptフォルダーにnode_modulesを直接含めることはしません。フォルダ全体を含めるということは、たとえばgulpのように、他のすべてのノードモジュールを一緒に使用することを意味します。代わりに、TypeScriptディレクトリのContentフォルダーにあるangular2フォルダー全体をコピーするだけです（必要に応じて、gulpまたは単純なbatファイルを使用してこれを自動的に行うことができます）。

TypeScriptエラーについての問題は、Visual Studioがangular2フォルダー内のすべてのファイルを分析しようとし、それらのファイルの一部が重複していることです。ソースを削除し、コンパイルされたjsファイルとタイプ定義のみを保持する必要があります。つまり、次のことを意味します。

  • / es6を削除します（TypeScriptではなくes6で開発するために使用されるファイルです）
  • / ts（ソースファイル）を削除します
  • バンドル/タイピングを削除します（es6-shimおよびjasmineの追加の定義ファイル）

Angle2と同じフォルダーレベルにrxjsフォルダーが必要です。そうでない場合、インクルードは機能しません。

Content  
    typings  
        angular2  
        rxjs  
        mymodule
           whatever.ts
        boot.ts

HTMLファイルでは、angular2とrxjsの両方のバンドルフォルダーにあるjsファイルをリンクできます。

<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="/content/typings/angular2/bundles/angular2-polyfills.js"></script>
<script src="/content/typings/rxjs/bundles/Rx.min.js"></script>
<script src="/content/typings/angular2/bundles/angular2.dev.js"></script>
<script src="/content/typings/angular2/bundles/router.dev.js"></script>

次に、インポートは次のようになります。

import { Component } from 'angular2/core';

システム構成

インポートを機能させるには、システムを構成する必要があります。構成はかなり簡単です：

        System.paths = {
            'boot': '/content/typings/boot.js',
            'mymodule/*': '/content/typings/myModule/*.js'
        };
        System.config({
            meta: {
                'traceur': {
                    format: 'global'
                },
                'rx': {
                    format: 'cjs'
                }
            }
        });
        System.import('boot');

このコードを含めますafter angularおよび他のすべてのライブラリのスクリプトタグ。

Angular2は（スクリプトタグを介して）グローバルに含まれているため、システム構成に追加する必要はありません。次に、ファイルで、次の方法でモジュールをインポートできます。

import { MyThing } from "mymodule/whatever";
9
Camille Wintz

依存関係をnode_modulesにフェッチするnpminstallを使用している場合は、/ libまたは/ scriptsディレクトリに移動したり、TypeScriptファイルの記述方法を変更したりせずにその場で使用する方法を次に示します。クイックスタートに示されている方法：

プロジェクトのプロパティ-> TypeScriptビルド

「モジュールシステム」で「システム」を選択します。

enter image description here

TypeScriptコンパイラオプションを設定します

ASP.NET Coreを使用している場合は、tsconfig.jsonでオプションを設定します。

{  
    "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
 },
 "exclude": [
    "node_modules"
 ]
}

ASP.NET（非コア）を使用している場合は、csprojファイルでコンパイラオプションを設定します。 （コンパイラオプションを設定するためのドキュメント： https://github.com/Microsoft/TypeScript/wiki/Setting-Compiler-Options-in-MSBuild-projects ）テキストエディタで、他のプロパティグループを見つけますTypeScriptオプションとアドイン：

<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
<TypeScriptModuleResolution>node</TypeScriptModuleResolution>

ソースファイルを正しい順序でロードします

Index.htmlで、この特定の順序でスクリプトを設定して、モジュールがnode_modulesフォルダーからロードされるようにします（rxjsおよびangular2バンドルをロードする必要がありますafter System.configを実行しないと、システムローダーが正しいパスで登録されなかったため、angular/rxjsソースファイルを再度ダウンロードします）

<!-- load system libraries -->
<script src="~/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="~/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/node_modules/systemjs/dist/system.js"></script>

<!-- configure system loader first -->
<script>
    System.config({
        defaultJSExtensions: true,
        paths: {
            'angular2/*': 'node_modules/angular2/*',
            'rxjs/*': 'node_modules/rxjs/*'
        }
    });
</script>

<!-- load app bundles *after* configuring system so they are registered properly -->
<script src="~/node_modules/rxjs/bundles/Rx.js"></script>
<script src="~/node_modules/angular2/bundles/angular2.js"></script>

<!-- boot up the main app -->
<script>
    System.import("app/main").then(null, console.error.bind(console));
</script>

App TypeScriptは標準のインポート構文を使用できます、ここにapp/main.ts：

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

TypeScriptコンパイラのモジュール解決は「ノード」モードを使用しているため、angular2の「インポート」の前に「../node_modules/」を付ける必要はないことに注意してください。 （ノードモジュール解決ロジックに関するドキュメント： https://github.com/Microsoft/TypeScript/issues/2338 ）それがあなたのために働くことを願っています！

3
Marcus L

私は一般的にasp.net5vnextとAngular 2）の新しいことに満足しています。しかし、VisualStudioでAngular 2をリギングするのは面倒です。私はフォローしました。次のコードを使用するまで、angular.ioクイックスタートガイドは信心深く、Hello Angular 2アプリを実行することができませんでした。

<script src="~/lib/anguar2/angular2-polyfills.js"></script>
<script src="~/lib/es6-shim/es6-shim.js"></script>
<script src="~/lib/systemjs/system.js"></script>
<script>

    System.config({
        defaultJSExtensions: true
      
    });

</script>
<script src="~/lib/rxjs/rx.js"></script>
<script src="~/lib/anguar2/angular2.min.js"></script>
<script>
    System.import('js/boot');
</script>

これが機能する理由をよりよく理解できればいいのですが、angularボイラープレートは機能しません。しかし、少なくとも機能しました。これがお役に立てば幸いです。

2
brando

Visual Studio 2015 Update 1、TypeScript 1.7。*を使用していることを確認してください。また、「Angular 2：5minQuickstart」を実行することもできます。

VS2015「外部Webツール」のバージョンが古すぎるために発生する問題

VS2015でasp.net5Webアプリケーションを作成したら、[すべてのファイルを表示]をクリックし、package.jsonフォルダーとnode_modulesフォルダーを削除して、package.jsonを再度追加します。

上記が機能しない場合は、これを参照してください： http://jameschambers.com/2015/09/upgrading-npm-in-visual-studio-2015/

1
Long Field

私はまったく同じ問題を抱えています（プロジェクトアルファ48の作業、ベータ0と同じエラーなど）。私の作業ファイル（MVCプロジェクト）：

App/boot.ts

/// <reference path="../node_modules/angular2/manual_typings/globals-es6.d.ts" />
/// <reference path="../node_modules/angular2/typings/es6-shim/es6-shim.d.ts" />
import {bootstrap}    from '../node_modules/angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

App/app.component.ts

import {Component} from '../node_modules/angular2/core'
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent {}

Views/Shared/_Layout.cshtml

<head>
...
<script src="~/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>
<script>
 System.config({
   defaultJSExtensions: true,
   packages: {
     'app': { format: 'register', defaultExtension: 'js'}
   },
   paths: {
     'angular2/*': 'node_modules/angular2/*',
     'rxjs': 'node_modules/rxjs/bundles/Rx.js'
   }
 });
</script>
<script src="~/node_modules/rxjs/bundles/Rx.js"></script>
<script src="~/node_modules/angular2/bundles/angular2.dev.js"></script>
<base href="/">
@Scripts.Render("~/bundles/modernizr")
...
</head>

Views/Home/Index.cshtml

<my-app>Loading...</my-app>
<script>
  System.import('App/boot')
   .then(null, console.error.bind(console));
</script>

System.configに「パス」を追加した後はうまくいきました。

1
Liviu Catrina