Question 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 avec mon fichier gulp pour pouvoir récupérer les modules nodaux requis et les déplacer vers le dossier dist prêt à être déployé.

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 pour le déploiement en direct. Mais il manque les modules de nœud 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œuds que je pense im manquants et doivent être ajoutés au dossier dist et au lien vers les répertoires 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>

11
2018-05-30 12:11


origine


Réponses:


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
2018-06-03 11:52



Votre gulp-task  paquet fournisseur suggère que vous souhaitiez un ensemble de dépendances utilisées dans votre application. Si vous pouvez utiliser system-js-builderça va être très facile.

Il suffit de lancer ce


Ça va inclure angular et rxjs dé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 les fichiers Angular 2 node_modules en un seul fichier.

Remarque:  path/to/put/ est le chemin où vous souhaitez exporter le bundle.


Si vous voulez des fichiers de dépendances, je suis désolé. Mais je suggérerais de créer un paquet au lieu d'avoir des fichiers séparés.


2
2018-06-08 05:10



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 votre gulpfile et node_modules sont au même niveau.

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


0
2018-06-07 14:51