CODEWITHSUNDEEP
angularfirebasegoogle-cloud-functionsserver-side-rendering
TdoubleG
TdoubleG

Reputation: 489

Angular 7 Universal firebase routing

I followed this tutorial: https://fireship.io/lessons/angular-universal-firebase/

Everything seems to be working. I can view the Angular App through my firebase hosting url. But: As soon as I call a route directly e.g. http://xxx.firebase.app/home I get this error (copied from firebase functions log)

TypeError: handler is not a function
    at cloudFunction (/srv/node_modules/firebase-functions/lib/providers/https.js:57:9)
    at /worker/worker.js:783:7
    at /worker/worker.js:766:11
    at ZoneDelegate.invokeTask (/srv/dist/server.js:5145:31)
    at Zone.runTask (/srv/dist/server.js:4917:47)
    at ZoneTask.invokeTask (/srv/dist/server.js:5220:34)
    at ZoneTask.invoke (/srv/dist/server.js:5209:48)
    at data.args.(anonymous function) (/srv/dist/server.js:6143:25)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickDomainCallback (internal/process/next_tick.js:219:9)

If I call just call the firebase url without /home it redirects me correctly to the /home route

This is what my routing looks like:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'privacy',
    component: PrivacyComponent
  }
  ,
  {
    path: 'imprint',
    component: ImprintComponent
  }
];

Can somebody explain me, what the problem is?

Upvotes: 3

Views: 304

Answers (1)

Souvik Dey
Souvik Dey

Reputation: 19

Make sure You have export added to your server.ts file before const app. This was the issue with my case.

// Express server
export const app = express();

update

The error is explained as follows: - In the file functions/src/index.ts the variable app is required through the following code:

const universal = require(`${process.cwd()}/dist/server`).app;
exports.ssr = functions.https.onRequest(universal);

But, according the ${process.cwd()}/dist/server JS file (which is the transpiled version of the server.ts) the variable app is not public so that the access to it can be obtain in functions/src/index.ts.

This could be seen through the way the variable app is declared:

// Express server
const app = express();

To overcome the issue just export the variable app as follows:

// Express server
export const app = express();

Upvotes: 1

Related Questions