search
LoginSignup
0
Help us understand the problem. What are the problem?

posted at

AngularでSSR環境を作成する

Express で AngularSSR を利用する

table of contents

  1. Angulr のプロジェクトを作成する
  2. @nguniversal/express-engine を利用して SSR を実装する

before development

環境

Package Version
@angular-devkit/architect 0.1303.8
@angular-devkit/build-angular 13.3.8
@angular-devkit/core 13.3.8
@angular-devkit/schematics 13.3.8
@angular/cli 13.3.8
@nguniversal/builders 13.1.1
@nguniversal/express-engine 13.1.1
@schematics/angular 13.3.8
rxjs 6.6.7
typescript 4.6.4

1. Angular の Project を作成する

ng commandを利用して Angular のプロジェクトを作成します。

% ng new angular-ssr-express
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss

% cd angular-ssr-express

起動して、angular が動くか確認します。

% npm run serve

localhost:4200を起動して確認します。
また、serverからの返却データも同様に確認します。

base-angular.png
スクリーンショット 2022-06-19 12.17.23.png

2. @nguniversal/express-engine を利用して SSR を実装する

@nguniversal/express-engineを install して環境を整える。

% ng add @nguniversal/express-engine
The package @nguniversal/express-engine@13.1.1 will be installed and executed.
Would you like to proceed? Yes

Manual インストールではないため、SSR の環境も同時に設定されます。

設定ができたか確認するため、Server を起動してみます。

% npm run dev:ssr

Browserからは同様に変更がないことを確認します。
SSR Localhost:4200で Server からのデータを確認します。

base-angular.png

スクリーンショット 2022-06-19 12.43.46.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0
Help us understand the problem. What are the problem?