Question

我正在使用Angular2和ASP.NET5，gulp和typescript。当我解决Angular的教程时，一切正常，但我不确定如何与ASP.NET 5一起设置该过程。

我创建了一个带有工作打字稿编译和捆绑的项目，现在问题就出现了：

当我将tsConfig文件添加到项目的根目录时，visual studio无法识别该文件。当我把它放到wwwroot / scripts时，一切都很好（非常奇怪）。
Angular2不再支持DefinityTyped，文件为空并包含我必须安装npm包的提示。我做到了，但文件太多了。我必须包含哪些类型定义？他们都没有工作。我总是得到它找不到的错误 angular2 / angular2 。
这很奇怪。当我使用commonjs作为打字稿时，编译工作。我真的很困惑，因为我不明白包含是如何工作的。 Resharper显示了很多错误，但是当我暂时禁用它时。
Angular2 NPM Package还包含脚本文件。但由于它们在外面，我无法直接引用它们。我找不到带有脚本的凉亭包装，包装两次也没有意义。

对于如何使用asp.net 5设置angular2的教程或一些最佳实践，我会非常高兴。

顺便说一下：有很多包经理：NPM，NuGet，gulp，tsd ......

Answer 1

我同意，起初让Angular2在Visual Studio Asp.net 5环境中运行起来有点令人困惑。我将与我的Angular2应用程序相关联的打字稿文件放在名为 App （资本＆＃34; A＆＃34;）的根目录中的文件夹中，然后使用gulp将javascript转换为javascript到＆＃34;应用＆＃34; （小＆＃34; a＆＃34;）at＆＃34; ./ wwwroot / app＆＃34;。 tsconfig.json文件似乎在App文件夹中运行正常，它看起来如下：

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

我的gulp任务如下所示（请注意，我还需要将任何关联的HTML视图和JSON文件复制到app文件夹中）：

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

现在，当我运行gulp任务 compile：ts 时，我的 app 文件夹获取所有适当的资产。

现在，我意识到你可能不想听到另一个包经理，但我建议你考虑使用JSPM。由构建system.js的同一团队构建，JSPM非常擅长捆绑您的Angular2应用程序进行生产。 JSPM要求您在root和mine中有一个config.json文件（配置为告诉JSPM angular2 dev依赖项的位置）如下：

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

我使用gulp-jspm在自包含的js文件中执行捆绑：

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/"));

});

然后在index.html文件中有一个很好的整洁脚本引用：

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

当我为生产构建时，我将BundleVersion变量更改为高速缓存破坏者。

Answer 2

关于第4点，我认为没有计划为angular2生成Bower包（参见https://github.com/angular/angular/issues/4018）。这似乎可能会导致与Visual Studio 2015 ASP.NET 5模板项目产生一些摩擦，这些项目设置为将Bower用于客户端程序包（请参阅http://docs.asp.net/en/latest/client-side/bower.html）。

我解决了以下问题：

安装angular2 npm包：npm install --save angular2

配置gulp任务，将相关文件从node_modules目录结构复制到wwwroot\lib目录结构。这可以在gulpfile.js：

中按如下方式完成

/// <binding BeforeBuild='build-wwwroot-lib' />

var gulp = require('gulp');

var nodeModulesPath = './node_modules';
var wwwrootLibPath = './wwwroot/lib';

var libFiles = [
  nodeModulesPath + '/angular2/bundles/**',
  nodeModulesPath + '/es6-promise/dist/**',
  nodeModulesPath + '/es6-shim/es6-*',
  nodeModulesPath + '/reflect-metadata/Reflect*js',
  nodeModulesPath + '/rxjs/bundles/**',
  nodeModulesPath + '/zone.js/dist/**',
  /* ... Add other files required here as necessary ... */
];

// Install relevant assets from node_modules to wwwroot/lib
gulp.task('build-wwwroot-lib', function() {
  return gulp
    .src(config.lib, { base: nodeModulesPath })
    .pipe(gulp.dest(wwwrootLibPath));
});

Angular2 with ASP.NET 5

2 个答案: