web-dev-qa-db-ja.com

設定方法Angular cli + Angularユニバーサル？

angular Universal with 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>
angularangular-universal
11
Vladimir Djukic

Angular Cliはバージョン1.3.0-rc.0以降でこれをサポートするようになりました。

このバージョンは、を使用してインストールできます

npm install -g @angular/cli

Angular Cli Wiki on Universal Rendering からのセットアップ手順

GitHubにあるデモアプリがあります

出典：https://github.com/joejordanbrown/angular-cli-universal

ライブデモ：https://uixd.co.uk/open-source-software/angular-cli-universal/

ステップ1：新しいを作成するAngular Cli App

$ 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：ユニバーサルレンダリング用にアプリを準備します

最初に行う必要があるのは、BrowserModuleインポートに.withServerTransition（）とアプリケーションIDを追加して、AppModuleをUniversalと互換性を持たせることです。

src/app/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.server.module.tsという名前のファイルにapp.module.tsと一緒に配置します。

src/app/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になります。

src/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サーバーを作成する必要があります。この例では、エクスプレスを使用しています。

Expressと圧縮をインストールする

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

または

$ yarn add express compression @nguniversal/express-engine

src/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」の下に配列があります。クライアントアプリケーションの構成をそこにコピーし、追加のキー「platform」を「server」に設定して、アレイの新しいエントリとして貼り付けます。

次に、「polyfills」キーを削除します。これらはサーバーでは不要であり、「main」と「tsconfig」を調整して、手順2で書き込んだファイルを指します。最後に、「outDir」を新しい場所に調整します（これは例では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にサーバーバンドルを構築するように指示し、.angular-cliの「apps」配列でインデックス1を参照して、アプリケーションのサーバーバンドルを構築できるようになります。 .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

10
J J B

https://github.com/devCrossNet/angular-cli からuniversal-cliを使用できます

これはangular-cliからのフォークですが、これはangularユニバーサルで動作します。

npm install -g universal-cliを使用した後、で新しいプロジェクトを作成します

ung new PROJECT_NAME --universal

その後、プロジェクトはで提供する準備ができている必要があります

cd PROJECT_NAME ung serve

私は既存のangular-cliプロジェクトでテストしていませんが、おそらくung init --universalが役立つ可能性があります

1
Sergio Contreras Sustaita