I am developing an application in Angular 2, I need to put it into production, but the loading time is very high, and it performs 243 request.
Is it possible to reduce the amount of request? How to do?
This is index.html
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="../css/main.css">
<link href="libs/primeng/resources/themes/omega/theme.css" rel="stylesheet" type="text/css" />
<link href="libs/primeng/resources/primeng.min.css" rel="stylesheet" type="text/css" />
<link href="libs/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="libs/core-js/client/shim.min.js"></script>
<script src="libs/zone.js/dist/zone.js"></script>
<script src="libs/reflect-metadata/Reflect.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'es', includedLanguages: 'ar,de,el,en,es,fr,hi,it,ja,pt,ru,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app><div class="loading-center"><span>Cargando</span></div></my-app>
</body>
</html>
this is a system.conf.js file
var isPublic = typeof window != "undefined";
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': (isPublic)? '@angular' : 'node_modules/@angular',
'rxjs': (isPublic)? 'rxjs' : 'node_modules/rxjs',
'angular2-jwt': '../libs/angular2-jwt/angular2-jwt.js',
'primeng': '../libs/primeng'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-jwt': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade'
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
package.json
{
"name": "angular2-express-mongo",
"version": "1.0.0",
"description": "Angular2, Mongo, Gulp, Typescript and Express",
"scripts": {
"clean": "gulp clean",
"compile": "gulp compile",
"build": "gulp build",
"deploy": "concurrently --kill-others \"gulp watch\" \"gulp start\"",
"postinstall": "gulp installTypings"
},
"keywords": [
"Angular2",
"Express",
"Quick Start",
"Gulp",
"Typescript"
],
"author": "Santiago",
"license": "MIT",
"dependencies": {
"@angular/common": "~2.2.0",
"@angular/compiler": "~2.2.0",
"@angular/compiler-cli": "0.6.0",
"@angular/core": "~2.2.0",
"@angular/forms": "~2.2.0",
"@angular/http": "~2.2.0",
"@angular/platform-browser": "~2.2.0",
"@angular/platform-browser-dynamic": "~2.2.0",
"@angular/router": "~3.2.0",
"@angular/upgrade": "~2.2.0",
"angular-in-memory-web-api": "~0.1.15",
"angular2-jwt": "^0.1.22",
"body-parser": "^1.15.2",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"express": "^4.14.0",
"font-awesome": "^4.7.0",
"jsonwebtoken": "^7.1.9",
"jwt-decode": "^2.0.1",
"mongoose": "^4.6.1",
"nodemailer": "^2.7.0",
"primeng": "^1.0.0",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.26"
},
"devDependencies": {
"@types/core-js": "^0.9.32",
"concurrently": "^2.1.0",
"method-override": "^2.3.6",
"typescript": "~2.0.3",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-nodemon": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-tslint": "^4.3.3",
"gulp-typescript": "^2.13.6",
"gulp-typings": "^2.0.0",
"del": "^2.2.0",
"tslint": "^3.5.0",
"ts-node": "1.3.0",
"run-sequence": "^1.2.1"
}
}
gulpfile.js
"use strict";
const gulp = require("gulp"),
del = require("del"),
tsc = require("gulp-typescript"),
sourcemaps = require('gulp-sourcemaps'),
tsProject = tsc.createProject("tsconfig.json"),
tslint = require('gulp-tslint'),
concat = require('gulp-concat'),
runSequence = require('run-sequence'),
nodemon = require('gulp-nodemon'),
gulpTypings = require("gulp-typings");
/**
* Remove build directory.
*/
gulp.task('clean', (cb) => {
return del(["dist"], cb);
});
/**
* Build Express server
*/
gulp.task('build:server', function () {
var tsProject = tsc.createProject('server/tsconfig.json');
var tsResult = gulp.src('server/src/**/*.ts')
.pipe(sourcemaps.init())
.pipe(tsc(tsProject))
return tsResult.js
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/server'))
});
gulp.task('build:client', function () {
var tsProject = tsc.createProject('client/tsconfig.json');
var tsResult = gulp.src('client/**/*.ts')
.pipe(sourcemaps.init())
.pipe(tsc(tsProject))
return tsResult.js
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/client'))
});
/**
* Lint all custom TypeScript files.
*/
gulp.task('tslint', () => {
return gulp.src("client/app/**/*.ts")
.pipe(tslint())
.pipe(tslint.report('prose'));
});
/**
* Compile TypeScript sources and create sourcemaps in build directory.
*/
gulp.task("compile", ["tslint"], () => {
let tsResult = gulp.src("client/**/*.ts")
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));
return tsResult.js
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("dist/client"));
});
/**
* Copy all resources that are not TypeScript files into build directory. e.g. index.html, css, images
*/
gulp.task("clientResources", () => {
return gulp.src(["client/**/*", "!**/*.ts", "!client/typings", "!client/typings/**", "!client/*.json"])
.pipe(gulp.dest("dist/client"));
});
/**
* Copy bin directory for www
*/
gulp.task("serverResources", () => {
return gulp.src(["server/src/bin/**"])
.pipe(gulp.dest("dist/server/bin"));
});
/**
* Copy all required libraries into build directory.
*/
gulp.task("libs", () => {
return gulp.src([
'core-js/client/**',
'zone.js/dist/zone.js',
'reflect-metadata/Reflect.js',
'reflect-metadata/Reflect.js.map',
'systemjs/dist/system.src.js',
'font-awesome/css',
'font-awesome/fonts',
'angular2-jwt/**',
'primeng/**'
], { cwd: "node_modules/**" }) /* Glob required here. */
.pipe(gulp.dest("dist/client/libs"));
});
/**
* Copy all required libraries into build directory.
*/
gulp.task("css", () => {
return gulp.src([
'bootstrap/dist/**/**'
], { cwd: "node_modules/**" }) /* Glob required here. */
.pipe(gulp.dest("dist/client/css"));
});
/**
* Install typings for server and client.
*/
gulp.task("installTypings", function () {
var stream = gulp.src(["./server/typings.json", "./client/typings.json"])
.pipe(gulpTypings(null)); //will install all typingsfiles in pipeline.
return stream; // by returning stream gulp can listen to events from the stream and knows when it is finished.
});
/**
* Start the express server with nodemon
*/
gulp.task('start', function () {
nodemon({
script: 'dist/server/bin/www'
, ext: 'html js'
, ignore: ['ignored.js']
, tasks: ['tslint']
})
.on('restart', function () {
console.log('restarted!')
});
});
/**
* Build the project.
* 1. Clean the build directory
* 2. Build Express server
* 3. Build the Angular app
* 4. Copy the resources
* 5. Copy the dependencies.
*/
gulp.task("build", function (callback) {
runSequence('clean', 'build:server', 'build:client', 'clientResources', 'serverResources', 'libs', 'css', callback);
});
/**
* Watch for changes in TypeScript, HTML and CSS files.
*/
gulp.task('watch', function () {
gulp.watch(["client/**/*.ts"], ['compile']).on('change', function (e) {
console.log('TypeScript file ' + e.path + ' has been changed. Compiling.');
});
gulp.watch(["client/**/*.html", "client/**/*.css"], ['clientResources']).on('change', function (e) {
console.log('Resource file ' + e.path + ' has been changed. Updating.');
});
gulp.watch(["server/src/**/*.ts"], ['compile']).on('change', function (e) {
console.log('TypeScript file ' + e.path + ' has been changed. Compiling.');
});
});
/**
* Build the project.
* 1. Clean the build directory
* 2. Build Express server
* 3. Build the Angular app
* 4. Copy the resources
* 5. Copy the dependencies.
*/
gulp.task("build", function (callback) {
runSequence('clean', 'build:server', 'build:client', 'clientResources', 'serverResources', 'libs', 'css', callback);
});
gulp.task('default', function () {
runSequence('build:server', 'build:client', 'clientResources', 'serverResources', 'libs', 'css', 'watch', 'start');
});
