Angular2 z ASP.NET 5

Question

Gram z Angular2 w połączeniu z ASP.NET5, gulp i maszynopis. Wszystko działa poprawnie, gdy rozwiążę samouczki dla Angular, ale nie jestem pewien, jak skonfigurować proces w połączeniu z ASP.NET 5.

Zrobiłem projekt z działającą kompilacją maszynopisu i sprzedażą wiązaną i teraz zaczynają się problemy :

1. Po dodaniu pliku tsConfig do katalogu głównego projektu, studio graficzne nie rozpoznaje pliku. Kiedy umieszczam go na wwwroot/scripts, wszystko jest w porządku (bardzo dziwne).

2. Angular2 nie obsługuje już DefinityTyped, plik jest pusty i zawiera wskazówkę, że muszę zainstalować pakiet npm. Zrobiłem to, ale jest tak wiele plików. Jakie definicje typów muszę uwzględnić? Żadna z nich nie działa. Zawsze pojawia się błąd, że nie można znaleźć kątowa2/kątowa2.

3. To bardzo dziwne. Kiedy używam commonjs dla maszynopisu, kompilacja działa. Jestem bardzo zdezorientowany, ponieważ nie rozumiem, w jaki sposób działa ta funkcja. Resharper pokazuje wiele błędów, ale kiedy mogę go wyłączyć na chwilę.

4. Pakiet Angular2 NPM zawiera również pliki skryptów. Ale ze względu na to, że są na zewnątrz, nie mogę ich bezpośrednio odnieść. Nie mogę znaleźć pakietu altana ze skryptami i nie ma sensu mieć pakietu dwa razy.

byłbym całkiem zadowolony tutorial lub kilka najlepszych praktyk, jak skonfigurować angular2 z ASP.NET 5.

Nawiasem mówiąc: Jest tak wielu menedżerów pakietów: KMP, Nuget, łyk, tsd ...

Answer 1

W odniesieniu do punktu 4, uważam, że nie ma planów stworzenia pakietu Altower dla angular2 (patrz https://github.com/angular/angular/issues/4018). Prawdopodobnie spowoduje to pewne tarcie przy użyciu projektów szablonów ASP.NET 5 programu Visual Studio 2015, które są skonfigurowane do używania Bower dla pakietów po stronie klienta (patrz http://docs.asp.net/en/latest/client-side/bower.html).

Pracowałem wokół tego, co następuje:

1. Zainstaluj pakiet angular2 npm: npm install --save angular2

2. skonfigurować zadanie łyk skopiować odpowiednie pliki ze struktury node_modules katalogu do struktury wwwroot\lib katalogów. Można to zrobić w następujący sposób 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

Zgadzam się, że jest nieco zbyt skomplikowana najpierw dostać Angular2 uruchomiony w Visual Studio Asp.net 5 środowiska. Umieściłem pliki maszynopisu skojarzone z moją aplikacją Angular2 w folderze w katalogu głównym o nazwie App (duże "A"), a następnie użyj gulp do przeniesienia do javascript do "aplikacji" (małe "a") w "./wwwroot/app ". Tsconfig.plik json wydaje się działać dobrze w folderze aplikacji i wygląda następująco:

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

Moim zadaniem łyk wygląda następująco (Zauważ, że również trzeba skopiować żadnych związanych widoki HTML i pliki JSON do folderu aplikacji jak również):

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

teraz kiedy uruchomić zadanie haustem kompilacji: ts mój aplikacja Folder pobiera wszystkie odpowiednie zasoby.

Teraz zdaję sobie sprawę, że prawdopodobnie nie chcesz słyszeć o kolejnym menedżerze pakietów, ale polecam rozważyć użycie JSPM. Zbudowany przez ten sam zespół, który zbudował system.js, JSPM naprawdę przoduje w łączeniu aplikacji Angular2 do produkcji. JSPM wymaga, że ​​masz plik config.json w katalogu głównym i górnicze (skonfigurowany powiedzieć JSPM gdzie są zależnościami angular2 dev) przedstawia się następująco:

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

I użyć haustem-jspm wykonać pakowanie w wiązki w na samowystarczalny js pliku:

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

}); 

następnie do pliku index.html masz jeden piękny odniesienie schludny skrypt:

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

Kiedy budować dla produkcji zmienić variab BundleVersion le jako narzędzie do pomijania pamięci podręcznej.