Dynami c Рендеринг в Angular8

Question

Требуется, чтобы стиль отображался динамически в соответствии с конфигурацией на сервере.

Пример:

    Path :/customer?customerId=1

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

    /customer?customerId=2

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

Мне было решено следовать универсальному подходу angular, который помогает мне рендеринг html на стороне сервера путем запроса конфигурации сервера.

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

styleDet - это динамическое c содержимое, которое должно быть вставлено в индекс. html, но не работает.

Я перешел на другой подход, чтобы использовать шаблонизатор с помощью pug.

Установлен pug в зависимостях dev:

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

пакета. 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.s css

//common rules go here
//...

//customer specific rules below

body.customer1{

// ...rules for customer 1
}

body.customer2{

// ...rules for customer 2
}

Затем в компоненте приложения или в любом другом компоненте, в котором вы знаете клиента, динамически добавьте соответствующий класс к элементу 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 для каждого отдельного набора стилей, которые вы хотите динамически изменять.