Angular Universal：我需要在服务器上安装 npm 包吗？答案

【问题标题】：Angular Universal: Do I need to install the npm packages on the server?Angular Universal：我需要在服务器上安装 npm 包吗？
【发布时间】：2018-05-10 19:15:12
【问题描述】：

如果我创建一个普通的 Angular 应用程序（例如使用 Angular CLI），构建会将所有 Javascript 放在一些包中。这些包包含我所有的自定义代码以及我的应用程序所依赖的 npm 包的代码（例如 Angular 核心、moment）。

现在我正在使用 Universal 来预渲染我的 Angular 应用程序。构建过程会创建一个 main.bundle.js，它在 server.js (https://angular.io/guide/universal) 中引用。是不是这个包不包含引用的 npm 包的代码？我必须在运行 Universal 的服务器上再次安装所有这些软件包？

还是我做错了什么？

非常感谢。

【问题讨论】：

标签： angular universal angular-universal

【解决方案1】：

我可以确认这不是真的。你不需要安装 npm 包来运行服务器。 main.bundle.js 包含所有需要的内容。例如，这是一个 Dockerfile，它在一个阶段构建 Angular 项目，在下一阶段它运行服务器。在这里，npm 包仅在构建阶段安装。在服务器运行的下一阶段，只需复制 dist 文件夹并安装 no npm 包。

FROM node:8.10.0 AS ausbuilder
RUN useradd --create-home --shell /bin/bash aus; \
    chown -R aus /home/aus
USER aus
WORKDIR /home/aus
COPY aus/ /home/aus
RUN mkdir /home/aus/.npm; \
    npm config set prefix /home/aus/.npm; \
    npm install --quiet --no-progress -g webpack@3.11.0; \
    npm install --quiet --no-progress -g @angular/cli@1.7.2; \
    npm install --quiet --no-progress;
ENV PATH=/home/aus/.npm/bin:$PATH
RUN npm run build; \
    webpack --config webpack.server.config.js --no-progress

FROM keymetrics/pm2:8-alpine
RUN adduser -h /home/aus -s /bin/bash aus; \
    chown -R aus /home/aus
USER aus
WORKDIR /home/aus
COPY --from=ausbuilder /home/aus/dist /home/aus/dist
EXPOSE 4000/tcp
ENTRYPOINT ["pm2-runtime","start","/home/aus/dist/server.js"]

【讨论】：

感谢您的确认。你知道我可能做错了什么吗？ server.js 需要一些包，如 express，但我不明白为什么我必须安装 angular 应用程序本身使用的包？
在设置 Angular 通用时，您是否按照angular.io/guide/universal 的官方指南进行操作。你需要在你的 Angular 项目中为 Universal 安装以下 npm 包，npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine。当您在 Angular 项目中安装这些时，它们会转到您的 main.bundle.js，然后在您的 server.ts 中，您只需要导入 express
另外，当我第一次按照本指南创建通用应用程序时，我观察到以下 Webpack 3 与高于 3.5.0 的 ts-loader 版本不兼容。在开发这个时，Angular CLI 的最新版本是 1.7.2，它使用 Webpack 3.*。因此，在设置 Angular Universal 时，安装文档中使用的 ts-config@3.5.0 webpack.ContextReplacementPlugin 插件语法似乎不适用于 Webpack 3.*，因此我不得不使用替代语法。我的 server.ts：github.com/saptarshibasu/angular-universal-setup/blob/master/…

【解决方案2】：

您需要在进行渲染或预渲染的服务器上安装用于服务器端渲染的 npm 包（它们两者不同）。从你所说的，你想使用预渲染。在这种情况下，您需要在将预生成 html 页面的服务器上安装所需的 npm 包（例如，可以是您的登台服务器）。

npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine

预呈现所有页面后，您需要将这些页面（以及在构建应用程序时首先生成的 js 文件）复制到生产服务器上。从那里，您可以使用任何您想要的网络服务器（nginx、apache、express、..）为这些页面提供服务，因为它们都是静态（html/js）内容。你不需要 npm 包，甚至不需要这里的节点（如果你想使用 express 服务它们）

否则，如果您想使用动态渲染，那么是的，您需要在生产服务器上使用 express 和 npm 包

【讨论】：

【解决方案3】：

生成的dist/server/main.js 包含对您的应用使用的所有节点包的引用。如果您将触发快速服务器而不通过 webpack 对其进行转译 - 那么是的。您将需要安装 npm 包。

但是，如果您将创建服务器 .ts 文件并将其提供给 webpack 以通过指南中的 webpack --config webpack.server.config.js 进行转译，那么您通常会生成巨大的 dist/server.js 文件

此文件包含合并到单个文件中的所有依赖项，因此 不需要 需要存在包。执行node dist/server 将启动您的应用程序并且它是自包含的。 IE。您可以删除除dist 文件夹之外的任何内容，它会起作用。

【讨论】：