कोणीय 2+ यूनिवर्सल एक्सप्रेसज से पैरामीटर पास करना संभव है (यूआरएल क्वेरी स्ट्रिंग का उपयोग किए बिना)?

Question

मैं सेटअप करने के लिए कि उदाहरण का उपयोग कर रहा कोणीय 4 यूनिवर्सल NodeJS साथ & expressjs: https://github.com/FrozenPandaz/ng-universal-demo

मैं पहली बार पूरे पृष्ठ लोड से कोणीय 4 अंतिम एप्लिकेशन को डेटा पास करने की कोशिश कर रहा हूँ।

उपयोग के मामले भाषा कोणीय 4 सर्वर रेंडरर से अवशोषित करने के लिए तो यह बातें अनुवाद करने के लिए सही भाषा का उपयोग कर सकते हेडर से पता लगाया हस्तांतरण करने के लिए किया जाएगा।

एकमात्र तरीका जो मैंने पाया है, वह "/" रूट पर HTTPjers का उपयोग करके HTTP हेडर का उपयोग करके भाषा पहचान करना है और HTTP भाषा को "/ fr" पर रीडायरेक्ट करना है उदाहरण के लिए यदि उपयोगकर्ता भाषा फ़्रेंच है ।

main.server.ts

app.param('language', function(req: any, res, next, language) { 
    if(language.length == 2) 
    { 
    req.language = language; 
    next(); 
    } else { 
    next(new Error('Invalid language found')); 
    } 
}); 

// Redirect incoming trafic without language in url (302 used so the browser do not seal that redirection if the user decides to change language and reload) 
app.get('/', function(req, res) { 
    res.set('location', baseUrl + '/' + getLanguage(req); 
    res.status(302).send(); 
}); 

routes.ts

export const ROUTES: string[] = [ 
    '/error', 
    '/:language', 
    '/:language/download' 
]; 

यह काम करता है, क्योंकि मैं कोणीय 4 रूटर कॉन्फ़िगर और पुनः प्राप्त कर रहा हूँ वर्तमान मार्ग, लेकिन यह गंदा है।

app.module.ts

RouterModule.forRoot([ 
     { path: '', component: HomeView, pathMatch: 'full'}, 
     { path: ':language/download', loadChildren: './+lazy/lazy.module#LazyModule'}, 
     { path: ':language/', redirectTo: ''}, 
     // Catch all if expressjs allowed this url 
     { path: '**', component: HomeView } 
    ]) 

वहाँ यूआरएल पैरामीटर की तुलना में एक बेहतर तरीका कोणीय 4 कोणीय यूनिवर्सल का उपयोग करके ऐप्स ExpressJS से डेटा पारित करने के लिए है?

मैं कोणीय सार्वभौमिक के पूर्ण भार से अधिक डेटा (उदाहरण के लिए उपयोगकर्ता सत्र के बारे में जानकारी) कैसे स्थानांतरित कर सकता हूं?

Answer 1

मुझे एक ही समस्या थी और खोज के कई घंटों के बाद मुझे एक समाधान मिला जो मेरे लिए काम कर रहा है here।

... 
let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString(); 

app.engine('html', (_, options, callback) => { 
    const opts = { 
    document: template 
    ,url: options.req.url 
    ,extraProviders: [ 
         { provide: 'host', useFactory:() => options.req.get('host') } 
         ,{ provide: 'PLACEHOLDER', useFactory:() => 'SOME PLACEHOLDER TEXT' } 
        ] 
    }; 

    renderModuleFactory(AppServerModuleNgFactory, opts) 
    .then(html => callback(null, html)); 
}); 

app.set('view engine', 'html'); 
... 

फिर आप प्रदाताओं कि आप में परिभाषित किया है पहुँच सकते हैं:

अपने 'main.server.ts' फ़ाइल में, आप app.engine() समारोह कि इतने तरह देखने के लिए 'extraProviders' जोड़ने के लिए 'main.server.ts' इसलिए की तरह अपने Angular4 घटक या -service कोड में फ़ाइल:

import { Injectable, Injector, PLATFORM_ID } from '@angular/core'; 
import { isPlatformServer } from '@angular/common'; 


@Injectable() 
export class I18nService { 

    constructor(
      private injector: Injector 
     ,@Inject(PLATFORM_ID) private platformId: Object 
     ){ 
     let host = null; 
     if (isPlatformServer(this.platformId)) { 
      // -> server rendered 
      host = this.injector.get('host'); 
      //do something with host here 
     } else { 
      // -> browser rendered 
      host = document.location... 
     } 
     console.log(host); 
     //do something clever with 'host' here 
    } 
... 

कृपया ध्यान दें कि एक बार अपने पेज क्लाइंट साइड-ब्राउज़र में 'host' प्रदाता कोई लोड होते ही होगा अब उपलब्ध रहें। इसके बजाय आपको मेजबान जेएस एपीआई से प्राप्त करना होगा।

import 'reflect-metadata'; 
import 'zone.js/dist/zone-node'; 
import { platformServer, renderModuleFactory } from '@angular/platform-server' 
import { enableProdMode } from '@angular/core' 
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory' 
import * as express from 'express'; 
import { readFileSync } from 'fs'; 
import { join } from 'path'; 
import * as compression from 'compression'; 

const PORT = 4200; 

enableProdMode(); 

const app = express(); 

let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString(); 

app.engine('html', (_, options, callback) => { 
    const opts = { 
    document: template 
    ,url: options.req.url 
    ,extraProviders: [ 
         { provide: 'request', useFactory:() => options.req } 
         ,{ provide: 'host', useFactory:() => options.req.get('host') } 
        ] 
    }; 

    renderModuleFactory(AppServerModuleNgFactory, opts) 
    .then(html => callback(null, html)); 
}); 

app.set('view engine', 'html'); 
app.set('views', 'src'); 
app.use(compression()); 

app.get('*.*', express.static(join(__dirname, '..', 'dist'))); 

app.get('*', (req, res) => { 
    res.render('index', { req }); 
}); 

app.listen(PORT,() => { 
    console.log(`listening on http://localhost:${PORT}!`); 
});