Angular 10 support

[garrappachc]

After upgrading to Angular 10 and attempting to run tests, I met the following error:

ERROR in node_modules/ng-mocks/dist/lib/common/lib.d.ts:12:57 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

12 export interface NgModuleWithProviders<T = any> extends ModuleWithProviders {

I believe it's due to the new ModuleWithProviders requirements.

[Ksisu]

Here is the related migration docs:
https://angular.io/guide/migration-module-with-providers

[dtomaszewski]

There is also problem with MockComponent usage after upgrade to ng10 :

An error was thrown in afterAll Uncaught ReferenceError: exports is not defined ReferenceError: exports is not defined at Module.../../node_modules/ng-mocks/dist/lib/common/Mock.js (http://localhost:9876/_karma_webpack_/vendor.js:528361:23) at __webpack_require__ (http://localhost:9876/_karma_webpack_/main.js:80:30) at Object.../../node_modules/ng-mocks/dist/lib/common/index.js (http://localhost:9876/_karma_webpack_/vendor.js:528671:10) at __webpack_require__ (http://localhost:9876/_karma_webpack_/main.js:80:30) at Object.../../node_modules/ng-mocks/dist/index.js (http://localhost:9876/_karma_webpack_/vendor.js:528318:10)

I have it in afterAll of every test which uses ng-mocks

[vytautas-petrikas]

@dtomaszewski can you create a minimal reproduction of this bug on stackblitz?

[dtomaszewski]

It seems that I solved it,

I had to change

... "module": "es2020" ...

in my tsconfig.base.json (which caused more other issues btw :D )

Edit: unfortunately my fix broke other parts of app,

Please try to compile application with ng mocks and tsconfig :

... "module": "esnext", "target": "es5", ...

[satanTime]

Hi. Which target did you have before?

…

On 29. Jun 2020, at 18:40, Dariusz ***@***.***> wrote:  It seems that I solved it, I had to change ... "module": "es2020" ... in my tsconfig.base.json (which caused more other issues btw :D ) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[dtomaszewski]

@satanTime

... "module": "esnext", "target": "es5", ...

[satanTime]

Thanks. I’m almost back and will be able to check the issue soon.

[dtomaszewski]

thanks, setting module to es2020 for .spec file helped in my case but it'd be nice to look at it either way.

[satanTime]

Yesterday I checked the things and found that for TS 3.9 a big part of ng-mocks interfaces should be changed to fix issues caused by TS2339.
I'll be working on it this week and I hope that a new version will have been released by the coming weekend.

[satanTime]

Hi @dtomaszewski, after investigation I found that A10 doesn't respect es5 anymore and loads all mode_modules as es2015 if they provide both builds es5 and es2015.
Currently I don't see a way how to tell A10 to use es5 version instead of es2015.
Please let me know if you know a solution or have advice.
Looks like we should move to es2015 and forget IE hell.

Current solution I found is to use es5 in tsconfig.base.json and es2015 in tsconfig.spec.json

[dtomaszewski]

@satanTime yes, my workaround was just to differentiate spec and app tsconfig files. I'm not a huge fan of this solution because I use nx and I need to change it in every library (and remember to include it to each new lib generated) :/

It's uncomfortable because somebody in team could forget to include it and everything will work fine... until ng-mocks is used in one spec file.

[benelliott]

Hi @dtomaszewski, after investigation I found that A10 doesn't respect es5 anymore and loads all mode_modules as es2015 if they provide both builds es5 and es2015.
Currently I don't see a way how to tell A10 to use es5 version instead of es2015.
Please let me know if you know a solution or have advice.
Looks like we should move to es2015 and forget IE hell.

Current solution I found is to use es5 in tsconfig.base.json and es2015 in tsconfig.spec.json

Hi @satanTime, this workaround didn't work for me, as when I tried to change my tesconfig.base.json I got the following error:

An unhandled exception occurred: tsconfig.base.json:9:19 - error TS6046: Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'.

Any combination of module values in my tsconfig.spec.json or tsconfig.base.json still seems to produce the Uncaught ReferenceError: exports is not defined error.

Thankfully, this is in a project that doesn't make extensive use of ng-mocks so I have been able to just remvoe any references to the library. But this is obviously not an ideal fix for most people!

[satanTime]

Hi @benelliott,

might you try to use es2015 in the base, and uncomment IE11 in .browserlistrc? I didn't try it yet, but as I understand in this case 2 bundles will be build and IE11 should get es5 version.

[benelliott]

Sorry, that was actually my bad, I think you meant that you need to put es5 for the target in tsconfig.base.json (I was trying to set it for module, which is invalid).

Setting

        "target": "es5",
        "module": "es2015",

in tsconfig.base.json and/or tsconfig.spec.json with IE11 enabled in .browserslistrc doesn't fix the error for me.

[satanTime]

Hi guys, might you check the latest version? it should work correctly on both es5 and es2015

[icorne]

Hello, I'm testing. it seems to be working. I have other issues though, unrelated to ng-mocks. Kind regards, Ian Corne

…

On Sun, 12 Jul 2020 at 20:46, MG. ***@***.***> wrote: Hi guys, might you check the latest version? it should work correctly both es5 and es2015 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#148 (comment)>, or unsubscribe </~https://github.com/notifications/unsubscribe-auth/AAY3XTURMOXOG6RPRNNKC4LR3IAHZANCNFSM4OIFTZJA> .