分享
三行代码  ›  专栏  ›  技术社区  ›  Smokey Dawson

(角度6)角度通用-不等待内容API调用

  •  9
  • Smokey Dawson  · 技术社区  · 1 年前

    当对使用动态内容的页面使用Angular Universal时,无法使SSR工作。所有其他页面工作,动态页面返回HTML,但不包括动态数据。

    方法称为:

    ngOnInit() {
      const div = this.renderer.createElement('div');
      const texttest = this.renderer.createText('this works');
    
      this.renderer.appendChild(div, texttest);
      this.renderer.appendChild(this.content.nativeElement, div);
    
      this.createLinkForCanonicalURL();
    
      // The HTML never shows, the method works fine.
      this._contentfulService.getBlogPosts().then(posts => {
        this.blogPosts = _.orderBy(posts, ['sys.createdAt'], ['desc']);
      });
    }
    

    服务方法

    getBlogPosts(query ? : object): Promise<Entry<any>[]> {
      return this.cdaClient.getEntries(Object.assign({
          content_type: CONFIG.contentTypeIds.blogPosts
        }, {
          'fields.private': false
        }))
        .then(res => res.items);
    }
    

    模板:

    这永远不会在源代码中显示。

    <li class="blog-post" *ngFor="let post of blogPosts">
      <h1>{{post.fields.title}}</h1>
    </li>
    

    已经尝试过初学者工具包,但它们无法调用相同的方法。还尝试使用render2进行注入,并使用解析程序服务在加载之前测试获取数据。

    什么都不起作用?

    任何帮助都将不胜感激!

    编辑

    这是我的server.ts文件

    // These are important and needed before anything else
    import 'zone.js/dist/zone-node';
    import 'reflect-metadata';
    
    import { enableProdMode } from '@angular/core';
    import * as express from 'express';
    import { join } from 'path';
    
    // Faster server renders w/ Prod mode (dev mode never needed)
    enableProdMode();
    
    // Express server
    const app = express();
    
    const PORT = process.env.PORT || 8080;
    const DIST_FOLDER = join(process.cwd(), 'dist');
    
    // * NOTE :: leave this as require() since this file is built Dynamically from webpack
    const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = 
    require('./dist/server/main');
    
    // Express Engine
    import { ngExpressEngine } from '@nguniversal/express-engine';
    // Import module map for lazy loading
    import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
    
    app.engine('html', ngExpressEngine({
      bootstrap: AppServerModuleNgFactory,
      providers: [
        provideModuleMap(LAZY_MODULE_MAP)
     ]
    }));
    
    app.set('view engine', 'html');
    app.set('views', join(DIST_FOLDER, 'browser'));
    
    // TODO: implement data requests securely
    app.get('/api/*', (req, res) => {
      res.status(404).send('data requests are not supported');
    });
    
    // Server static files from /browser
    app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
    
    // All regular routes use the Universal engine
    app.get('*', (req, res) => {
      res.render('index', { req });
    });
    
    // Start up the Node server
    app.listen(PORT, () => {
      console.log(`Node server listening on http://localhost:${PORT}`);
    });
    

    还有我的 应用服务器模块

    @NgModule({
    bootstrap: [AppComponent],
    
    imports: [
        BrowserModule.withServerTransition({ appId: 'app-root' }),
    
        AppModule,
        ModuleMapLoaderModule,
        ServerModule,
        NoopAnimationsModule,
        ServerTransferStateModule, // comment
    ]
    })
    export class AppServerModule { }
    
    3 回复  |  直到 1 年前
        1
  •  1
  •   gorniv    10 月前

    你需要使用 TransferHttpCacheModule 等待对API的HTTP调用,或使用与TransferState类似的其他实现 ngx-transfer-http .

    我的样本延迟3秒: https://github.com/Angular-RU/angular-universal-starter/blob/master/src/app/transfer-back/transfer-back.component.ts

        2
  •  0
  •   Alex Cheremisin    1 年前

    尝试按如下方式编辑代码:

    async ngOnInit() {
      const div = this.renderer.createElement('div');
      const texttest = this.renderer.createText('this works');
    
      this.renderer.appendChild(div, texttest);
      this.renderer.appendChild(this.content.nativeElement, div);
    
      this.createLinkForCanonicalURL();
    
      const posts = await this._contentfulService.getBlogPosts();
      this.blogPosts = _.orderBy(posts, ['sys.createdAt'], ['desc'])
    
     }
    
        3
  •  0
  •   Alvaro    10 月前

    似乎AngularUniversal并不等待异步调用呈现。

    我遇到了同样的问题,并最终使用了ZoneMacroTaskWrapper,如本文所述。 issue .

    这就是 service 我做的。