Aurelia + Asp.net Web Api + Typescript + JSPM

Visual Studio Asp.Net SPA 프로젝트 템플릿을 사용하여 ASP.net MVC WebApi 2 프로젝트를 만들고 다음 jspm 명령을 실행하여 루트 폴더에 Aurelia를 설치했습니다. TypeScript를 transpiler로 선택했습니다. Aurelia + Asp.net Web Api + Typescript + JSPM

지금 내가/설치 프로젝트에 대한 타이프 라이터를 구성해야

jspm install aurelia-bootstrapper

jspm install aurelia-framework

jspm init

다음 단계를 따르십시오.

업데이트 기존 프로젝트에 Typescript 지원을 어떻게 추가합니까? app.js 파일의 이름을 app.ts으로 변경했습니다. 나는 tsconfig.json 파일도 추가했습니다.

프로젝트 폴더 구조 :

tsconfig 파일 : { "compilerOptions": { "noImplicitAny"거짓, "noEmitOnError"사실, "removeComments"거짓, "sourceMap": true, "대상": "es6", "moduleResolution": "노드", "experimentalDecorators": true, "모듈": "시스템" } }

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; 
    } 
}

파일 I 프로젝트를 빌드 할 때 빌드로 인해 다음과 같은 오류로 실패합니다.

출처

2017-01-13 Rahul

TypeScript ASP.Net Core Skeleton을 살펴보아야합니다. –

여기에서 찾을 수 있습니다 : https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript-aspnetcore –

안녕하세요 애쉴리 & @Mvision, asp.net 웹 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를 transpiler로 선택하는 것을 제외하고는 모든 기본값을 수락하십시오.

실행

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라는 파일을 추가하고 그것으로 다음 척. 당신이 기다리고 싫어 경우

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

는 신속하게, 거의 다

typings install

yarn global add typings

하고, 두 더 많은 단계를

npm install typings –g

을 실행하거나.

먼저 SRC 또는 클라이언트 폴더의 루트에있는 파일을 호출 typings.d.ts를 생성하고이 라인을 추가 - nuget 패키지 관리자 콘솔을 열고 마지막으로

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

그리고, 그리고 히트 그것으로

설치 패키지 ES6-promise.TypeScript.DefinitelyTyped

설치 패키지 ES6-collections.TypeScript.DefinitelyTyped

그리고 모두 설정해야합니다.

이렇게하면 멋지게 묶이지 않고 CSS가 HTML의 HEAD에 가장 잘 추가되어 있음을 알게 될 것입니다. - 죄송합니다! -하지만 일을 처리하기에 충분합니다.

생산을 위해 어쨌든 WebApi를 통해 SPA를 호스팅하고 싶지는 않습니다.

출처

2017-04-04 21:40:45

Aurelia + Asp.net Web Api + Typescript + JSPM

답변

관련 문제