Angular2与ASP.NET 5 [英] Angular2 with ASP.NET 5
问题描述
我在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
目标：ES5\r
OUTDIR：wwwroot文件/程序/\r
}，\r
排除：[\r
node_modules\r
wwwroot的\r
]\r
} \r
我一饮而尽任务如下所示（请注意，我还需要复制任何相关的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
}）; \r
现在，当我运行一饮而尽任务编译：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
}，\r
\r
包：{\r
应用程序：{\r
defaultExtension：JS\r
}\r
}，\r
\r
图：{\r
angular2：node_modules / angular2，\r
引导：github上：twbs/bootstrap@3.3.6\r
jQuery的：github上：components/jquery@2.1.4\r
rxjs：node_modules / rxjs，\r
TS：github上：frankwallis/plugin-typescript@2.4.3\r
打字稿：故宫：typescript@1.7.5\r
github上：frankwallis/plugin-typescript@2.4.3：{\r
打字稿：故宫：typescript@1.7.5\r
}，\r
github上：twbs/bootstrap@3.3.6：{\r
jQuery的：github上：components/jquery@2.1.4\r
}\r
}\r
}）; \r
在我使用的是一饮而尽，JSPM执行捆绑成的自包含js文件：
VAR gulp_jspm =要求（一饮而尽-JSPM）;\r
gulp.task（jspm_bundle，[编译：TS]，函数（）{\r
返回gulp.src（./ wwwroot文件/程序/ bootApp.js）\r
.pipe（gulp_jspm（{selfExecutingBundle：真}））\r
.pipe（gulp.dest（./ wwwroot文件/程序的构建/））;\r
\r
}）; \r
然后到您的index.html文件，你有一个很好的整齐的脚本参考：
＆LT;脚本SRC =〜/应用程序的构建/ bootApp.bundle.min ？.js文件v=@AppSettings.Value.BundleVersion＆GT; ＆LT; / SCRIPT＆GT; \r
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.
这篇关于Angular2与ASP.NET 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
