Angular2与ASP.NET 5ASP、NET

由网友(舞琴)分享简介：我在ASP.NET5，一饮而尽和打字稿组合angular2玩耍。一切工作正常，当我解决角教程，但我不知道如何设置相结合的过程中与ASP.NET 5。我做了一个项目，工作打字稿编译和捆绑，我现在的问题开始：在我的tsConfig文件添加到项目的根目录下，Visual Studio不承认该文件。当我把它的wwwroot...

我在ASP.NET5，一饮而尽和打字稿组合angular2玩耍。一切工作正常，当我解决角教程，但我不知道如何设置相结合的过程中与ASP.NET 5。

我做了一个项目，工作打字稿编译和捆绑，我现在的问题开始：

在我的tsConfig文件添加到项目的根目录下，Visual Studio不承认该文件。当我把它的wwwroot /脚本，一切都很好（很奇怪）。

Angular2不支持DefinityTyped了，该文件是空的，包含了我必须安装NPM包的提示。我做到了，但有这么多的文件？我有哪种类型的定义，包括哪些内容？他们没有工作。我总是得到错误，它不能找到angular2 / angular2

这是非常奇怪的。当我使用CommonJS的打字稿为汇编作品。我真的很困惑，因为我不知道该怎么工作包括。 ReSharper的显示了很多的错误，但是当我可以禁用它的那一刻。

该Angular2 NPM软件包还包含脚本文件。但是，由于这一事实，他们在外面我不能直接引用它们。我不能用脚本找到一个凉亭包，它也没有意义有包的两倍。

我会约一个教程或一些最佳实践如何设置angular2用asp.net 5很高兴。

BTW：有这么多的软件包管理器：NPM，的NuGet，一饮而尽，TSD ...

解决方案

我同意，这是起初有点令人困惑得到angular2起来，在Visual Studio Asp.net 5的环境中运行。我把我的angular2应用程序相关的打字稿文件的文件夹在名为app（大写字母A），然后使用一饮而尽根到transpile成JavaScript进入应用程序（小的一个）在./wwwroot/app 。该tsconfig.json文件似乎功能在App文件夹确定，它看起来如下：

 {r  compilerOptions：{r    emitDecoratorMetadata：真实，r    experimentalDecorators：真实，r    模块：系统r    moduleResolution：节点，r    noImplicitAny：假的，r    noEmitOnError：真实，r    removeComments：假的，r    sourceMap：真实，r    目标：ES5r    OUTDIR：wwwroot文件/程序/r  }，r  排除：[r    node_modulesr    wwwroot的r  ]r}

rrr

我一饮而尽任务如下所示（请注意，我还需要复制任何相关的HTML视图和JSON文件到app文件夹以及）：

 VAR TS =要求（一饮而尽，打字稿）r    VAR tsProject = ts.createProject（./应用/ tsconfig.json）;r    gulp.task（编译：TS功能（）{r        VAR tsResult = tsProject.src（）r            .pipe（TS（tsProject））;r        tsResult.js.pipe（gulp.dest（./ wwwroot文件/程序））;r        返回gulp.src（'./应用/ ** / *。{HTML，JSON}'）r        .pipe（gulp.dest（'./ wwwroot文件/应用程序'））;r    }）;

rrr

现在，当我运行一饮而尽任务编译：TS我的应用程序文件夹中获取所有适当的asssets。

现在，我知道你可能不想听到另一个包马槽，但我建议你考虑使用JSPM。通过内置system.js同一支球队建，JSPM真正擅长的捆绑应用angular2生产。 JSPM需要你有一个config.json文件在您的根和矿（配置告诉JSPM哪里angular2开发依赖关系）如下：

 System.config（{r  BASEURL：/，r  defaultJSExtensions：真实，r  transpiler：打字稿r  路径：{r    故宫：*：jspm_packages / NPM / *，r    github上：*：jspm_packages / github上/ *，r    node_modules *：node_modules / *r  }，rr  包：{r    应用程序：{r      defaultExtension：JSr    }r  }，rr  图：{r    angular2：node_modules / angular2，r    引导：github上：twbs/bootstrap@3.3.6r    jQuery的：github上：components/jquery@2.1.4r    rxjs：node_modules / rxjs，r    TS：github上：frankwallis/plugin-typescript@2.4.3r    打字稿：故宫：typescript@1.7.5r    github上：frankwallis/plugin-typescript@2.4.3：{r      打字稿：故宫：typescript@1.7.5r    }，r    github上：twbs/bootstrap@3.3.6：{r      jQuery的：github上：components/jquery@2.1.4r    }r  }r}）;

rrr

在我使用的是一饮而尽，JSPM执行捆绑成的自包含js文件：

 VAR gulp_jspm =要求（一饮而尽-JSPM）;rgulp.task（jspm_bundle，[编译：TS]，函数（）{r    返回gulp.src（./ wwwroot文件/程序/ bootApp.js）r        .pipe（gulp_jspm（{selfExecutingBundle：真}））r        .pipe（gulp.dest（./ wwwroot文件/程序的构建/））;rr}）;

rrr

然后到您的index.html文件，你有一个很好的整齐的脚本参考：

＆LT;脚本SRC =〜/应用程序的构建/ bootApp.bundle.min ？.js文件v=@AppSettings.Value.BundleVersion＆GT; ＆LT; / SCRIPT＆GT;

rrr当我建立生产我改变BundleVersion变量作为缓存克星。

I playing around with angular2 in combination with ASP.NET5, gulp and typescript. Everything works fine when I solve the tutorials for Angular, but I am not sure how to setup the process in combination with ASP.NET 5.

I made a project with working typescript compilation and bundling and I now the issues are starting:

When I add the tsConfig file to the root of the project, visual studio does not recognizes the file. When I place it to wwwroot/scripts everything is fine (very strange).

Angular2 does not support DefinityTyped anymore, the file is empty and contains the hint that I must install the npm package. I did it but there are so many files? Which type definitions do I have to include? None of them works. I always get the error that it cannot find angular2/angular2

It is very strange. When I use commonjs for typescript the compilation works. I am really confused because I dont understand how the include works. Resharper shows a lot of errors but when I can disable it for the moment.

The Angular2 NPM Package also contains the script files. But because of the fact that they are outside I cannot reference them directly. I cannot find a bower package with the scripts and it also make no sense to have the package twice.

I would be quite happy about a tutorial or some best practices how to setup angular2 with asp.net 5.

Btw: There are so much package managers: NPM, NuGet, gulp, tsd...

解决方案

I agree, it is somewhat bewildering at first to get angular2 up and running in the Visual Studio Asp.net 5 environment. I put the typescript files associated with my angular2 app in a folder on the root called App (capital "A") and then use gulp to transpile into javascript into the "app" (small "a") at "./wwwroot/app". The tsconfig.json file seems to function ok in the App folder and it looks as follows:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/app/"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

My gulp task looks as follows (note that I also need to copy any associated html views and json files to the app folder as well):

     var ts = require("gulp-typescript")
    var tsProject = ts.createProject("./App/tsconfig.json");
    gulp.task("compile:ts", function () {
        var tsResult = tsProject.src()
            .pipe(ts(tsProject));
        tsResult.js.pipe(gulp.dest("./wwwroot/app"));
        return gulp.src('./App/**/*.{html,json}')
        .pipe(gulp.dest('./wwwroot/app'));
    });

Now when i run the gulp task "compile:ts" my "app" folder gets all the proper asssets.

Now, I realize you probably do not want to hear about yet another package manger, but I recommend you consider using JSPM. Built by the same team that built system.js, JSPM really excels in bundling your angular2 app for production. JSPM requires that you have a config.json file in your root and mine (configured to tell JSPM where the angular2 dev dependencies are) is as follows:

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

  packages: {
    "app": {
      "defaultExtension": "js"
    }
  },

  map: {
    "angular2": "node_modules/angular2",
    "bootstrap": "github:twbs/bootstrap@3.3.6",
    "jquery": "github:components/jquery@2.1.4",
    "rxjs": "node_modules/rxjs",
    "ts": "github:frankwallis/plugin-typescript@2.4.3",
    "typescript": "npm:typescript@1.7.5",
    "github:frankwallis/plugin-typescript@2.4.3": {
      "typescript": "npm:typescript@1.7.5"
    },
    "github:twbs/bootstrap@3.3.6": {
      "jquery": "github:components/jquery@2.1.4"
    }
  }
});

The I use a gulp-jspm to execute the bundling into on self-contained js file:

var gulp_jspm = require("gulp-jspm");
gulp.task("jspm_bundle", ["compile:ts"], function() {
    return gulp.src("./wwwroot/app/bootApp.js")
        .pipe(gulp_jspm({ selfExecutingBundle: true }))
        .pipe(gulp.dest("./wwwroot/app-build/"));

});

Then into your index.html file you have one nice tidy script reference:

<script src="~/app-build/bootApp.bundle.min.js?v=@AppSettings.Value.BundleVersion"> </script>

When I build for production I change the BundleVersion variable as a cache buster.

阅读全文

相关专题：ASP ；NET ；发布时间：2023-09-13 04:38:41