Uncaught Error: Can't resolve all parameters for e: (?)

[LuisFlip]

• [x] I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.

Item	Version
generator-angular-fullstack	5.0.0 RC4
Node	8.12.0
npm	6.4.1
Operating System	Windows 10

Item	Answer
Transpiler	TypeScript
Markup	HTML
CSS	SCSS
Client Tests	Mocha
DB	MongoDB
Auth	Y

After create project using the generator, i built it in production environment and when i load the app the follow error appears.

[LuisFlip]

i run: gulp build in file dist/server/index.js change development to production: --> var env = process.env.NODE_ENV = process.env.NODE_ENV || 'production'; cd dist node server/index.js next open localhost:8080 and get the error

[Awk34]

I was able to reproduce and fix this locally. Apparently it's an issue with webpack bundling.

Manually add the following to the top of your polyfills.ts file:

import 'reflect-metadata';

[Awk34]

See https://github.com/NativeScript/nativescript-angular/issues/1540 about the same issue

[LuisFlip]

i try the following:

import 'reflect-metadata'; // import 'core-js/es6'; // import 'core-js/es7/reflect'; import 'zone.js/dist/zone';

or

import 'reflect-metadata'; // import 'core-js/es6'; // import 'core-js/es7/reflect'; //import 'zone.js/dist/zone';

and other variants allways with reflect-metadata uncommented and the problem persists.

i don't have the nativescript-angular in my project. Ther project is new and i dont have add any line of code.

other question, is this building in jit or aot? if is in jit, how i build project with AOT?

Thanks

[Awk34]

It has nothing to do with that project; they just had a similar issue.

I was able to reproduce this, but adding the reflect-metadata import fixed the issue for me. Can you provide some more details about your case? Perhaps replace these lines: https://github.com/angular-fullstack/generator-angular-fullstack/blob/master/templates/app/webpack.make.js#L29-L31 with this:

config.mode = 'development';

and try building again, so we can see the un-minified error.

[LuisFlip]

Replacing that lines fixed the issue.

Before the change, the dist/client files created by build have the following sizes:
After that replace, the build lines

why we a have three warnings because of the size (1.3~mb) and after the changes we got higher values but not showing any warning?

is this in AOT or JIT?

best regards and thanks

[ghost]

It has nothing to do with that project; they just had a similar issue.

I was able to reproduce this, but adding the reflect-metadata import fixed the issue for me. Can you provide some more details about your case? Perhaps replace these lines: https://github.com/angular-fullstack/generator-angular-fullstack/blob/master/templates/app/webpack.make.js#L29-L31 with this:

config.mode = 'development';

and try building again, so we can see the un-minified error.

This fixed the issue for me as well.

[Awk34]

That change isn't meant to fix the issue, just turn off minification so that we can debug the error better, but if the error goes away when you set Webpack to development mode, then it has to have something to do with minification for builds.

[koraysels]

yeah the error ahs something to do with the reflect polyfill.. I have the same issue. It Seems he cannot bootstrap the application correctly! If you set the buidlmode to development it will work and no error will be displayed. so we cannot debug it that way :( i can;t not have minified code in prodcution!

[koraysels]

This is a problem with UglifyJs. If you set the webpack mode to 'production' it enabels UglifyJsPlugin and then it fails.. I tried differetn options for the UglifyJsPlugin but I cannot get it to work. I think the dependency injection breaks when minification is applied. Do we need some kind of annotation plugin ?

[Sina7312]

I did this at top of my app.ts file, and it solve the problem: (commented out polyfills import, and add imports for reflect and zone.js)

import 'reflect-metadata';
import 'zone.js/dist/zone';
// import './polyfills';

[LuisFlip]

@Awk34 I solve the problem adding reflect-metadata on top of app.ts app.ts:

import 'reflect-metadata';
import 'zone.js/dist/zone';
//import './polyfills';

[LuisFlip]

@koraysels I replace the uglify-js to terser. https://github.com/mishoo/UglifyJS2/issues/659#issuecomment-447820525 if you want continues using the uglify-js you need install UglifyJS2#harmony-v2.8.22. see: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/version-0.4#install

[tschaffter]

Moving the imports from polyfills.ts to app.ts solves the issue as suggested here by @LuisFlip.

The Uglifier is not the issue (the issue is still there when commenting it in webpack.make.js).

Solution

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

Before:

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

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';

[atxiaoxian]

@tschaffter it solved the problem for me