Angular2 Application Initial load issue. typescript.js file is 4.75MB

Question

I'm using Angular2 for my J2EE Application (Spring MVC). I have implemented Lazy loading , but still its taking more time (around 2 minutes!!! ) to load initially.

There have two big sized files are loading :
typescript.js : 4.75 MB
compiler.umd.js : 0.98 MB

And typescript.js file is not caching. Every reload its downloading again.

My systemjs.config.js file is :

System
        .config({
            transpiler : 'ts',
            typescriptOptions : {
                "target" : "es5",
                "module" : "commonjs",
                "moduleResolution" : "node",
                "sourceMap" : true,
                "emitDecoratorMetadata" : true,
                "experimentalDecorators" : true,
                "lib" : [ "es2015", "dom" ],
                "noImplicitAny" : true,
                "suppressImplicitAnyIndexErrors" : true
            },
            meta : {
                'typescript' : {
                    "exports" : "ts"
                }
            },
            paths : {
                'npm:' : 'uploads/node_modules/'
            },
            map : {
                'app' : 'app',
                '@angular/animations' : 'npm:@angular/animations/bundles/animations.umd.js',
                '@angular/animations/browser' : 'npm:@angular/animations/bundles/animations-browser.umd.js',
                '@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/animations' : 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/router/upgrade' : 'npm:@angular/router/bundles/router-upgrade.umd.js',
                '@angular/forms' : 'npm:@angular/forms/bundles/forms.umd.js',
                '@angular/upgrade' : 'npm:@angular/upgrade/bundles/upgrade.umd.js',
                '@angular/upgrade/static' : 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',


                // other libraries using node_modules
                'rxjs' : 'npm:rxjs',
                'angular-in-memory-web-api' : 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
                'ts' : 'npm:plugin-typescript/lib/plugin.js',
                'typescript' : 'npm:typescript/lib/typescript.js',
                'angular2-datatable' : 'npm:angular2-datatable',
                'lodash' : 'npm:lodash/lodash.js',
                'angular2-datatable-pagination' : 'npm:angular2-datatable-pagination',
                'jquery' : 'lib/jquery/jquery-3.2.0.min.js',
                'ngx-pagination' : 'lib/ngxpagination/ngx-pagination.js',

            },
            packages : {
                app : {
                    defaultExtension : 'ts'
                },
                rxjs : {
                    defaultExtension : 'js'
                },
                'angular2-datatable' : {
                    main : 'index.js',
                    defaultExtension : 'js'
                }
            },
            "scripts" : [ "lib/jquery/jquery-3.2.0.min.js" ]
        });

Is there any way to reduce the size of these two files (typescript.js,compiler.umd.js) ?

Its an e-commerce application. So I should solve this issue. Please share any solution for this issue.

Thank You

Answer 1

I would strongly suggest that you update your Angular 2 project to an Angular 4 project. One of Angular 4's features is that it complies to up to 60% smaller. Angular 2 and 4 are compatible, there are a few things which will break like typeScript and rxjs which will need to be updated as well. This took will take about 2 or 3 hours to complete.

You can also compile using Ahead Of Time Compiler which will also improve speed a bit.

Here is an article to update to angular 4 As the article says, you can run the command:

(Windows)

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

(Linux)

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

All the best!

Answer 2

Well, as far as I know, you can't minify TypeScript. But there are few other solutions, as you can find here :

Is it possible to compile typescript into minified code?

But you should also check your code, and clean all unused methods, imports, ...