Angular Universal Error - App.auth Is Not A Function
Tech Stack: AngularFire2, Firebase, Firebase Functions, Angular 7,
I get an error when I deploy the website into Firebase Functions, although it works properly locally.
Angular Cli and Angular Universal.
AngularFire2 version: "@angular/fire": "^5.1.2"
Firebase version: "firebase": "^5.9.3"
I have debugged this and it seems to be an issue with AngularFire2.
Things I've tried:
I have upgraded the library and downgraded it to see if that fixes it, but no luck.
Also, tried uninstall npm packages and removing the package lock but no luck either.
This is the stack trace error on firebase console (functions):
ERROR TypeError: app.auth is not a function
at /user_code/dist/server.js:152999:24
at ZoneDelegate.invoke (/user_code/dist/server.js:555:26)
at Zone.run (/user_code/dist/server.js:314:43)
at NgZone.runOutsideAngular (/user_code/dist/server.js:20244:28)
at new AngularFireAuth (/user_code/dist/server.js:152997:26)
at _createClass (/user_code/dist/server.js:24259:20)
at _createProviderInstance (/user_code/dist/server.js:24221:26)
at resolveNgModuleDep (/user_code/dist/server.js:24185:21)
at _createClass (/user_code/dist/server.js:24251:29)
at _createProviderInstance (/user_code/dist/server.js:24221:26)
This is my current webpack.prerender.config.js:
const path = require('path');
const webpack = require('webpack');
const regex = /firebase\/(app|firestore)/;
module.exports = {
mode: 'none',
entry: {
// This is our Express server for Dynamic universal
server: './server.ts'
},
target: 'node',
resolve: { extensions: ['.ts', '.js'] },
optimization: {
minimize: false
},
output: {
// Puts the output at the root of the dist folder
path: path.join(__dirname, 'dist'),
filename: '[name].js',
libraryTarget: 'umd',
library: 'app'
},
// this makes sure we include node_modules and other 3rd party libraries
externals: [function(context, request, callback) {
// exclude firebase products from being bundled, so they will be loaded using require() at runtime.
if(regex.test(request)) {
return callback(null, 'commonjs ' + request);
}
callback();
}],
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader' },
{
// Mark files inside `@angular/core` as using SystemJS style dynamic imports.
// Removing this will cause deprecation warnings to appear.
test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
parser: { system: true },
},
]
},
plugins: [
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
};
Answer
Reason for this issue:
"engines": { "node": "8" },
was missing from the package.json file in the functions folder. It seems that with this missing, causes the html not to fully render with ssr.
Related Questions
- → Make a Laravel collection into angular array (octobercms)
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → Angularjs not working inside laravel form
- → Analysis of Flux implementations
- → how to write react component to construct HTML DOM
- → angular ng-repeat and images in a row
- → Conditional BG Color on AngularJS
- → Should I 'use strict' for every single javascript function I write?
- → getting the correct record in Angular with a json feed and passed data
- → "Undefined is not a function" at .toBe fucntion
- → angularjs data binding issue
- → Angular / JavaScript auto hydrate an instance
- → Convert generic text string in json object into valid url using Angular