我有一个完整的堆栈Angular 4用于前端,后端用laravel实现 . 现在我想seo服务器端渲染Angular,但我不知道如何做到这一点 . 另一方面,服务器端的语言是Laravel,我不能使用该节点 .
有没有办法完全复制Laravel的路线并使用laravel和nodejs?
更新1:当我加载页面时这些错误显示,但从表面上看,一切正常:
_normalizedNames:
Map {
'server' => 'server',
'content-type' => 'content-type',
'transfer-encoding' => 'transfer-encoding',
'connection' => 'connection',
'vary' => 'vary',
'cache-control' => 'cache-control',
'date' => 'date',
'strict-transport-security' => 'strict-transport-security' }
},
type: 2,
url: 'https://domainbackend/backend/api/f-product/'
}
```java
const domino = require('domino');
const fs = require('fs');
const path = require('path');
import 'localstorage-polyfill'
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import {enableProdMode} from '@angular/core';
// Express Engine
import {ngExpressEngine} from '@nguniversal/express-engine';
// Import module map for lazy loading
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
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 || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
const template = fs.readFileSync(join(DIST_FOLDER, 'home', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['Event'] = null;
global['localStorage'] = localStorage;
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main.bundle');
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'home'));
// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'home'), {
maxAge: '1y'
}));
// 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 Express server listening on http://localhost:${PORT}`);
});
路线:
import { NgModule} from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {ProgrammingComponent} from "./programming.component";
import {PMainComponent} from "./p-main/p-main.component";
import {ProgrammingChildComponent} from "./programming-child/programming-child.component";
import {ProgrammingPostComponent} from "./programming-post/programming-post.component";
const graphicRoutes: Routes = [
{path:'', component: ProgrammingComponent,children:[
{ path: '', pathMatch: 'full', redirectTo: 'category/all'},
{ path: 'برنامه-نویسی/category', pathMatch: 'full', redirectTo: 'category/all'},
{ path: 'category/all', component: PMainComponent},
{path:'category/:id', component: ProgrammingChildComponent},
{path:':id', component: ProgrammingPostComponent},
{path:'search', loadChildren: './main-programming-search/main-programming-search.module#MainProgrammingSearchModule'},
]},
];
@NgModule({
imports: [RouterModule.forChild(graphicRoutes)],
exports: [RouterModule],
})
export class ProgrammingRoutingModule {
}
1 回答
你需要的是meta标签,让我们说用户点击/关于
然后在你的组件中添加它
about.component.ts:
settings_ser
调用laravel来获取about页面的预定义元,一旦你拥有它,你就会在index.html页面中更新以下元: