Angular2 с ASP.NET 5

Question

Я играю с Angular2 в сочетании с ASP.NET5, gulp и машинописным текстом. Все отлично работает, когда я решаю обучающие программы для Angular, но я не уверен, как настроить процесс в сочетании с ASP.NET. 5.

0 Я создал проект с рабочей сборкой и сборкой машинописных текстов, и теперь я начинаю :

1. Когда я добавляю файл tsConfig в корень проекта, визуальная студия не распознает файл. Когда я помещаю его в wwwroot/scripts, все в порядке (очень странно).

2. Angular2 больше не поддерживает DefinityTyped, файл пуст и содержит подсказку, что я должен установить пакет npm. Я сделал это, но есть так много файлов. Какие типы определений я должен включить? Ни один из них не работает. Я всегда получаю ошибку, которую он не может найти angular2/angular2.

3. Это очень странно. Когда я использую commonjs для машинописного текста, компиляция работает. Я действительно смущен, потому что я не понимаю, как работает приложение. Resharper показывает много ошибок, но когда я могу отключить его на данный момент.

4. Пакет Angular2 NPM также содержит файлы сценариев. Но из-за того, что они снаружи, я не могу ссылаться на них напрямую. Я не могу найти пакет колокольчиков со сценариями, и также не имеет смысла иметь пакет дважды.

Я был бы очень рад учебник или некоторыми лучшими практиками, как настроить angular2 с asp.net 5.

Кстати: Есть так много менеджеров пакетов: НОГО, NuGet, глоток, tsd ...

Answer 1

Что касается пункта № 4, я считаю, что не планируется производить пакет Bower для углового2 (см. 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 install --save angular2

2. Настройка глотка задачи скопировать соответствующие файлы из структуры 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)); 
   }); 
   

Answer 2

Я согласен, это несколько недоумение в первую, чтобы получить Angular2 и работает в визуальной среде студии Asp.net 5. Я помещал файлы машинописных файлов, связанные с моим приложением Angular2, в папку в корне под названием App (столица «A»), а затем использовать gulp для перевода в javascript в «приложение» (маленькое «a») на «./wwwroot /приложение". 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" 
    ] 
} 

Мой глоток задача выглядит следующим образом (обратите внимание, что я также необходим скопировать любой связанный с видом HTML и JSON файлы в папку приложения а):

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

Теперь, когда я запустить задачу глотка компиляции: TS моя приложения папки получает все соответствующие активы.

Теперь я понимаю, что вы, вероятно, не хотите слышать о еще одном ящике, но я рекомендую вам рассмотреть возможность использования JSPM. JSPM, созданный той же командой, которая построила system.js, действительно превосходит ваше приложение Angular2 для производства. JSPM требует, чтобы у вас есть файл 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" 
    } 
    } 
}); 

Я использую Глоток-JSPM выполнить группирование в на самодостаточный файл: расслоение плотной

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> 

Когда я строй для производства я изменить variab BundleVersion le в качестве кэша.