Angular2 with ASP.NET 5

Question

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

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

1. 当我将tsConfig文件添加到项目的根目录时,visual studio无法识别该文件.当我把它放到wwwroot/scripts时,一切都很好(非常奇怪).

2. Angular2不再支持DefinityTyped,文件为空并包含我必须安装npm包的提示.我做到了,但文件太多了.我必须包含哪些类型定义？他们都没有工作.我总是得到它找不到angular2/angular2的错误.

3. 这很奇怪.当我使用commonjs作为打字稿时,编译工作.我真的很困惑,因为我不明白包含是如何工作的.Resharper显示了很多错误,但是当我暂时禁用它时.

4. Angular2 NPM包还包含脚本文件.但由于它们在外面,我无法直接引用它们.我找不到带有脚本的bower包,让包裹两次也没有意义.

我会对如何使用asp.net 5设置angular2的教程或一些最佳实践感到高兴.

顺便说一下:有很多包管理器:NPM,NuGet,gulp,tsd ......

Answer 1

我同意,起初让Angular2在Visual Studio Asp.net 5环境中运行起来有点令人困惑.我将与我的Angular2应用程序相关联的打字稿文件放在名为App(资本"A")的根目录下的文件夹中,然后使用gulp将javascript转换为"app"(小"a")at"./wwwroot/app ".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任务编译时: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 )。

我已经解决这个问题如下：

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

2. 配置一个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));
   });