Добавьте статический предварительный рендеринг в ng add @ nguniversal / express-engine - PullRequest
Новая
       5

Добавьте статический предварительный рендеринг в ng add @ nguniversal / express-engine

0 голосов
/ 08 декабря 2018

Я добавил рендеринг на стороне сервера в свой проект Angular, следуя документации Angular здесь .

Я обнаружил, что команды для запуска статического предварительного рендеринга npm run build:prerender и npm run serve:prerender не было здесь после использования команды CLI:

ng add @nguniversal/express-engine --clientProject [angular.projet]

Мне интересно, поддерживается ли статический предварительный рендеринг в Universal?Сгенерированный код полностью связан с динамическим SSR.

Это странно, потому что я нашел эти команды на universal-starter .

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

Чтобы воспроизвести, запустите в терминале:

  • ng new foo, чтобы начать новый проект
  • ng add @nguniversal/express-engine --clientProject foo добавить универсальный

Спасибо за помощь.

1 Ответ

0 голосов
/ 11 декабря 2018

Я нашел способ добавить статический предварительный рендеринг вручную.

Для тех, кто заинтересован, все шаги по ручному добавлению статического предварительного рендеринга в ng add @nguniversal/express-engine:

  1. ng add @nguniversal/express-engine --clientProject [your project name] для инициализации модуля приложения на стороне сервера app.server.module.ts

  2. Создание файлов prerender.ts и static.paths.ts на корневом уровневашего проекта рядом с server.ts

  3. Скопируйте содержимое https://github.com/angular/universal-starter/blob/master/prerender.ts в ваш prerender.ts файл

  4. Создайте своймаршруты в вашем static.paths.ts по примеру https://github.com/angular/universal-starter/blob/master/static.paths.ts

  5. Добавьте запись предварительного представления в ваш webpack.server.config.js: 

    module.exports = {
  mode: 'none',
  entry: {
    server: './server.ts',
    prerender: './prerender.ts'
  },

  6. Добавьте сценарии предварительного представленияв вашем package.json: 

    "scripts": {
    ...
    "build:prerender": "npm run build:client-and-server-bundles && npm run compile:server && npm run generate:prerender",
    "generate:prerender": "cd dist && node prerender",
    "serve:prerender": "cd dist/browser && http-server"
  }

  7. Отредактируйте строку 17 вашего prerender.ts с помощью 

    const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

  8. Установите пакет http-сервер для обслуживания предварительной сборки: 

    npm install http-server --save-dev

  9. Теперь вы готовы к работе! 

    npm run build:prerender && npm run serve:prerender


Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.0.10:8080
Hit CTRL-C to stop the server
...