Aurelia + Asp.net Web Api + Typcript + JSPM

Я создал проект ASP.net MVC WebApi 2 с использованием шаблона проекта Visual Studio Asp.Net SPA и установил Aurelia в корневую папку, выполнив следующие команды jspm. Я выбрал TypeScript как транспилер.Aurelia + Asp.net Web Api + Typcript + JSPM

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

Теперь мне нужно установить/настроить Машинопись для проекта.

Может ли кто-нибудь опубликовать шаги, чтобы следовать?

ОБНОВЛЕНИЕ Как добавить поддержку виджета для существующего проекта. Я переименовал файл 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

Вы должны взглянуть на наш базовый скелет ASP.NET. –

, который можно найти здесь: https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript-aspnetcore –

Привет, Ashley & @Mvision, мне нужно добиться этого для asp.net web api 2 application , Не для основного проекта asp.net. Я уточнил вопрос более подробно. Извините за путаницу. Не могли бы вы помочь? – Rahul

глоток задача, которую вы ищете «сборки», который можно найти здесь, она является частью проекта скелета.

Open build task on github

источник

2017-01-13 14:55:13

Использование WebAPI 2? Кажется, я понял. Это заставило меня сумасшедшим надолго.

Хорошо, сверху. Создайте новый проект ASP.NET WebApi.

Откройте папку проекта (тот, где находится файл .csproj) в командной строке.

Запустить jspm init. Примите все значения по умолчанию, за исключением того, что вы выбираете Typcript как ваш транспилер.

Run

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

сделать первый раздел вашей конфигурации.JS файл выглядит следующим образом:

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

Вы можете использовать SRC вместо клиента, но мне нравится клиент, потому что есть много исходного кода в другом месте, если вы меня понимаете.

Хорошо, теперь мы куда-то попадаем. Поп открыть папку Views, открыть 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 в корневом каталоге вашего проекта и швырнуть в него следующее.

{ 
  "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

или, если вы ненавидите ожидания,

yarn global add typings

, а затем

typings install

Почти там, только еще два шага.

Во-первых, создайте файл с именем typings.d.ts в корневой папке Src или клиента папку и добавьте эту строку к нему -

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

И, наконец, откройте консоль менеджера NuGet пакет и нажмите он с

Install-Package ES6-promise.TypeScript.DefinitelyTyped

, а затем

Install-Package ES6-collections.TypeScript.DefinitelyTyped

И вы должны быть установлены.

Это не связывает вещи хорошо для вас, и вы обнаружите, что CSS, вероятно, лучше всего добавить в HEAD вашего HTML - извините! - но этого достаточно, чтобы заставить все работать.

И для производства вы не хотите, чтобы WebApi принимал ваш SPA в любом случае.

источник

2017-04-04 21:40:45

ответ

Смежные вопросы