问题描述
我在 server.js 中使用 ng add @nguniversal/express-engine --clientProject myproj
和 domino
来在服务器端渲染时访问文档和窗口。这将适用于静态路由组件,并将使用基于浏览器的搜索/查找我得到多个动态参数响应。
但是每当我从 CuRL 或通过浏览器直接访问动态路由“:category/:state”请求时,都没有得到任何 [连续加载]。实际上,我想要一个相同的回应,使搜索/查找设施 SEO 友好。下面我提到了我的项目代码片段。
我参考 https://www.willtaylor.blog/angular-universal-gotchas/ 进行服务器端渲染
Server.js
import 'zone.js/dist/zone-node';
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';
import * as domino from 'domino';
import * as fs from 'fs';
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
// Use the browser index.html as template for the mock window
//const distFolder = join(process.cwd(),'dist','YourProjectName','browser');
const template = fs.readFileSync(join(process.cwd(),'browser','index.html')).toString();
// Shim for the global window and document objects.
const window = domino.createWindow(template);
global['window'] = window;
Object.defineProperty(window.document.body.style,'transform',{
value: () => {
return {
enumerable: true,configurable: true
};
},});
global['document'] = window.document;
global['CSS'] = null;
global['navigator'] = window.navigator;
// Express server
const app = express();
const PORT = process.env.PORT || 4000;
const disT_FOLDER = join(process.cwd(),'dist/browser');
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory,LAZY_MODULE_MAP} = require('./dist/server/main');
// 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',disT_FOLDER);
// Example Express Rest API endpoints
// app.get('/api/**',(req,res) => { });
// Serve static files from /browser
app.get('*.*',express.static(disT_FOLDER,{
maxAge: '1y'
}));
// All regular routes use the Universal engine
app.get('*',res) => {
// res.render('index',{ req });
res.render(join(disT_FOLDER,'index.html'),{ req,res });
});
// Start up the Node server
app.listen(PORT,() => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
"myproj": {
...
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser","options": {
"outputPath": "dist/browser","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "src/tsconfig.app.json",...
"es5browserSupport": true
},"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
}
],....
}
}
},"serve": {
"builder": "@angular-devkit/build-angular:dev-server","options": {
"browserTarget": "myproj:build"
},"configurations": {
"production": {
"browserTarget": "myproj:build:production"
}
}
},"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n","options": {
"browserTarget": "myproj:build"
}
},"test": {
"builder": "@angular-devkit/build-angular:karma","options": {
"main": "src/test.ts","tsConfig": "src/tsconfig.spec.json","karmaConfig": "src/karma.conf.js","styles": [
"src/styles.css"
],"scripts": [],"assets": [
"src/favicon.ico","src/assets"
]
}
},"lint": {
"builder": "@angular-devkit/build-angular:tslint","options": {
"tsConfig": [
"src/tsconfig.app.json","src/tsconfig.spec.json"
],"exclude": [
"**/node_modules/**"
]
}
},"server": {
"builder": "@angular-devkit/build-angular:server","options": {
"outputPath": "dist/server","main": "src/main.server.ts","tsConfig": "src/tsconfig.server.json"
},"with": "src/environments/environment.prod.ts"
}
]
}
}
}
}
},"myproj-e2e": {
"root": "e2e/","projectType": "application","prefix": "","architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor","options": {
"protractorConfig": "e2e/protractor.conf.js","devServerTarget": "myproj:serve"
},"configurations": {
"production": {
"devServerTarget": "myproj:serve:production"
}
}
},"options": {
"tsConfig": "e2e/tsconfig.e2e.json","exclude": [
"**/node_modules/**"
]
}
}
}
}
},}
package.json
{
"name": "myproj","version": "0.0.0","scripts": {
"ng": "ng","start": "ng serve -o","build": "ng build --prod","test": "ng test","lint": "ng lint","e2e": "ng e2e","dev": "lite-server","compile:server": "webpack --config webpack.server.config.js --progress --colors","serve:ssr": "node dist/server","build:ssr": "npm run build:client-and-server-bundles && npm run compile:server","build:client-and-server-bundles": "ng build --prod && ng run myproj:server:production"
},"private": true,"dependencies": {
"@angular-devkit/build-angular": "^0.13.0","@angular/animations": "^7.2.15","@angular/cdk": "^8.1.2","@angular/common": "~7.2.0","@angular/compiler": "~7.2.0","@angular/core": "~7.2.0","@angular/forms": "^7.2.15","@angular/http": "^7.2.15","@angular/platform-browser": "~7.2.0","@angular/platform-browser-dynamic": "~7.2.0","@angular/platform-server": "~7.2.0","@angular/router": "~7.2.0",...
"@ng-toolkit/universal": "^7.1.2","@nguniversal/express-engine": "0.0.0","@nguniversal/module-map-ngfactory-loader": "0.0.0","webpack-cli": "^3.1.0","zone.js": "^0.11.3"
},"devDependencies": {
"@angular/cli": "~7.3.9","@angular/compiler-cli": "~7.2.0","@angular/language-service": "~7.2.0","@types/jasmine": "~2.8.8","@types/jasminewd2": "~2.0.3","@types/node": "~8.9.4","codelyzer": "~4.5.0",...
"webpack": "^4.46.0","webpack-dev-middleware": "^4.1.0","webpack-dev-server": "^3.11.2","webpack-hot-middleware": "^2.25.0"
}
}
myproj-routing.module.ts [多个动态参数的路由]
{
path: 'find',component: SearchComponent,children: [
{
path: ':category/:state/:suburb',component: HomeComponent,pathMatch: 'full',resolve: {
TradersList: TraderListResolve,serviceCategoryList: ServiceCategoryResolve
},},{
path: ':category/:state',{
path: ':category',}
]
},
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)