使用 Express 使用 AngularSSR

目录 (mù lù)

使用@nguniversal/express-engine实施SSR来创建Angulr项目。

发展之前

环境

创建一个 Angular 项目

使用 ng 命令来创建 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并进行确认。
另外，我也会确认来自服务器的返回数据。

通过使用@nguniversal/express-engine来实现SSR。

安装@nguniversal/express-engine并配置环境。

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

因为这不是手动安装，所以 SSR 的环境也会同时设置。

為了確認設定是否成功，我們將嘗試啟動伺服器。

% npm run dev:ssr

我們會在瀏覽器上確認是否沒有進行任何變更。
我們會在 SSR Localhost:4200 上檢查從伺服器傳來的資料。