title: Angular 4 Website loading very slow with lazy loading
body: <p>I am developing a website with more than 100 pages, out of which I have created approximately 50 pages. My problem is that the initial loading time of the website takes more than 30 secs to load completely. It also shows 2.8 MB data transferred when I check it in the network tab. I have attached the screen for the same</p>
  
  <p><a href="https://i.stack.imgur.com/EyPlZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EyPlZ.png" alt="Network tab in Browser"></a></p>
  
  <p>I am also adding my package.json, system.config.js and ts.config file for the same.</p>
  
  <pre><code>{
    "name": "frontend",
    "version": "1.0.0",
    "description": "Subsource",
    "scripts": {
      "start": "tsc &amp;&amp; concurrently \"tsc -w\" \"lite-server\" ",
      "docker-build": "docker build -t ng2-quickstart .",
      "docker": "npm run docker-build &amp;&amp; docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
      "pree2e": "npm run webdriver:update",
      "e2e": "tsc &amp;&amp; concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
      "lint": "tslint ./app/**/*.ts -t verbose",
      "lite": "lite-server",
      "postinstall": "typings install",
      "test": "tsc &amp;&amp; concurrently \"tsc -w\" \"karma start karma.conf.js\"",
      "test-once": "tsc &amp;&amp; karma start karma.conf.js --single-run",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "typings": "typings",
      "webdriver:update": "webdriver-manager update"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "@angular/animations": "^4.0.1",
      "@angular/common": "~4.0.1",
      "@angular/compiler": "~4.0.1",
      "@angular/core": "~4.0.1",
      "@angular/forms": "~4.0.1",
      "@angular/http": "~4.0.1",
      "@angular/platform-browser": "~4.0.1",
      "@angular/platform-browser-dynamic": "~4.0.1",
      "@angular/router": "~4.1.0",
      "@angular/upgrade": "~4.0.1",
      "@swimlane/ngx-dnd": "^3.1.0",
      "@types/jquery": "^3.2.17",
      "angular-froala-wysiwyg": "^2.7.5",
      "angular2-cookie": "^1.2.6",
      "angular2-gmaps": "0.0.8",
      "angular2-signature-pad": "^1.0.2",
      "angular2-tag-input": "^1.2.3",
      "bootstrap": "^3.3.7",
      "chart.js": "^2.7.2",
      "core-js": "^2.4.1",
      "hammerjs": "^2.0.8",
      "jquery": "^3.2.1",
      "ng2-datetime": "^1.4.0",
      "ng2-dnd": "^5.0.2",
      "ng2-file-upload": "^1.3.0",
      "ng2-tag-input": "^1.4.1",
      "ngx-bootstrap": "^2.0.0-rc.0",
      "ngx-chips": "^1.6.5",
      "ngx-loading": "^1.0.14",
      "ngx-tags-input": "^1.1.1",
      "primeng": "^5.2.0-rc.1",
      "reflect-metadata": "^0.1.8",
      "rxjs": "^5.0.1",
      "systemjs": "0.19.39",
      "tslib": "^1.9.0",
      "zone.js": "^0.8.4"
    },
    "devDependencies": {
      "canonical-path": "0.0.2",
      "concurrently": "^3.0.0",
      "es6-promise-loader": "^1.0.2",
      "http-server": "^0.9.0",
      "jasmine-core": "~2.5.2",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-htmlfile-reporter": "^0.3.4",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "lite-server": "^2.2.2",
      "lodash": "^4.16.2",
      "protractor": "^3.3.0",
      "rimraf": "^2.5.4",
      "tslint": "^3.15.1",
      "typescript": "^2.0.3",
      "typings": "^1.4.0",
      "webpack": "^2.1.0-beta.22"
    },
    "repository": {}
  }
  </code></pre>
  
  <p>System.config</p>
  
  <pre><code>/** 
   * System configuration for Angular samples  
   **/
  (function (global) {
      System.config({
          paths: {
              // paths serve as alias  
              'npm:': '../node_modules/'
          },
          // map tells the System loader where to look for things  
          map: {
              // our app is within the app folder  
              app: 'startup',
  
              // angular bundles  
              '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
              '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
              '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
              '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
              '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
              '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
              '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
              '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
              '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
              '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
              '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
              '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
  
              'angular2-signature-pad': 'npm:angular2-signature-pad/bundles/angular2-signature-pad.umd.min.js',
  
              // other libraries  
              'jquery': 'npm:jquery/dist/jquery.js',
              'ngx-loading': 'npm:ngx-loading/bundles/ngx-loading.umd',
              'rxjs': 'npm:rxjs',
              'angular2-cookie': 'npm:angular2-cookie',
              'lodash': 'npm:lodash/lodash.js',
              'primeng': 'npm:primeng',
  
              'primeng/growl': 'npm:primeng/growl',
              'ng2-dnd': 'npm:ng2-dnd/bundles/ng2-dnd.umd',
              'froala-editor': 'npm:froala-editor/js/froala_editor.pkgd.min.js',
              'angular-froala-wysiwyg': 'npm:angular-froala-wysiwyg/bundles/angular-froala-wysiwyg.umd',
              'ngx-chips': 'npm:ngx-chips/bundles/ngx-chips.umd',
              'ng2-material-dropdown': 'npm:ng2-material-dropdown/dist/ng2-dropdown.bundle',
              'ng2-file-upload': 'npm:ng2-file-upload/bundles/ng2-file-upload.umd'
          },
          // packages tells the System loader how to load when no filename and/or no extension  
          packages: {
              app: {
                  main: '../../Startup/MasterStartup.js',
                  defaultExtension: 'js'
              },
              rxjs: {
                  defaultExtension: 'js'
              },
              'angular2-cookie': {
                  main: './core.js',
                  defaultExtension: 'js'
              },
          }
      });
  })(this);
  </code></pre>
  
  <p>TS Config</p>
  
  <pre><code>{
    "compileOnSave": true,
    "compilerOptions": {
      "target": "es2015",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false,
      "noStrictGenericChecks": true
    }
  }
  </code></pre>
  
  <p>Routing Page Example</p>
  
  <pre><code>import { Component } from "@angular/core"
  
  export const MainRoutes = [
  { path: 'Dashboard', loadChildren: "../Modules/Dashboard/DashboardModule#DashboardModule" },
  
  //Preference
  { path: 'AccountSettings', loadChildren: "../Modules/AccountSettings/AccountSettingsModule#AccountSettingsModule" },
  { path: 'Company', loadChildren: "../Modules/AccountSettings/Company/CompanyModule#CompanyModule" },
  { path: 'CompanyDetails', loadChildren: "../Modules/AccountSettings/Company/CompanyDetailsModule#CompanyDetailsModule" },
  { path: 'CompanyDetails/:CompanyGUID', loadChildren: "../Modules/AccountSettings/Company/CompanyDetailsModule#CompanyDetailsModule" },
  //{ path: 'UserRole', loadChildren: "../Modules/AccountSettings/UserRole/UserRoleModule#UserRoleModule" },
  { path: 'UserRoleDetails', loadChildren: "../Modules/AccountSettings/UserRole/UserRoleDetailsModule#UserRoleDetailsModule " },
  </code></pre>
  
  <p>What i have noticed it loads all the pages which takes too long. And loading time increases too much. So can someone provide me a solution for this to decrease the loading time?</p>
  
  <p>Thank you in advance</p>