Comment déployer réellement une application 2 + Typescript + systemjs?

Question

Comment déployer réellement une application 2 + Typescript + systemjs?

il y a un tutoriel quickstarter à angular.io qui utilise le typographie & systemjs. Maintenant que j'ai cette miniapp, comment créer quelque chose de déployable? Je n'ai pas pu trouver la moindre info à ce sujet.

ai-je besoin d'outils supplémentaires, les paramètres supplémentaires dans le Système.config?

(je sais que je pourrais utiliser webpack et créer un lot unique.js, mais je voudrais utiliser systemjs comme il est utilisé dans le tutoriel)

pourrait quelqu'un partager leur processus de construction avec cette configuration (Angular 2, TypeScript, systemjs)

102

angular systemjs typescript

demandé sur Brian G. Bell 2016-03-29 16:01:34

7 réponses

score 65 · Answer 1

la principale chose à comprendre à ce niveau est qu'en utilisant la configuration suivante, vous ne pouvez pas concatter des fichiers JS compilés directement.

à la configuration du compilateur TypeScript:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": false,
    "stripInternal": true,
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": false,
    "rootDir": ".",
    "inlineSourceMap": true,
    "inlineSources": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

dans le HTML

System.config({
  packages: {
    app: {
      defaultExtension: 'js',
      format: 'register'
    }
  }
});

en fait, ces fichiers JS contiendront des modules anonymes. Un module anonyme est un fichier JS qui utilise System.register mais sans le nom du module comme premier paramètre. C'est ce que le compilateur typescript génère par défaut lorsque systemjs est configuré en tant que gestionnaire de module.

donc pour avoir tous vos modules dans un seul fichier JS, vous devez utiliser la propriété outFile dans votre configuration de compilateur dactylographié.

vous pouvez utiliser l'inside gulfp suivant pour faire cela:

const gulp = require('gulp');
const ts = require('gulp-typescript');

var tsProject = ts.createProject('tsconfig.json', {
  typescript: require('typescript'),
  outFile: 'app.js'
});

gulp.task('tscompile', function () {
  var tsResult = gulp.src('./app/**/*.ts')
                     .pipe(ts(tsProject));

  return tsResult.js.pipe(gulp.dest('./dist'));
});

peut être combiné avec un autre traitement:

à uglify choses compilé le fichier d'enregistrement des fichiers
pour créer un app.js fichier
pour créer un vendor.js fichier pour bibliothèques tierces
pour créer un fichier boot.js pour importer le module qui bootstrap l'application. Ce fichier doit être inclus à la fin de la page (lorsque toute la page est chargée).
pour mettre à jour le index.html pour tenir compte de ces deux fichiers

les dépendances suivantes sont utilisées dans les tâches gulfp:

gulfp-concat
gulfp-html-remplacer
gulp-tapuscrit
gulp-uglify

voici un exemple qui pourrait être adapté.

créer app.min.js fichier

gulp.task('app-bundle', function () {
  var tsProject = ts.createProject('tsconfig.json', {
    typescript: require('typescript'),
    outFile: 'app.js'
  });

  var tsResult = gulp.src('app/**/*.ts')
                   .pipe(ts(tsProject));

  return tsResult.js.pipe(concat('app.min.js'))
                .pipe(uglify())
                .pipe(gulp.dest('./dist'));
});

créer vendors.min.js fichier

gulp.task('vendor-bundle', function() {
  gulp.src([
    'node_modules/es6-shim/es6-shim.min.js',
    'node_modules/systemjs/dist/system-polyfills.js',
    'node_modules/angular2/bundles/angular2-polyfills.js',
    'node_modules/systemjs/dist/system.src.js',
    'node_modules/rxjs/bundles/Rx.js',
    'node_modules/angular2/bundles/angular2.dev.js',
    'node_modules/angular2/bundles/http.dev.js'
  ])
  .pipe(concat('vendors.min.js'))
  .pipe(uglify())
  .pipe(gulp.dest('./dist'));
});

créer boot.min.js fichier

gulp.task('boot-bundle', function() {
  gulp.src('config.prod.js')
    .pipe(concat('boot.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));
 });

Le config.prod.js contient tout simplement le suivant:

 System.import('boot')
    .then(null, console.error.bind(console));

mise à Jour index.html fichier

gulp.task('html', function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
      'vendor': 'vendors.min.js',
      'app': 'app.min.js',
      'boot': 'boot.min.js'
    }))
    .pipe(gulp.dest('dist'));
});

le index.html ressemble à ce qui suit:

<html>
  <head>
    <!-- Some CSS -->

    <!-- build:vendor -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <!-- endbuild -->

    <!-- build:app -->
    <script src="config.js"></script>
    <!-- endbuild -->
  </head>

  <body>
    <my-app>Loading...</my-app>

    <!-- build:boot -->
    <!-- endbuild -->
  </body>
</html>

notez que le System.import('boot'); doit être fait à la fin du corps pour attendre que tous les composants de votre app soient enregistrés à partir du fichier app.min.js .

Je ne décris pas ici la façon de gérer la minification CSS et HTML.

score 28 · Answer 2

Vous pouvez utiliser angular2-cli commande build

ng build -prod

https://github.com/angular/angular-cli/wiki/build#bundling

bâtit créé avec le - prod drapeau via ng build -prod ou ng serve -prod regrouper toutes les dépendances dans un single file , et faire usage de tree-shaking techniques.

mise à Jour

cette réponse a été soumise lorsque angular2 était dans rc4

j'avais essayé à nouveau sur angular-cli beta21 et angular2 ^2.1.0 et il fonctionne comme prévu

cette réponse nécessite d'initialiser l'application avec angular-cli vous pouvez utiliser

ng new myApp

Ou sur un existant

ng init

mise à jour 08/06/2018

pour angular 6 la syntaxe est différent.

ng build --prod --build-optimizer

cocher la Case documentation

score 12 · Answer 3

vous pouvez construire un angle 2 (2.0.0-rc.1) projet en dactylographie en utilisant SystemJS avec Gulp et SystemJS-Builder .

ci-Dessous est une version simplifiée de la façon de construire, bundle, et rapetisser Tour des Héros de course 2.0.0-rc.1 ( source , live exemple ).

gulffile.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var typescript = require('gulp-typescript');
var systemjsBuilder = require('systemjs-builder');

// Compile TypeScript app to JS
gulp.task('compile:ts', function () {
  return gulp
    .src([
        "src/**/*.ts",
        "typings/*.d.ts"
    ])
    .pipe(sourcemaps.init())
    .pipe(typescript({
        "module": "system",
        "moduleResolution": "node",
        "outDir": "app",
        "target": "ES5"
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('app'));
});

// Generate systemjs-based bundle (app/app.js)
gulp.task('bundle:app', function() {
  var builder = new systemjsBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'app/app.js');
});

// Copy and bundle dependencies into one file (vendor/vendors.js)
// system.config.js can also bundled for convenience
gulp.task('bundle:vendor', function () {
    return gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/es6-promise/dist/es6-promise.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/systemjs/dist/system.src.js',
      ])
        .pipe(concat('vendors.js'))
        .pipe(gulp.dest('vendor'));
});

// Copy dependencies loaded through SystemJS into dir from node_modules
gulp.task('copy:vendor', function () {
  gulp.src(['node_modules/rxjs/**/*'])
    .pipe(gulp.dest('public/lib/js/rxjs'));

  gulp.src(['node_modules/angular2-in-memory-web-api/**/*'])
    .pipe(gulp.dest('public/lib/js/angular2-in-memory-web-api'));
  
  return gulp.src(['node_modules/@angular/**/*'])
    .pipe(gulp.dest('public/lib/js/@angular'));
});

gulp.task('vendor', ['bundle:vendor', 'copy:vendor']);
gulp.task('app', ['compile:ts', 'bundle:app']);

// Bundle dependencies and app into one file (app.bundle.js)
gulp.task('bundle', ['vendor', 'app'], function () {
    return gulp.src([
        'app/app.js',
        'vendor/vendors.js'
        ])
    .pipe(concat('app.bundle.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./app'));
});

gulp.task('default', ['bundle']);

du système.config.js

var map = {
  'app':                                'app',
  'rxjs':                               'vendor/rxjs',
  'zonejs':                             'vendor/zone.js',
  'reflect-metadata':                   'vendor/reflect-metadata',
  '@angular':                           'vendor/@angular'
};

var packages = {
  'app':                                { main: 'main', defaultExtension: 'js' },
  'rxjs':                               { defaultExtension: 'js' },
  'zonejs':                             { main: 'zone', defaultExtension: 'js' },
  'reflect-metadata':                   { main: 'Reflect', defaultExtension: 'js' }
};

var packageNames = [
  '@angular/common',
  '@angular/compiler',
  '@angular/core',
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@angular/router-deprecated',
  '@angular/testing',
  '@angular/upgrade',
];

packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

System.config({
  map: map,
  packages: packages
});

score 1 · Answer 4

Voici mon boilerplate MEA2N pour Angular 2: https://github.com/simonxca/mean2-boilerplate

c'est une simple bobine qui utilise tsc pour assembler les choses. (Utilise en fait grunt-ts , qui à son cœur est juste la commande tsc .) No Wekpack, etc. nécessaire.

que vous utilisiez ou non grunt, l'idée est:

écrivez votre app dans un dossier appelé ts/ (exemple: public/ts/ )
utilisez tsc pour miroir la structure de répertoire de votre dossier ts/ dans un dossier js/ et juste des fichiers de référence dans le dossier js/ dans votre dossier index.html .

Pour obtenir grunt-ts de travailler (il devrait y avoir un équivalent de commande pour la plaine tsc, Gulp, etc.) , vous avez une propriété dans votre tsconfig.json appelé "outDir": "../js" , et référence dans votre gruntfile.js avec:

grunt.initConfig({
  ts: {
    source: {tsconfig: 'app/ts/tsconfig.json'}
  },
  ...
});

puis lancer grunt ts , qui prendra votre application dans public/ts/ et miroir de public/js/ .

là. Super facile à comprendre. Pas la meilleure approche, mais bien pour commencer.

score 1 · Answer 5

la façon la plus facile que j'ai trouvé pour regrouper RC1 angulaire pour systemJs est d'utiliser gulp et systemjs-builder :

gulp.task('bundle', function () {
    var path = require('path');
    var Builder = require('systemjs-builder');

    var builder = new Builder('/node_modules');

    return builder.bundle([
        '@angular/**/*.js'
        ], 
        'wwwroot/bundle.js', 
        { minify: false, sourceMaps: false })
        .then(function () {
            console.log('Build complete');
        })
        .catch(function (err) {
            console.log('Build error');
            console.log(err);
        });
});

tel que souligné dans les commentaires, systemJs présente actuellement des problèmes lorsqu'il s'agit de grouper des composants en utilisant moduleId: module.id

https://github.com/angular/angular/issues/6131

la recommandation actuelle (angular 2 rc1) semble être d'utiliser des chemins explicites i.e. moduleId: '/app/path/'

score 0 · Answer 6

j'ai utilisé expressjs sur le backend pour servir mon projet ng2. Vous pouvez le vérifier à partir de ma page github: https://github.com/echonax/ng2-beta-and-test-framework

score 0 · Answer 7

Sous Angle.site Web des OI, dans la section "Advanced/Deployment", il est recommandé que le moyen le plus simple de déployer soit de "copier l'environnement de développement sur le serveur".

passez par la section Sous: déploiement le plus simple possible. Les fichiers finaux du projet sont affichés dans la section code. Notez qu'il configure déjà le code pour charger les fichiers package npm à partir du web (au lieu du dossier local npm_modules).
assurez-vous qu'il fonctionne sur votre ordinateur local (npm start). Ensuite, sous le dossier projet, copiez tout ce qui se trouve sous le sous-dossier '/src' dans le seau S3 que vous avez créé. Vous pouvez utiliser le glisser-déposer pour copier, pendant ce processus, vous obtenez l'option de sélectionner le paramètre de permission pour les fichiers, assurez-vous de les rendre "lisible" à "tout le monde".
sous l'onglet "Propriétés", recherchez le panneau "hébergement de site Web statique" , case 'Utiliser ce seau de site web hôte", et spécifiez l'indice.html' à la fois de l'Indice de document et le document d'Erreur.
cliquez sur le site Web statique Endpoint, votre projet bien être en cours d'exécution!

Las etiquetas más populares

Comment déployer réellement une application 2 + Typescript + systemjs?

7 réponses

mise à Jour

mise à jour 08/06/2018