Как настроить Angular cli + Angular универсальный?

У кого-нибудь есть опыт установки angular универсального проекта angular cli?

Я попытался следовать этому руководству:

https://universal.angular.io/quickstart/

Но после этого:

typings install node express body-parser serve-static express-serve-static-core mime --global

Я получаю ошибку:

typings INFO globaldependencies "express" lists global dependencies on "node" that must be installed manually
typings ERR! message Unable to find "node" ("npm") in the registry.
typings ERR! message However, we found "node" for 2 other sources: "dt" and "env"
typings ERR! message You can install these using the "source" option.
typings ERR! message We could use your help adding these typings to the registry: https://github.com/typings/registry
typings ERR! caused by https://api.typings.org/entries/npm/node/versions/latest responded with 404, expected it to equal 200
typings ERR! 
typings ERR! cwd /home/universal
typings ERR! system Linux 3.10.17
typings ERR! command "/usr/bin/node" "/usr/bin/typings" "install" "node" "express" "body-parser" "serve-static" "express-serve-static-core" "mime" "--global"
typings ERR! node -v v4.2.4
typings ERR! typings -v 2.0.0
typings ERR! 
typings ERR! If you need help, you may report this error at:
typings ERR!   <https://github.com/typings/typings/issues>

Ответ 1

Angular Cli теперь поддерживает это в версии 1.3.0-rc.0 и выше.

Вы можете установить эту версию, используя

npm install -g @angular/cli


Инструкции по установке из Angular Cli Wiki на Универсальный рендеринг

У меня есть демонстрационное приложение, которое можно найти на GitHub

Источник: https://github.com/joejordanbrown/angular-cli-universal

Live Demo: https://uixd.co.uk/open-source-software/angular-cli-universal/


Шаг 1. Создайте новое Angular приложение Cli

$ ng new angular-cli-universal

Шаг 2. Установка @ angular/platform-server

Установите в проект проект @ angular/platform-server. Убедитесь, что вы используете ту же версию, что и другие пакеты @angular в вашем проекте.

$ npm install --save-dev @angular/platform-server

или

$ yarn add @angular/platform-server

Шаг 3: Подготовьте свое приложение для универсальной рендеринга

Первое, что вам нужно сделать, это сделать ваш AppModule совместимым с Universal, добавив .withServerTransition() и идентификатор приложения в ваш импорт BrowserModule:

SRC/приложение/app.module.ts:

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    // Add .withServerTransition() to support Universal rendering.
    // The application ID can be any identifier which is unique on
    // the page.
    BrowserModule.withServerTransition({appId: 'my-app'}),
    ...
  ],

})
export class AppModule {}

Затем создайте модуль специально для своего приложения при работе на сервере. Он рекомендовал назвать этот модуль AppServerModule.

Этот пример помещает его рядом с app.module.ts в файл с именем app.server.module.ts:

SRC/приложение/app.server.module.ts:

import {NgModule} from '@angular/core';
import {ServerModule} from '@angular/platform-server';

import {AppModule} from './app.module';
import {AppComponent} from './app.component';

@NgModule({
  imports: [
    // The AppServerModule should import your AppModule followed
    // by the ServerModule from @angular/platform-server.
    AppModule,
    ServerModule,
  ],
  // Since the bootstrapped component is not inherited from your
  // imported AppModule, it needs to be repeated here.
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Шаг 4: Создайте основной файл сервера и tsconfig для его создания

Создайте основной файл для вашего универсального пакета. Этот файл должен экспортировать только AppServerModule. Он может идти в src. Этот пример вызывает этот файл main.server.ts:

SRC/main.server.ts:

export {AppServerModule} from './app/app.server.module';

Скопируйте tsconfig.app.json в tsconfig-server.json и измените его на создание с помощью "модуля" цели "commonjs".

Добавьте раздел для "angularCompilerOptions" и установите "entryModule" в свой AppServerModule, указанный как путь к импорту с хешем (#), содержащим имя символа. В этом примере это будет src/app/app.server.module # AppServerModule.

ЦСИ /tsconfig.server.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    // Set the module format to "commonjs":
    "module": "commonjs",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  // Add "angularCompilerOptions" with the AppServerModule you wrote
  // set as the "entryModule".
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

Шаг 5: Создайте файл сервера NodeJS Вам необходимо создать сервер NodeJS для рендеринга и обслуживания приложения. В этом примере используется выражение.

Установить экспресс и сжатие

$ npm install --save express compression @nguniversal/express-engine

или

$ yarn add express compression @nguniversal/express-engine

ЦСИ /express.server.js:

const path = require('path');
const fs = require('fs');
const express = require('express');
const compression = require('compression');
const ngExpressEngine = require('@nguniversal/express-engine').ngExpressEngine;

require('zone.js/dist/zone-node');
require('rxjs/add/operator/filter');
require('rxjs/add/operator/map');
require('rxjs/add/operator/mergeMap');

var hash;
fs.readdirSync(__dirname).forEach(file => {
  if (file.startsWith('main')) {
    hash = file.split('.')[1];
  }
});

const AppServerModuleNgFactory = require('./main.' + hash + '.bundle').AppServerModuleNgFactory;

const app = express();
const port = Number(process.env.PORT || 8080);

app.engine('html', ngExpressEngine({
  baseUrl: 'http://localhost:' + port,
  bootstrap: AppServerModuleNgFactory
}));


app.set('view engine', 'html');
app.set('views', path.join(__dirname, '/../browser'));

app.use(compression());
app.use('/', express.static(path.join(__dirname, '/../browser'), {index: false}));


app.get('/*', function (req, res) {
  res.render('index', {
    req: req,
    // res: res
  });
});

app.listen(port, function() {
  console.log(`Listening at ${port}`);
});

Шаг 6. Создайте новый проект в .angular-cli.json

В .angular-cli.json есть массив под ключевым "apps". Скопируйте конфигурацию для своего клиентского приложения и вставьте ее как новую запись в массив, а дополнительный ключ "платформа" настроен на "сервер".

Затем удалите ключ "polyfills" - они не нужны на сервере и не настроят "main" и "tsconfig", чтобы указать на файлы, которые вы написали на шаге 2. Наконец, настройте "outDir" на новый location (в этом примере используется dist/server).

.angular-cli.json:

{
  ...
  "apps": [
    {
      // Keep your original application config the same apart from changing outDir to dist/browser.
      // It will be app 0.
      "outDir": "dist/browser",
    },
    {
      // This is your server app. It is app 1.
      "platform": "server",
      "root": "src",
      // Build to dist/server instead of dist. This prevents
      // client and server builds from overwriting each other.
      "outDir": "dist/server",
      "assets": [
        "assets",
        "favicon.ico",
        "express.server.js"
      ],
      "index": "index.html",
      // Change the main file to point to your server main.
      "main": "main.server.ts",
      // Remove polyfills.
      // "polyfills": "polyfills.ts",
      "test": "test.ts",
      // Change the tsconfig to point to your server config.
      "tsconfig": "tsconfig.server.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  ...
}

Построение пакета

По завершении этих шагов вы должны будете создать серверный пакет для своего приложения, используя флаг -app, чтобы сообщить CLI о создании пакета серверов, ссылаясь на его индекс 1 в массиве "apps". угловой-cli.json:

# This builds the client application in dist/browser/
$ ng build --prod
...
# This builds the server bundle in dist/server/
$ ng build --prod --app 1
Date: 2017-07-24T22:42:09.739Z
Hash: 9cac7d8e9434007fd8da
Time: 4933ms
chunk {0} main.988d7a161bd984b7eb54.bundle.js (main) 9.49 kB [entry] [rendered]
chunk {1} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [entry] [rendered]

Запуск экспресс-сервера

$ node dist/server/express.server.js

Просмотрите Angular Cli Wiki для получения более подробной информации https://github.com/angular/angular-cli/wiki/stories-universal-rendering

Ответ 2

Вы можете использовать универсальный cli из https://github.com/devCrossNet/angular-cli

Это вилка из angular -cli, но эта работа с angular универсальна.

После того, как вы включили npm install -g universal-cli создать новый проект с помощью

ung new PROJECT_NAME --universal

Затем проект должен быть готов к работе с

cd PROJECT_NAME ung serve

Я не тестировал существующий проект angular -cli, но, возможно, ung init --universal мог помочь

Ответ 3

Теперь выпущен Angular -cli 1.3, документация была обновлена ​​для включения Universal с руководством здесь. Существует руководство и образец для того, чтобы все это работало с Universal + material 2 и Express Server здесь.