(Angulaire 6) Angular Universel - N'attend pas l'appel de l'API de contenu
Impossible de faire fonctionner le SSR avec Angular Universal avec des pages utilisant du contenu dynamique. Toutes les autres pages fonctionnent et les pages dynamiques retournent avec HTML mais n'incluent pas les données dynamiques.
Méthode appelée:
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']);
});
}
Méthode de service
getBlogPosts(query ? : object): Promise<Entry<any>[]> {
return this.cdaClient.getEntries(Object.assign({
content_type: CONFIG.contentTypeIds.blogPosts
}, {
'fields.private': false
}))
.then(res => res.items);
}
Modèle:
Cela ne montre jamais dans la source.
<li class="blog-post" *ngFor="let post of blogPosts">
<h1>{{post.fields.title}}</h1>
</li>
J'ai essayé les kits de démarrage et ils ne fonctionnent pas avec la même méthode. Également essayé d'injecter render2 et un service de résolveur pour tester l'extraction des données avant le chargement.
Rien ne semble fonctionner?
Toute aide serait appréciée!
MODIFIER
Ceci est mon fichier 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}`);
});
et mon module de serveur d'applications
@NgModule({
bootstrap: [AppComponent],
imports: [
BrowserModule.withServerTransition({ appId: 'app-root' }),
AppModule,
ModuleMapLoaderModule,
ServerModule,
NoopAnimationsModule,
ServerTransferStateModule, // comment
]
})
export class AppServerModule { }
Vous devez utiliser TransferHttpCacheModule for wait un appel HTTP à l'API ou utiliser une autre implémentation fonctionnant avec TransferState comme ngx-transfer-http .
Mon échantillon avec un délai d'attente de 3 secondes: https://github.com/Angular-RU/angular-universal-starter/blob/master/src/app/transfer-back/transfer-back.component.ts
Essayez de modifier votre code comme suit:
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'])
}