Angular 9 SSR ReferenceError: stripe.elements is not defined

Question

for my project Angular 9 I must install Server-side rendering (SSR), I followed official tutorial https://angular.io/guide/universal . At the beginning I have the problem with the window is not define. So I decided to install SSR with domino and I followed this tutorial enter link description here , but I have a problem when the program build my project: elements is not define. ( const elements = stripe.elements() Cannot read property elements of undefined ).

Below my server.ts code

 import 'zone.js/dist/zone-node'; import { ngExpressEngine } from '@nguniversal/express-engine'; import * as express from 'express'; import { join } from 'path'; import { APP_BASE_HREF } from '@angular/common'; import { existsSync } from 'fs'; import * as core from 'express-serve-static-core'; const domino = require('domino'); const fs = require('fs'); const path = require('path'); // Use the browser index.html as template for the mock window const template = fs.readFileSync(path.join(join(process.cwd(), 'dist/captn-boat-angular/browser'), 'index.html')).toString(); // Shim for the global window and document objects. const window = domino.createWindow(template); global['window'] = window; global['document'] = window.document; global ['navigator']=window.navigator; global ['screen']=window.screen; global['Event'] = null; global['window'] = window; global['document'] = window.document; global['branch'] = null; global['object'] = window.object; global['localStorage'] = window.localStorage; global['navigator'] = window.navigator; global['elements']=window.elements; global['elements']=null; global['Event'] = null; global['KeyboardEvent'] = null; global['stripe']=window.stripe; window.screen = { deviceXDPI: 0, logicalXDPI: 0 }; global['MouseEvent'] = window.MouseEvent; declare interface Window { Stripe: any; // Or you can define a type for that in this file as well stripe:null; elements:null; } import { AppServerModule } from './src/main.server'; // The Express app is exported so that it can be used by serverless Functions. export function app(): core.Express { const server = express(); const distFolder = join(process.cwd(), 'dist/captn-boat-angular/browser'); const indexHtml = existsSync(join(distFolder, 'index.original.html'))? 'index.original.html': 'index'; // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine) server.engine('html', ngExpressEngine({ bootstrap: AppServerModule, })); server.set('view engine', 'html'); server.set('views', distFolder); // Example Express Rest API endpoints // server.get('/api/**', (req, res) => { }); // Serve static files from /browser server.get('*.*', express.static(distFolder, { maxAge: '1y' })); // All regular routes use the Universal engine server.get('*', (req, res) => { res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }); }); return server; } function run() { const port = process.env.PORT || 4000; // Start up the Node server const server = app(); server.listen(port, () => { console.log(`Node Express server listening on http://localhost:${port}`); }); } // Webpack will replace 'require' with '__webpack_require__' // '__non_webpack_require__' is a proxy to Node 'require' // The below code is to ensure that the server is run only when not requiring the bundle. declare const __non_webpack_require__: NodeRequire; const mainModule = __non_webpack_require__.main; const moduleFilename = mainModule && mainModule.filename || ''; if (moduleFilename === __filename || moduleFilename.includes('iisnode')) { run(); } export * from './src/main.server';

And then the error: elements of undefined

Thank you for your answer.

Answer 1

Do you use stripe in every place on your application? I'd use it in the payment section of the related module and would connect it to lazy loading. Thus you could use one of the importer of stripe? like here: ngx-stripe installation