SSR Angular Universal 12 and Firebase troubles #2874
Description
Hi everyone,
Not sure if this is a bug for AngularFire to be honest, but this might be the case so, here it is.
I have an app which i could deploy with Angular 11 and Firebase.
I had to put in place the solution with protos described in #2686.
As you can see, the firestore-protos.ts file returns file-loader?name=..., which is a command for webpack 4, with the loader file-loader.
But, in Angular 12, webpack 4 is gone, and we have webpack 5 support, awesome! But, the solution with dir-loader!./firestore-protos simply doesn't work any more.
1st encountered issue:
I get this error:
./node_modules/dir-loader/index.js!./apps/website/firestore-protos.ts - Error: Module build failed (from ./node_modules/dir-loader/index.js):
TypeError: this.exec is not a function
at Object.module.exports (C:\Users\jct\code\00-wekicards\wekicards\node_modules\dir-loader\index.js:10:22)
And the line in the dir-loader lib:
var options = this.exec(source, this.resource);
So, I've been looking for a solution for quite some time now and I really can't find anything on the subject.
I saw that in the sample app example from angularfire repo, @jamesdaniels removed the use of dir-loader, which seems a good option indeed.
What's the best workaround to do the same thing as the couple [dir-loader / file-loader] to load firestore protos ?
2nd encountered issue:
I also tried to just remove the use of dir-loader by adding a list of externalDependencies in the angular.json file, just like this:
"externalDependencies": [
"firebase",
"@firebase/app",
"@firebase/firestore",
"@firebase/analytics",
"@firebase/auth",
"@firebase/functions",
"@firebase/installations",
"@firebase/messaging",
"@firebase/storage",
"@firebase/performance",
"@firebase/remote-config",
"@firebase/util"
],
But when I try this, I get another error when building my cloud function (well, it's more a Warning at first, but later on deployment it turns into an error):
WARNING in ./apps/functions/dist/website/server/fr/main.js 91:90
Module parse failed: The keyword 'let' is reserved (91:90)
File was processed with these loaders:
* ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| constructor() { super(...arguments), this.overrides = { pinch: { enable: !1 }, rotate: { enable: !1 } }; }
| }
> exports.MyHammerConfig = MyHammerConfig, MyHammerConfig.\u0275fac = function () { let \u0275MyHammerConfig_BaseFactory; return function MyHammerConfig_Factory(t) { return (\u0275MyHammerConfig_BaseFactory || (\u0275MyHammerConfig_BaseFactory =
i0.\u0275\u0275getInheritedFactory(MyHammerConfig)))(t || MyHammerConfig); }; }(), MyHammerConfig.\u0275prov = i0.\u0275\u0275defineInjectable({ token: MyHammerConfig, factory: MyHammerConfig.\u0275fac });
| const customConfig = { include: ["facebook", "twitter", "whatsapp", "linkedin", "email", "sms"], gaTracking: !0, sharerMethod: ngx_sharebuttons_1.SharerMethod.Window };
| class AppModule {
WARNING in ./apps/functions/dist/website/server/en/main.js 91:90
Module parse failed: The keyword 'let' is reserved (91:90)
File was processed with these loaders:
* ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| constructor() { super(...arguments), this.overrides = { pinch: { enable: !1 }, rotate: { enable: !1 } }; }
| }
> exports.MyHammerConfig = MyHammerConfig, MyHammerConfig.\u0275fac = function () { let \u0275MyHammerConfig_BaseFactory; return function MyHammerConfig_Factory(t) { return (\u0275MyHammerConfig_BaseFactory || (\u0275MyHammerConfig_BaseFactory =
i0.\u0275\u0275getInheritedFactory(MyHammerConfig)))(t || MyHammerConfig); }; }(), MyHammerConfig.\u0275prov = i0.\u0275\u0275defineInjectable({ token: MyHammerConfig, factory: MyHammerConfig.\u0275fac });
| const customConfig = { include: ["facebook", "twitter", "whatsapp", "linkedin", "email", "sms"], gaTracking: !0, sharerMethod: ngx_sharebuttons_1.SharerMethod.Window };
| class AppModule {
! functions: package.json indicates an outdated version of firebase-functions.
Please upgrade using npm install --save firebase-functions@latest in your functions directory.
=== Deploying to 'myproject-staging'...
i deploying functions
+ functions: Finished running predeploy script.
i functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i functions: ensuring required API cloudbuild.googleapis.com is enabled...
+ functions: required API cloudbuild.googleapis.com is enabled
+ functions: required API cloudfunctions.googleapis.com is enabled
i functions: preparing / directory for uploading...
Error: Error occurred while parsing your function triggers.
Error: Module parse failed: The keyword 'let' is reserved (91:90)
File was processed with these loaders:
* ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| constructor() { super(...arguments), this.overrides = { pinch: { enable: !1 }, rotate: { enable: !1 } }; }
| }
> exports.MyHammerConfig = MyHammerConfig, MyHammerConfig.\u0275fac = function () { let \u0275MyHammerConfig_BaseFactory; return function MyHammerConfig_Factory(t) { return (\u0275MyHammerConfig_BaseFactory || (\u0275MyHammerConfig_BaseFactory =
i0.\u0275\u0275getInheritedFactory(MyHammerConfig)))(t || MyHammerConfig); }; }(), MyHammerConfig.\u0275prov = i0.\u0275\u0275defineInjectable({ token: MyHammerConfig, factory: MyHammerConfig.\u0275fac });
| const customConfig = { include: ["facebook", "twitter", "whatsapp", "linkedin", "email", "sms"], gaTracking: !0, sharerMethod: ngx_sharebuttons_1.SharerMethod.Window };
| class AppModule {
at Object.<anonymous> (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:211:7)
at __webpack_require__ (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:20:30)
at webpackContext (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:190:9)
at C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:166:61
at Array.forEach (<anonymous>)
at Object.<anonymous> (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:165:19)
at __webpack_require__ (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:20:30)
at Object.<anonymous> (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:121:52)
at __webpack_require__ (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:20:30)
at Object.<anonymous> (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:109:18)
The problem here is that the main.js files in the 'fr' or 'en' folder are all minified so I can't know exactly the origin of the problem.
A note: the functions app is a node app in our monorepo, which contains the cloud functions to deploy.
And a reminder: everything deploys correctly with Angular Universal 11, and after upgrade to version 12, it stopped at build time for the Cloud Function part.
Also: I did manage to easily migrate all other apps from the monorepo from Angular 11 to Angular 12. All apps started locally, build, and deployed without trouble.
So, I really narrowed down to the problem to SSR Universal, with AngularFire and Firebase (which is kind of very large scope, i know ^^).
Version info
Angular: 12
Firebase: 8.6.1
AngularFire: 6.1.5
Node: 12.22.3 (same in 14.17.3)
** Windows 10 **
Other (e.g. Ionic/Cordova, Node, browser, operating system):
Expected behavior
I expect the SSR Universal to not broke the workflow, when dealing with those protos / dir-loader / webpack 5.
Actual behavior
It's a no go for now for the adoption of Angular 12, because of those points.