首页 文章

Aurelia Asp.net Web Api Typescript JSPM

提问于
浏览 次
1

我使用Visual Studio Asp.Net SPA项目模板创建了一个ASP.net MVC WebApi 2项目，并通过运行以下jspm命令将Aurelia安装到根文件夹中 . 我选择TypeScript作为转换器 .

  • jspm init

  • jspm install aurelia-framework

  • jspm install aurelia-bootstrapper

现在我需要为项目安装/配置TypeScript .

任何人都可以发布步骤吗？

UPDATE 如何为现有项目添加Typescript支持 . 我将 app.js 文件重命名为 app.ts . 我也添加了 tsconfig.json 文件 .

项目文件夹结构：

enter image description here

tsconfig文件：{“compilerOptions”：{“noImplicitAny”：false，“noEmitOnError”：true，“removeComments”：false，“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;
    }
}

当我构建项目时，由于跟随错误，构建失败 .

enter image description here

typescript asp.net-web-api2 aurelia jspm asp.net-spa

2 回答

  • 0

    你正在寻找的gulp任务是'build'，可以在这里找到它，它是骨架项目的一部分 .

    Open build task on github

    回复于
  • 0

    使用WebApi 2？我想我得到了这个 . 它让我疯狂了足够长的时间 .

    好的，从顶部 . 创建一个新的ASP.NET WebApi项目 .

    在命令提示符下打开项目文件夹（.csproj文件所在的文件夹） .

    运行jspm init . 除了选择Typescript作为您的转换器之外，接受所有默认值 .

    跑

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

    使config.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

    几乎在那里，还有两个步骤 .

    首先，在src或客户端文件夹的根目录中创建一个名为typings.d.ts的文件，并将该行添加到其中 -

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

    最后，打开nuget包管理器控制台并点击它

    安装包es6-promise.TypeScript.DefinitelyTyped

    然后

    安装包es6-collections.TypeScript.DefinitelyTyped

    你应该全力以赴 .

    这并没有很好地为你捆绑，你会发现CSS可能最好添加到HTML的HEAD中 - 抱歉！ - 但这足以让事情发挥作用 .

    而对于制作，你真的不希望WebApi托管你的SPA .

    回复于

相关问题