Angular Ivy: TypeError: record.factory is not a function

[davidhel]

🐞 bug report

Affected Package

core.js

Is this a regression?

Yes, it works when I set "enableIvy": false,
But does not work with: "enableIvy": true,

Description

This is a runtime error, there is no build error.
I post this to get help me to get in the right direction to fixing this, and also if anyone else have the same issue after turning on Ivy. At the moment I am clueless.

I have tried many things, to mention a few:

• Found and fixed cyclic dependencies with: npx madge --circular --extensions ts ./
• Turned on these settings and fixed relevant error messages:
  "fullTemplateTypeCheck": true,
  "strictInjectionParameters": true

🔬 Minimal Reproduction

Sorry I don't know how to reproduce this outside my own solution. It is a large enterprise solution.

🔥 Exception or Error

Fails in main.ts
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

main.ts:18 TypeError: record.factory is not a function
    at R3Injector.hydrate (core.js:16747)
    at R3Injector.get (core.js:16509)
    at core.js:16439
    at Set.forEach ()
    at new R3Injector (core.js:16435)
    at createInjector (core.js:16386)
    at new NgModuleRef$1 (core.js:35526)
    at NgModuleFactory$1.create (core.js:35629)
    at core.js:41676
    at ZoneDelegate.invoke (zone-evergreen.js:365)
(anonymous) @ main.ts:18
invoke @ zone-evergreen.js:365
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:851
invokeTask @ zone-evergreen.js:400
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:570
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:553
scheduleTask @ zone-evergreen.js:389
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:841
then @ zone-evergreen.js:967
bootstrapModule @ core.js:41741
./src/main.ts @ main.ts:17
__webpack_require__ @ bootstrap:84
0 @ main.ts:18
__webpack_require__ @ bootstrap:84
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.0.1
Node: 12.11.1
OS: win32 x64

Angular: 9.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.1
@angular-devkit/build-angular     0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/build-webpack     0.900.1
@angular-devkit/core              9.0.1
@angular-devkit/schematics        9.0.1
@angular/cli                      9.0.1
@ngtools/webpack                  9.0.1
@schematics/angular               9.0.1
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[pkozlowski-opensource]

@davidhel would you be able to share a reproduce scenario for this error (GitHub repository or otherwise)? It is very hard to understand what is going on with just error message and no reproduce scenario.

[davidhel]

@davidhel would you be able to share a reproduce scenario for this error (GitHub repository or otherwise)? It is very hard to understand what is going on with just error message and no reproduce scenario.

I wish I could, but since I don't know what is triggering this issue I am not able at the moment. But I will definitively investigate more and come back if I can.
In the mean time, if anyone can point me in the right direction on where to investigate that would be very much appreciated. Thanks

[kara]

@davidhel You might try deleting components until you can narrow it down to a particular part of your app. Then I'd remove some providers / injected items until you can get a minimal repro.

[davidhel]

I found the problem. For some reason I had MaterialModule in providers in AppModule. Looks like it has been there for years but started malfunctioning now after enabling Ivy
Removing the module from providers fixed the issues I had.

I close this, but suggests a more friendly error message on this issue.
Thanks for your friendly replies.

[joterr]

Same here! I've got an own module in providers array. Awesome!

[bagerth]

I had the same problem, but the solution was quite different.

When I triggered the ng update command from Angular 8 to 9, @Injectable() was automatically added to app.module.ts. This generated the "TypeError: record.factory is not a function" error message. Once removed, my app works like a charm.

[Quake11]

I have encountered the same problem, because ng update added @Injectable to my module which was just a container to import/export one of my pipes

[condericson]

Came here to say I ran into the same problem upgrading my app from 8 to 9. I discovered the issue is a rather roundabout way, but essentially one of my modules had @Injectable in it as well. I found which one by logging the value of the token within the below function. This function is located in this file: node_modules\@angular\core\__ivy_ngcc__\fesm5\core.js. At time of writing, the function starts on line 11345. Hope this helps the next poor soul who sees this error.

R3Injector.prototype.hydrate = function (token, record) { if (record.value === CIRCULAR) { throwCyclicDependencyError(stringify(token)); } else if (record.value === NOT_YET) { record.value = CIRCULAR; record.value = record.factory(); } if (typeof record.value === 'object' && record.value && hasOnDestroy(record.value)) { this.onDestroy.add(record.value); } return record.value; };

[Diex]

same here, fixed removing the "@Injectable()" from modules.
the error was:

VM2917 vendor.js:25841 ERROR Error: Uncaught (in promise): TypeError: record.factory is not a function
TypeError: record.factory is not a function
at R3Injector.hydrate (VM2917 vendor.js:35898)
at R3Injector.get (VM2917 vendor.js:35659)
at VM2917 vendor.js:35589
at Set.forEach ()
at new R3Injector (VM2917 vendor.js:35585)
at createInjector (VM2917 vendor.js:35536)
at new NgModuleRef$1 (VM2917 vendor.js:52647)
at NgModuleFactory$1.create (VM2917 vendor.js:52737)
at MapSubscriber.project (VM2917 vendor.js:76147)
at MapSubscriber._next (VM2917 vendor.js:86856)
at resolvePromise (VM2914 polyfills.js:806)
at resolvePromise (VM2914 polyfills.js:765)
at VM2914 polyfills.js:867
at ZoneDelegate.invokeTask (VM2914 polyfills.js:413)
at Object.onInvokeTask (VM2917 vendor.js:57136)
at ZoneDelegate.invokeTask (VM2914 polyfills.js:412)
at Zone.runTask (VM2914 polyfills.js:181)
at drainMicroTaskQueue (VM2914 polyfills.js:583)

[sarora2073]

Had the same issue. Codelens reveals the issue to be created when i ran ng-update to upgrade from ng8 to ng9, as shown in the screenshot.

Probably easiest way to find if it affects you is to search your project for '@NgModule' since there are usually fewer modules to hunt through, but alternately you will have to search for all '@Injectable()' references to find the extraneous one.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}