web-dev-qa-db-fra.com

Comment créer un dossier de construction angulaire 2 lors de l'utilisation de systemjs.config.js

Comment créer un dossier de construction angulaire 2 lors de l'utilisation de systemjs.config.js

Mon application fonctionne bien localement. J'ai besoin d'aide pour mon fichier gulp afin de pouvoir récupérer les modules de nœuds requis et les déplacer dans le dossier dist prêts pour le déploiement.

Ceci est mon dossier gulp: 

const gulp = require('gulp');
const ts = require('gulp-TypeScript');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
var htmlreplace = require('gulp-html-replace');
var addsrc = require('gulp-add-src');
var sass = require('gulp-sass');    
var inject = require('gulp-inject');
var del = require('delete');
var minifyCss = require('gulp-minify-css');    
var CacheBuster = require('gulp-cachebust');
var cachebust = new CacheBuster();

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

  var tsResult = gulp.src([
    'node_modules/angular2/typings/browser.d.ts',
    'typings/main/ambient/firebase/firebase.d.ts',
    'app/**/*.ts'
  ])
    .pipe(ts(tsProject));

  return tsResult.js.pipe(addsrc.append('config-prod.js'))
                    .pipe(concat('app.min.js'))
                    .pipe(uglify())
                    .pipe(gulp.dest('./dist'));
});

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

gulp.task('add-styles', function() {
    gulp.src([
      'css/animate.css',
      'css/bootstraptheme.css',
      'sass/styles.scss'
    ])    
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('styles.min.css'))
    .pipe(minifyCss({compatibility: 'ie8'}))
    .pipe(cachebust.resources())
    .pipe(gulp.dest('dist/'))   
});

gulp.task('add-images', function() {
    gulp.src([
      'images/*.png'
    ])    
    .pipe(gulp.dest('dist/images'))     
});

gulp.task('add-bits', function() {
    gulp.src([
      'favicon*.*',
      'sitemap.xml',
      'robots.txt',
      'firebase.json'
    ])    
    .pipe(gulp.dest('dist/'))     
});

gulp.task('html-replace',[ 'app-bundle', 'vendor-bundle', 'add-styles', 'add-images', 'add-bits'], function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
        'vendor': 'vendors.min.js',
        'app': 'app.min.js'
    }))
    .pipe(gulp.dest('dist'));
});

Ceci est une capture d'écran de mon dossier dist actuel prêt au déploiement en direct. Mais il manque les modules de nœuds requis:

 enter image description here

Ceci est mon fichier de configuration: 

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'angular2-google-maps': { 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',
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

Ce sont les modules de nœud qui me manquent et qui doivent être ajoutés au dossier dist et être liés aux dossiers dist index.html 

  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',
  ];

Ceci est mon fichier d'index: 

<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>App</title>
    <base href="/"></base>  

    <!-- Css libs -->
    <link rel="stylesheet" type="text/css" href="/css/animate.css" /> 
    <link rel="stylesheet" type="text/css" href="/css/bootstraptheme.css" />     
    <link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300italic,300,400italic,700italic,900,700,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <!-- build:css -->  
        <link rel="stylesheet" href="css/styles.css"> 
    <!-- endbuild -->

    <!-- Js libs -->
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="https://www.amcharts.com/lib/3/pie.js"></script>
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>   
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>    

    <!-- build:vendor -->    
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="node_modules/angular2-google-maps/bundles/angular2-google-maps.js"></script>
    <!-- endbuild -->

    <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>

    <!-- build:app -->
    <script src="config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
    <!-- endbuild -->    

  </head>

  <body id="container">
    <my-app>Loading...</my-app>   
  </body>
</html>
angulargulpsystemjs
11
AngularM

Votre gulp-task fournisseur faisceau suggère que vous voulez un paquet des dépendances utilisées dans votre application. Si vous pouvez utiliser system-js-builder, ce sera très facile.

  • Ce sera beaucoup plus petit que le fagot ou de angulaire rxjs

Il suffit de lancer cette

Il va inclureangularetrxjsdépendances

var gulp = require('gulp'),
  Builder = require('systemjs-builder');


gulp.task('bundle-dependencies', function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'config.js'); // config.js is the name of systemjs config file

  return builder
    .bundle('app/boot.js - [app/**/*.js]', 'path/to/put/dependencies.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

pour un guide complet voir mon autre réponse Compiler Angular 2 fichiers node_modules dans un seul fichier .

Note: path/to/put/ est le chemin où vous souhaitez exporter le paquet.

Si vous voulez des fichiers des dépendances, je suis désolé. Mais je vous suggère de créer un intead bundle d'avoir des fichiers séparés.

2
Ankit Singh

Essaye ça:

//in the gulpfile.js
gulp.task("angular", () => {
    return gulp.src([ '@angular/**','rxjs/**']).pipe(gulp.dest("./dist"));    
});

// in the config.js
var map = {
   'app':                        'dist', //I guess that the problem was here
   'rxjs':                       'dist/rxjs',
   'angular2-in-memory-web-api': 'dist/angular2-in-memory-web-api',
   '@angular':                   'dist/@angular'
};
2
Roman Koliada

Voici,

gulpfile 

   gulp.task('vendor', function () {
      var includeLibrary = [
          "./node_modules/systemjs/dist/system.src.js",
          "./node_modules/es6-shim/es6-shim.min.js",
          "./node_modules/zone.js/dist/zone.js",
          "./node_modules/reflect-metadata/Reflect.js",        
          "./node_modules/rxjs/**/*.js",
          "./node_modules/angular2-in-memory-web-api/**/*.js",
          "./node_modules/@angular/**/*.js",
          "./node_modules/crypto-js/crypto-js.js"
      ]
      return gulp.src(includeLibrary, { base: './node_modules/' })
       .pipe(gulp.dest('dist/lib/'));
   });

system.config 

   let map: any = {
     "app": "",
     "rxjs": "lib/rxjs",
     "angular2-in-memory-web-api": "lib/angular2-in-memory-web-api",
     "@angular": "lib/@angular",
     "reflect-metadata": "lib/Reflect.js",
     "crypto": "lib/crypto-js/crypto-js.js"
   };

index.html 

     <head>
       <base href="/dist/" />
       <title>App Title</title>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">

       <!-- 1. Load libraries -->
       <!-- Polyfill(s) for older browsers -->
       <script src="lib/es6-shim/es6-shim.min.js"></script>

       <script src="lib/zone.js/dist/zone.js"></script>
       <script src="lib/reflect-metadata/Reflect.js"></script>
       <script src="lib/systemjs/dist/system.src.js"></script>
       <!-- 2. Configure SystemJS -->
       <script src="systemjs.config.js"></script>

       <script>

        System.import('app').catch(function(err){ console.error(err);  });
       </script>
    </head>

ci-dessus suppose que votre gulpfile et node_modules sont au même niveau.

J'espère que cela t'aides!!

0
Madhu Ranjan