基于用户点击的 Angular 10 SSR 更新视图页面源

问题描述

Angular-cli - 11.0.5 Angular-cdk - 11.0.3 Angular-Materail - 11.0.3 在执行一些用户操作或在 FE 中循环后，数据未显示在视图源中。哪个元素正在等待完成 api 以完成并呈现该数据未显示视图页面源。 在 server.ts 文件中为事件和文档添加了多米诺骨牌，

       `const domino = require('domino');
       const fs = require('fs');
       const path = require('path');
       const distFolder = join(process.cwd(),'dist/bookcab');
       const template = fs.readFileSync(path.join(distFolder,'index.html')).toString();
       const win = domino.createWindow(template.toString());
       global['window'] = win;
       global['document'] = win.document;
       global['self'] = win
       global['IDBIndex'] = win.IDBIndex
       global['document'] = win.document
       global['navigator'] = win.navigator
       global['getComputedStyle'] = win.getComputedStyle;
       import 'zone.js/dist/zone-node';
       import { ngExpressEngine } from '@nguniversal/express-engine';
       import * as express from 'express';
       import { join } from 'path';
       import { AppServerModule } from './src/main.server';
       import { APP_BASE_HREF } from '@angular/common';
       import { existsSync } from 'fs';
   
       // The Express app is exported so that it can be used by serverless 
       Functions.    export function app(): express.Express {
        const server = express();
        const distFolder = join(process.cwd(),'dist/bookcab');
        const indexHtml = existsSync(join(distFolder,'index.html')) ? 
        'index.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);
       // TODO: implement data requests securely
       server.get('/api/*',(req,res) => {
         res.status(404).send('data requests are not supported');   });   // Example Express Rest API endpoints   // server.get('/api/**',res) => { });   // Serve static files from /browser  
   server.get('*.*',express.static(distFolder,{
       maxAge: '1y'   }));   // All regular routes use the Universal engine   server.get('*',res) => {    res.render(indexHtml,{
   req,providers: [{ provide: APP_BASE_HREF,useValue:     req.baseUrl
   }] });    });
   
       return server;    }
   
     function run(): void {
       const port = process.env.PORT || 4000;
       // const port = process.env.PORT || 80;
   
      // 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';`
   
   

在加载时也出现此错误，

ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改。以前的值 'ng-untouched'：'真实'。当前值：'假'。 在 throwErrorIfNoChangesMode (D:\Projects\bookcab-stage-fe\dist\bookcab\server\main.js:195177:11) 在 bindingUpdated (D:\Projects\bookcab-stage-fe\dist\bookcab\server\main.js:206934:17) 在 checkStylingProperty (D:\Projects\bookcab-stage-fe\dist\bookcab\server\main.js:209685:32) 在 Module.ɵɵclassProp (D:\Projects\bookcab-stage-fe\dist\bookcab\server\main.js:209593:5) 在 NgControlStatus_HostBindings (D:\Projects\bookcab-stage-fe\dist\bookcab\server\main.js:73470:66) 在 setHostBindingsByExecutingExpandoInstructions (D:\Projects\bookcab-stage-fe\dist\bookcab\server\main.js:200056:25) 在 refreshView (D:\Projects\bookcab-stage-fe\dist\bookcab\server\main.js:200333:9) 在 refreshComponent (D:\Projects\bookcab-stage-fe\dist\bookcab\server\main.js:201434:13) 在 refreshChildComponents (D:\Projects\bookcab-stage-fe\dist\bookcab\server\main.js:200093:9) 在 refreshView (D:\Projects\bookcab-stage-fe\dist\bookcab\server\main.js:200337:13)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）