Angular8中的动态渲染

Question

需求是根据服务器中的配置动态呈现样式。

示例：

    Path :/customer?customerId=1

    <link rel="stylesheet" href="customer1.css">

    /customer?customerId=2

    <link rel="stylesheet" href="customer2.css>

我决定采用角度通用的方法，通过查询服务器配置，帮助我在服务器端呈现html。

app.get('/customer:customerId', (req, res) => {
  console.log("hello");
  // console.log(pug)
  res.render('index', { req, styleDet : 'customer1' });
});

styleDet是应该注入到index.html中的动态内容，但这不起作用。

我被转移到另一种方法使用模板引擎使用帕格。

在dev依赖项中安装了pug：

npm install --save pug

server.ts

import 'zone.js/dist/zone-node';

import * as express from 'express';
import * as pug from 'pug';
import {join} from 'path';

// 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, ngExpressEngine, provideModuleMap} = require('./dist/server/main');

// // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
// app.engine('pug', ngExpressEngine({
//   bootstrap: AppServerModuleNgFactory,
//   providers: [
//     provideModuleMap(LAZY_MODULE_MAP)
//   ]
// }));

app.set('view engine', 'pug');
app.set('views', 'src');

// 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('*', (req, res) => {
  console.log("hello");
  // console.log(pug)
  res.render('index', { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

这是结果模块找不到错误。

Error: Cannot find module 'pug'
    at webpackEmptyContext (/Users/boopathi/Documents/Projects/Angular-Universal/ssr/dist/server.js:17271:10)
    at new View (/Users/boopathi/Documents/Projects/Angular-Universal/ssr/dist/server.js:17162:38)
    at Function.render (/Users/boopathi/Documents/Projects/Angular-Universal/ssr/dist/server.js:12379:12)
    at ServerResponse.render (/Users/boopathi/Documents/Projects/Angular-Universal/ssr/dist/server.js:24813:7)
    at /Users/boopathi/Documents/Projects/Angular-Universal/ssr/dist/server.js:143:9
    at Layer.handle [as handle_request] (/Users/boopathi/Documents/Projects/Angular-Universal/ssr/dist/server.js:15833:5)
    at next (/Users/boopathi/Documents/Projects/Angular-Universal/ssr/dist/server.js:14754:13)
    at Route.dispatch (/Users/boopathi/Documents/Projects/Angular-Universal/ssr/dist/server.js:14729:3)
    at Layer.handle [as handle_request] (/Users/boopathi/Documents/Projects/Angular-Universal/ssr/dist/server.js:15833:5)
    at /Users/boopathi/Documents/Projects/Angular-Universal/ssr/dist/server.js:14229:22

package.json

{
  "name": "ssr",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "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 ssr:server:production --bundleDependencies all"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/platform-server": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@nguniversal/express-engine": "^8.2.6",
    "@nguniversal/module-map-ngfactory-loader": "v8.2.6",
    "@types/pug": "^2.0.4",
    "express": "^4.15.2",
    "pug": "^2.0.4",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.24",
    "@angular/cli": "~8.3.24",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "nodemon": "^2.0.3",
    "protractor": "~5.4.0",
    "ts-loader": "^5.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3",
    "webpack-cli": "^3.1.0"
  }
}

请帮助我解决这个问题，或建议我任何其他更可行的方法。

Answer 1

如果不介意在构建中包括样式，可以将不同的样式添加到styles.scss文件中。

styles.scss

//common rules go here
//...

//customer specific rules below

body.customer1{

// ...rules for customer 1
}

body.customer2{

// ...rules for customer 2
}

然后，在您的app组件或您认识客户的任何组件中，动态地将相应的类添加到body元素中。

component.ts

import {DOCUMENT} from "@angular/common";
import {Renderer2} from '@angular/core';


constructor(@Inject(DOCUMENT) private document: any, private renderer: Renderer2)
{
}

//add this when you subscribe to route change, or ngOnInit
this.renderer.addClass(this.document.body, 'customer1');//or customer2

替代

您还可以根据当前客户直接在组件中添加正确的css链接。但是，使用这种方法，我不认为在加载页面时css不会内联，所以显示可能会慢一点

const link = this.renderer.createElement('link');
this.renderer.setAttribute(link, 'rel', 'stylesheet');
this.renderer.setAttribute(link, 'href', 'customer1.css');
this.renderer.appendChild(this.document.head, link);

Answer 2

创建一个带有ThemeComponent的encapsulation: ViewEncapsulation.None，并将此组件中的所有样式视为全局样式。然后，您可以将该组件放置在应用程序中的任何位置，并使用*ngIf有条件地应用这些样式。为要动态更改的每一组不同的样式创建不同的ThemeComponent。