Fix production build issue related to incorrect polyfills

[tschaffter]

The production portal is built and run using:

$ npm run build
$ NODE_ENV=production node dist/server/

Issue

Chrome shows the following issue in the console when accessing http://54.184.40.13:8080:

Uncaught Error: Can't resolve all parameters for t: (?).
    at Ie (compiler.js:2430)
    at t._getDependenciesMetadata (compiler.js:18984)
    at t._getTypeMetadata (compiler.js:18877)
    at t.getNgModuleMetadata (compiler.js:18745)
    at t.getNgModuleSummary (compiler.js:18555)
    at compiler.js:18669
    at Array.forEach (<anonymous>)
    at t.getNgModuleMetadata (compiler.js:18657)
    at t.getNgModuleSummary (compiler.js:18555)
    at compiler.js:18642
    at Array.forEach (<anonymous>)
    at t.getNgModuleMetadata (compiler.js:18620)
    at t._loadModules (compiler.js:26029)
    at t._compileModuleAndComponents (compiler.js:26010)
    at t.compileModuleAsync (compiler.js:25970)
    at t.compileModuleAsync (platform-browser-dynamic.js:143)
    at Ys (core.js:17619)
    at t.bootstrapModule (core.js:17802)
    at HTMLDocument.WO (app.ts:17)

It seems that the issue stem from the polyfills being incorrectly set for the JS files used by the front end client (mainly Typescript, .ts files). One cause of the issue could be the result of upgrading to @babel, updating core-js and other related dependencies. Currently using @babel and [email protected], which is used by default by @babel. [email protected] has been released a few days ago but an initial attempt to use it didn't solve the issue, so I prefer to only change one thing at a time.

[tschaffter]

To try:

• remove primus from the client (and maybe shared.js)
• disable the minimization / unglyfication of the code

[tschaffter]

Disabling uglify does not remove the error, but makes the message clearer:

Uncaught Error: Can't resolve all parameters for ApplicationModule: (?).
    at syntaxError (compiler.js:2430)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:18984)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:18877)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:18745)
    at CompileMetadataResolver.getNgModuleSummary (compiler.js:18555)
    at compiler.js:18669
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:18657)
    at CompileMetadataResolver.getNgModuleSummary (compiler.js:18555)
    at compiler.js:18642
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:18620)
    at JitCompiler._loadModules (compiler.js:26029)
    at JitCompiler._compileModuleAndComponents (compiler.js:26010)
    at JitCompiler.compileModuleAsync (compiler.js:25970)
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
    at compileNgModuleFactory__PRE_R3__ (core.js:17619)
    at PlatformRef.bootstrapModule (core.js:17802)
    at HTMLDocument.main (app.ts:17)

[tschaffter]

Moving the imports from polyfills.ts to app.ts solves the issue as suggested here:

angular-fullstack/generator-angular-fullstack#2770 (comment)

• The Uglifier is not the issue (the issue is still there when disabling it)

Solution

In webpack.make.js, declare polyfills before app in config.entry.

Before:

    if (!TEST) {
        config.entry = {
            polyfills: './client/app/polyfills.ts',
            vendor: [
                'lodash'
            ],
            app: './client/app/app.ts'
        };
    }

Now:

    if (!TEST) {
        config.entry = {
            polyfills: './client/app/polyfills.ts',
            vendor: [
                'lodash'
            ],
            app: './client/app/app.ts'
        };
    }

Here is what I have included at the top of ./poyfills.ts:

// Enable certain polyfills depending on which browsers you need to support
import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';