1. ホーム
  2. 質問と答え
  3. Angular 2 Beta：Visual Studio ASP .NET MVC

Angular 2 Beta：Visual Studio ASP .NET MVC

2015-12-16 18 views
16

Angular 2 alpha 45用のアプリケーションを作成しましたが、すごくうまく機能しましたが、動作させるためにはあまりにも「混乱」していました。私は角度2を理解していますが、角度2を実際に使用するようにする方法を理解していません。Angular 2 Beta：Visual Studio ASP .NET MVC

私は'Angular 2: 5 min Quickstart'のクリーンビルドを試しています。いくつかの問題があり、私は可能な限り具体的になるつもりです。私はこれらの問題がなぜ起こっているのか、うまくそれらを修正する方法を学びたい。 Visual Studio 2015 Update 1、Typescript 1.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ファイルを編集し、行を追加する必要がありましたように私は、これはしかし何もしなければわからない：実験デコレーターエラーを取り除くために <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> を。 https://github.com/Microsoft/TypeScript/issues/3124は、tsconfigファイルが/ Scriptsになければならないことを示唆しているようですが、それでも私にとってはうまくいきません。

このtsconfigファイルをどのように動作させるか、.csprojファイルを編集して同じコンパイラオプションを取得する方法を知りたいと思います。 Project Properties> Typescript Buildを見た場合。これらはどういうことですか？モジュールシステムはシステムであるべきですか？

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

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

私は、node_modulesディレクトリのすべてを取得するためにnpm installを実行するためにpowershellを使用しました。

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にプロジェクトを更新する方法をうまくいかなかったので、このきれいなビルドを行っています。角度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')を得たことがありません。これはVisual Studioの問題ですか、それとも.NET MVCの問題ですか？ index.htmlにファイル拡張子を指定すると、System.jsでファイル拡張子なしのコンポーネントファイルを見つけようとすると40435が表示されます（configにはdefaultExtension: 'js'が含まれていますが、これはプロジェクトにjsファイルを含める必要があるためですか？私はその問題を乗り越える場合、私は、単一のビルドエラーを持っていなかった

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

に対処する必要がありますが、今System.jsは何もロードされていません。

私はこれらが異なるシステムによって作成されたすべての問題であると思っています。私は明らかにされていないように感じますが、私はこの問題についてどのように明確にするか分かりません。私はあなたが私に授けることができる助けと指導を本当に感謝します。私は今、これに対する答えを数日間探しているように感じます。

出典

2015-12-16 Adam Hitchens

答えて

2

私は、asp.net 5 vnextとAngular 2で新しいことに満足しています。しかし、Visual Studioで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.ioクイックスタートガイドに従い、こんにちは角度2アプリの実行を取得運がなかったですなぜこれが動作し、角形の定型文はそうではありません。しかし、少なくとも私はそれを働かせました。お役に立てれば。

出典

2015-12-19 14:41:25 brando

1

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

アプリケーション/ 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);

アプリケーション/

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

閲覧/共有/ _Layout.cshtmlをapp.component.ts

<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>
私はSystem.configの 'パス' を追加した後の

ビュー/ホーム/ Index.cshtml

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

それは私のために働きました。

出典

2015-12-19 18:03:10

+0

私はこのソリューションを試していますが、私のインポートはroot（ホスト）ではなく何かを提案することができますか？ – KnowHoper

9

私は最初もいくつかの問題を抱えていましたが、ほとんど修正するのが簡単です。

同等の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バージョンによっては、追加フラグ（旧バージョン）または専用タグでフラグを指定する必要があります。プロジェクトのオプションで、ソースマップとターゲットバージョンを確認する必要があります（es5は明らかにEcmaScriptバージョンのEcmaScript 5です）。

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

Angular2ファイル

NPM経由angular2ダウンロードは理にかなっている間、私はあなたのtypescriptですフォルダに直接node_modulesが含まれていないでしょう。フォルダー全体を含めるということは、他のすべてのノード・モジュールを、たとえばあふれさせているように一緒に取ることを意味します。代わりに、あなたのtypescriptディレクトリ内のangular2フォルダ全体をContentフォルダにコピーすることができます（これはgulpまたは簡単なbatファイルで自動的に行うことができます）。

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

  • 削除/ ES6を（彼らは代わりにtypescriptですのES6で開発するために使用されるファイルです）
  • /tsの（ソースファイル）
  • を削除バンドル/タイピングのため（additionnal defintionファイルを削除ES6-シムとジャスミン）

あなたはそうでない、すなわち、動作しません含み、angular2と同じフォルダレベルでrxjsフォルダを必要とする：

Content 
    typings 
     angular2 
     rxjs 
     mymodule 
      whatever.ts 
     boot.ts

htmlファイルでは、angular2とrxjの両方のバンドルフォルダに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');

角度および他のすべてのlibrairiesため、このコード後のスクリプトタグを含めます。

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

import { MyThing } from "mymodule/whatever";

出典

2016-01-03 01:35:42

+0

ありがとうCamillie ..「打ち合わせ」をコンパイルするためにもう1つのフォルダを削除しなければならなかった angular2/bundles – om471987

+1

ああ、そうです、バンドル/入力を忘れました。思い出させていただきありがとうございます。 –

1

を *あなたがアップデート1、活字体1.7 2015のVisual Studioであることを確認し、また、あなたが実行できる「角2：5分のクイックスタート」を。

あなたは「外部のウェブツール」VS2015として持っている問題は、あまりにも古いバージョンを持っている

VS 2015はWebアプリケーションをasp.net5作成した後、すべてのファイルは、その後package.jsonを削除し、フォルダをnode_modulesとpackage.jsonを追加ショーをクリックしてください再び。

上記の場合は、この参照は動作しません：あなたはNPMで稼働している場合はnode_modulesにあなたの依存関係をフェッチインストールhttp://jameschambers.com/2015/09/upgrading-npm-in-visual-studio-2015/

出典

2016-01-07 00:44:12

3

を、ここにそれらを移動することなくその場でそこにそれらを使用する方法です/ LIBまたは/ scriptsディレクトリ、またはあなたはクイックスタートに示す方法からごtypescriptですファイルを書き込む方法変更：

プロジェクトのプロパティ - >活字体を選択し、「モジュールシステム」については

を構築する「システム」：

enter image description here

設定活字体のコンパイラオプション

ASP.NETコアを使用する場合は、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）テキストエディタで他の活字体のオプションでPropertyGroupを見つけ、中に追加します。

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

ロード・ソース・ファイル、あなたのindex.htmlで正しい順序

でこの特定の順序でスクリプトを設定して、モジュールがnode_modulesフォルダからロードされるようにしてください（のSystem.configを実行した後にrxjsとangular2のバンドルをにロードする必要があります。そうしないと、システムローダーはangle/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>

アプリの活字体は、標準的なインポートの構文を使用することができ、ここでアプリ/ main.tsだ：angular2 "インポート" を持っている必要はありません

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

注意」../node_modules/ TypeScriptコンパイラのモジュール解決が「ノード」モードを使用しているためにプリペンドされます。 （ノードモジュール解決論理に関する文書：https://github.com/Microsoft/TypeScript/issues/2338）あなたのために働くことを願っています！

出典

2016-02-07 17:48:10

関連する問題

 関連する問題