Aurelia + Asp.net Web Api + Typescript + JSPM

Visual Studio Asp.Net SPAプロジェクトテンプレートを使用してASP.net MVC WebApi 2プロジェクトを作成し、次のjspmコマンドを実行してAureliaをルートフォルダにインストールしました。 TypeScriptをトランスバータとして選択しました。Aurelia + Asp.net Web Api + Typescript + JSPM

jspm init
jspm install aurelia-framework
jspm install aurelia-bootstrapper

今、私はプロジェクトのために活字を設定/インストールする必要があります。

誰かがフォローするステップを投稿できますか？

更新既存のプロジェクトにTypescriptサポートを追加する方法を教えてください。 app.jsファイルの名前をapp.tsに変更しました。私もtsconfig.jsonファイルを追加しました。

プロジェクトのフォルダ構造：

TSconfigのファイル： { "compilerOptions"：{ "noImplicitAny"：偽、 "noEmitOnError"：真、 "removeComments"：偽、 "sourceMap"：true、 "target"： "es6"、 "moduleResolution"： "node"、 "experimentalDecorators"：true、 "module"： "system" }}

App.Tsは

import { inject } from 'aurelia-framework'; 
import { HttpClient } from 'aurelia-http-client'; 


@inject(HttpClient) 

export class App { 

    message: string; 
    http: any; 

    constructor(httpClient: HttpClient) { 
     this.http = httpClient; 
    } 
}

ファイル私はプロジェクトをビルドすると、ビルドは次のエラーのため失敗します。

出典

2017-01-13 Rahul

TypeScript ASP.Net Core Skeletonをご覧ください。 –

これは、ここで見つけることができます：https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript-aspnetcore –

こんにちはアシュリー＆@Mvision、私はこれをasp.net web api 2アプリケーションで実現する必要があります。 asp.netコアプロジェクト用ではありません。私はより詳細な質問を更新しました。混乱させて申し訳ありません。助けてもらえますか？ – Rahul

あなたが探している一気のタスクはここで見つけることができます「ビルド」、である、それはスケルトンプロジェクトの一部です。

Open build task on github

出典

2017-01-13 14:55:13

WEBAPI 2を使用していますか？私はこれを持っていると思う。それは私を長い間狂ってしまった。

いいえ、上から。新しいASP.NET WebApiプロジェクトを作成します。

コマンドプロンプトでプロジェクトフォルダ（.csprojファイルのある場所）を開きます。

jspm initを実行します。 Typescriptをトランスペラレータとして選択する以外は、デフォルトをすべて受け入れます。

実行

jspm install aurelia-framework aurelia-bootstrapper aurelia-pal-browser

は、あなたの設定の最初のセクションを作成します。

が

System.config({ 
    baseURL: "/", 
    defaultJSExtensions: true, 
    transpiler: "typescript", 
    paths: { 
    "*": "client/*", 
    "github:*": "jspm_packages/github/*", 
    "npm:*": "jspm_packages/npm/*" 
    }

あなたが代わりにクライアントのSRCを使用することができますが、あなたは私を理解していれば、ソースコードの多くは、他の場所でありますので、私は、クライアントが好き：JSファイルは次のようになります。

これで、今どこかに行っています。ポップ、あなたのビュー]フォルダを開き、index.cshtmlを開くと、それはこのように見えるように -

@{ 
    Layout = null; 
} 
<!DOCTYPE html> 
<html> 
  <head> 
    <title>Aurelia</title> 
  </head> 
  <body aurelia-app> 
    <script src="jspm_packages/system.js"></script> 
    <script src="config.js"></script> 
    <script> 
      System.import('aurelia-bootstrapper'); 
    </script> 
  </body> 
</html>

次に、プロジェクトのルートにtypings.jsonというファイルを追加し、それに次のようにチャック。あなただけの2つのステップ、ほとんどが、

yarn global add typings

、その後

typings install

を待っている嫌い場合

{ 
  "name": "WhatEverYouCalledThisThing", 
  "dependencies": { 
    "aurelia-binding": "github:aurelia/binding", 
    "aurelia-bootstrapper": "github:aurelia/bootstrapper", 
    "aurelia-dependency-injection": "github:aurelia/dependency-injection", 
    "aurelia-event-aggregator": "github:aurelia/event-aggregator", 
    "aurelia-fetch-client": "github:aurelia/fetch-client", 
    "aurelia-framework": "github:aurelia/framework", 
    "aurelia-history": "github:aurelia/history", 
    "aurelia-history-browser": "github:aurelia/history-browser", 
    "aurelia-loader": "github:aurelia/loader", 
    "aurelia-logging": "github:aurelia/logging", 
    "aurelia-logging-console": "github:aurelia/logging-console", 
    "aurelia-metadata": "github:aurelia/metadata", 
    "aurelia-pal": "github:aurelia/pal", 
    "aurelia-pal-browser": "github:aurelia/pal-browser", 
    "aurelia-path": "github:aurelia/path", 
    "aurelia-polyfills": "github:aurelia/polyfills", 
    "aurelia-route-recognizer": "github:aurelia/route-recognizer", 
    "aurelia-router": "github:aurelia/router", 
    "aurelia-task-queue": "github:aurelia/task-queue", 
    "aurelia-templating": "github:aurelia/templating", 
    "aurelia-templating-binding": "github:aurelia/templating-binding", 
    "aurelia-templating-resources": "github:aurelia/templating-resources", 
    "aurelia-templating-router": "github:aurelia/templating-router" 
  }, 
  "globalDevDependencies": { 
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459", 
    "aurelia-protractor": "github:aurelia/typings/dist/aurelia-protractor.d.ts", 
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446", 
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654" 
  }, 
  "globalDependencies": { 
    "url": 
    "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618", 
    "whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046" 
  } 
}

はその後すぐに、

npm install typings –g

かを実行します。

まず、あなたのSRCまたはクライアントのフォルダのルートにtypings.d.tsというファイルを作成し、そこに次の行を追加 -

/// <reference path="../typings/index.d.ts" />

そして最後に、nugetパッケージマネージャコンソールとヒットを開きますそれに

インストール・パッケージES6-promise.TypeScript.DefinitelyTyped

、その後

インストール・パッケージES6-collections.TypeScript.DefinitelyTyped

すべて設定する必要があります。

これではうまくいきわたっているわけではなく、おそらくあなたのHTMLのHEADにCSSが追加されているのが分かります。 - しかし、それは物事を働かせるだけで十分です。

そして、実際にはWebApiがあなたのSPAをホストしていることを望んでいません。

出典

2017-04-04 21:40:45

Aurelia + Asp.net Web Api + Typescript + JSPM

答えて

関連する問題