navigationend - Angular2, Gulp, SystemJS-> Problema con la extensión predeterminada

title angular 6

Question

Estoy usando Angular2 con SystemJS, que funcionó bastante bien durante el desarrollo. Ahora quería implementar mi primera versión compilada usando gulp.

Para aclarar, utilizo el siguiente archivo systemJS:

(function(global) {

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

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    ''app'':                            { format: ''register'', defaultExtension: ''js'' },
    ''rxjs'':                       { defaultExtension: ''js'' },
    ''angular2-in-memory-web-api'': { 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 = {
    baseURL: "/",
    defaultJSExtension : true,
    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);

Y el siguiente gulpfile:

const gulp = require(''gulp'');
const del = require(''del'');
const typescript = require(''gulp-typescript'');
const tscConfig = require(''./tsconfig.json'');
const tsconfig = require(''tsconfig-glob'');
const sourcemaps = require(''gulp-sourcemaps'');

// clean the contents of the distribution directory
gulp.task(''clean'', function () {
  return del(''dist/**/*'');
});

// TypeScript compile
gulp.task(''compile'', [''clean''], function () {
  return gulp
    .src(tscConfig.files)
    .pipe(sourcemaps.init())          // <--- sourcemaps
    .pipe(typescript(tscConfig.compilerOptions))
    .pipe(sourcemaps.write(''.''))      // <--- sourcemaps
    .pipe(gulp.dest(''dist''));
});

// copy dependencies
gulp.task(''copy:libs'', [''clean''], function() {
  return gulp.src([
      ''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/router.dev.js'',
      ''node_modules/chart.js/dist/Chart.bundle.min.js'',
      ''node_modules/es6-shim/es6-shim.min.js'',
      ''node_modules/zone.js/dist/zone.js'',
      ''node_modules/reflect-metadata/Reflect.js'',
      ''node_modules/systemjs/dist/system.src.js'',
      ''TcAdsWebService.js''
    ])
    .pipe(gulp.dest(''dist/lib''))
});

gulp.task(''copy:modules'',[''clean''],function() {
  return gulp.src([
    ''./node_modules/@angular/**/*'',
    ''./node_modules/rxjs/**/**'',
    ''./node_modules/angular2-in-memory-web-api/**/*'',
    ''./node_modules/ng2-charts/**/*'',
    ''./node_modules/ng2-cookies/**/*''
  ],{base:''./''}).pipe(gulp.dest(''dist/lib''));
});

gulp.task(''copy:pics'',[''clean''], function () {
  return gulp.src([''pics/**/*''],{base:''./''}).pipe(gulp.dest(''dist/css''));
})

gulp.task(''copy:css'',[''clean''],function() {
  return gulp.src([''css/**/*''],{base:''./''}).pipe(gulp.dest(''dist/css''));
});

gulp.task(''copy:js'',[''clean''],function() {
  return gulp.src([''js/**/*''],{base:''./''}).pipe(gulp.dest(''dist/js''));
});


gulp.task(''copy:systemJS'',[''clean''],function() {
  return gulp.src([''systemjs.config.js'']).pipe(gulp.dest(''dist''));
});


// copy static assets - i.e. non TypeScript compiled source
gulp.task(''copy:assets'', [''clean''], function() {
  return gulp.src([''app/**/*'', ''index.html'', ''styles.css'', ''!app/**/*.ts''], { base : ''./'' })
    .pipe(gulp.dest(''dist''))
});

gulp.task(''tsconfig-glob'', function () {
  return tsconfig({
    configPath: ''.'',
    indent: 2
  });
});

gulp.task(''build'', [''tsconfig-glob'',''compile'', ''copy:pics'', ''copy:js'', ''copy:css'', ''copy:systemJS'',''copy:modules'',''copy:libs'', ''copy:assets'']);
gulp.task(''default'', [''build'']);

Después de compilar la aplicación angular2 y cargarla en el navegador, aparece el siguiente error en la consola:

Unable to load script http://localhost:81/app/app.component

lo que indica que falta la extensión .js de los archivos compilados. Estoy bastante seguro de que

''app'':                            { format: ''register'', defaultExtension: ''js'' },

en realidad debería exigirle al compilador que le importe la extensión .js en la carpeta de la aplicación, pero no es así. Este es mi primer proyecto angular2 y mi primer compilación de gulp y estoy bastante seguro de que me falta algo de aspecto básico, pero no puedo encontrarlo en mi código.

Answer 1

Dada su configuración, debe usar systemjs-builder para agrupar su aplicación para producción. Acepta su configuración SystemJS por lo que no es necesaria una configuración adicional. Agrupa sus módulos en un solo archivo, con opciones para minimizar, modificar, etc.

Esto está haciendo las cosas del modo "módulo es6", haciendo un mejor uso de nuestro cargador de módulos en lugar de copiar / pegar módulos como lo haríamos en una aplicación javascript tradicional (ES5).

Al hacer esto, podemos sacar la carga dinámica de la página de índice y simplemente usar una etiqueta de script apuntando al paquete, esto debería acelerar drásticamente los tiempos de carga y minimizar lo que el usuario debe descargar para cargar su página. Tampoco se necesita copiar node_modules.

Dada una estructura de carpeta:

src
|-- app
|   |-- main.ts
|   |-- index.html
|   |-- bundle.min.js
|-- system.config.js
|-- node_modules
|-- tsconfig.json

Incluso puede hacer todo esto con una sola tarea.

Tarea: (requiere yardas):

var SystemBuilder = require(''systemjs-builder'');
var argv = require(''yargs'').argv;
var builder = new SystemBuilder();

gulp.task(''bundle'', function () {
    builder.loadConfig(''./system.config.js'')
        .then(function () {
            var outputFile = argv.prod ? ''./src/app/bundle.min.js'' : ''./src/app/bundle.js'';
            return builder.buildStatic(''app'', outputFile, {
                minify: argv.prod,
                mangle: argv.prod,
                rollup: argv.prod
            });
        })
        .then(function () {
            console.log(''bundle built successfully!'');
        });
});

Ejecuta esta tarea:

gulp bundle

o

gulp bundle --prod

index.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <base href="/" />
  <title>Your App</title>

  <link rel="stylesheet" href=''styles/bootstrap.min.css'' />
  <script src="/bundle.js"></script>
</head>

<body>
  <your-root-component>
  </your-root-component>
</body>

</html>

system.config.js:

(function (global) {

  var config = {
    compiler: "typescript",
    map: {
      ''jquery'': ''node_modules/jquery/dist'',
      ''bootstrap'': ''node_modules/bootstrap/dist/js'',
      "reflect-metadata": "node_modules/reflect-metadata",
      "zone": "node_modules/zone.js/dist",
      "crypto": "node_modules/crypto",
      ''rxjs'': ''node_modules/rxjs'',
      ''angular2-in-memory-web-api'': ''node_modules/angular2-in-memory-web-api'',
      ''@angular'': ''node_modules/@angular'',
      ''moment'': ''node_modules/moment'',
      ''angular2-moment'': ''node_modules/angular2-moment'',
      ''app'': ''src/app'',
    },
    meta: {
      ''node_modules/bootstrap/dist/js/bootstrap.js'': {
        format: ''global'',
        deps: [''jquery'']
      }
    },
    packages: {
      ''jquery'': { main: ''jquery.js'', defaultExtension: ''js'' },
      ''bootstrap'': { main: ''bootstrap.js'', defaultExtension: ''js'' },
      ''zone'': { main: ''zone.js'', defaultExtension: ''js'' },
      ''reflect-metadata'': { main: ''Reflect.js'', defaultExtension: ''js'' },
      ''crypto'': { main: ''sha1.js'', defaultExtension: ''js'' },
      ''rxjs'': { main: ''Rx.js'', defaultExtension: ''js'' },
      ''moment'':{main: ''moment.js'', defaultExtension: ''js''},
      ''angular2-moment'': { main: ''index.js'', defaultExtension: ''js'' },
      ''app'': { main: ''main.js'', defaultExtension: ''js'' },

      ''@angular/common'': { main: ''index.js'', defaultExtension: ''js'' },
      ''@angular/compiler'': { main: ''index.js'', defaultExtension: ''js'' },
      ''@angular/core'': { main: ''index.js'', defaultExtension: ''js'' },
      ''@angular/http'': { main: ''index.js'', defaultExtension: ''js'' },
      ''@angular/platform-browser'': { main: ''index.js'', defaultExtension: ''js'' },
      ''@angular/platform-browser-dynamic'': { main: ''index.js'', defaultExtension: ''js'' },
      ''@angular/router'': { main: ''index.js'', defaultExtension: ''js'' },
      ''@angular/testing'': { main: ''index.js'', defaultExtension: ''js'' },
      ''@angular/upgrade'': { main: ''index.js'', defaultExtension: ''js'' },
      ''@angular/forms'': { main: ''index.js'', defaultExtension: ''js'' },
    }
  }

  System.config(config);

})(this);

Con todo esto dicho: creo que su sección de paquetes:

  var packages = {
    ''app'':                            { format: ''register'', defaultExtension: ''js'' },
    ''rxjs'':                       { defaultExtension: ''js'' },
    ''angular2-in-memory-web-api'': { defaultExtension: ''js'' }
  };

debiera ser:

  var packages = {
    ''app'':                            { main: ''main.js'', defaultExtension: ''js'' },
    ''rxjs'':                       { main: ''Rx.js'', defaultExtension: ''js'' },
    ''angular2-in-memory-web-api'': { main: ''index.js'', defaultExtension: ''js'' }
  };

main.js siendo cualquier archivo que contenga su función de arranque para angular2.