node.js - ng build --prod 不适用于 Docker 容器

Question

我正在尝试在 Docker 容器上部署 MEAN 堆栈应用程序。 MEAN 堆栈应用程序的代码位于 https://github.com/shivkiyer/quicknoteapp

我为该镜像创建了一个 Docker 文件:

FROM ubuntu:latest

RUN apt-get update && \
    apt-get install -y git && \
    apt-get install -y curl

RUN apt-get install -y build-essential checkinstall libssl-dev

RUN curl -sL https://deb.nodesource.com/setup_10.x | bash

RUN apt-get install -y nodejs

RUN apt-get update

RUN npm -v

RUN npm cache clean -f && \
    npm install -g @angular/cli

RUN apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334BD75D9DCB49F368818C72E52529D4 && \
    echo "deb [ arch=amd64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.0 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-4.0.list && \
    apt-get update

RUN apt-get install -y --no-install-recommends apt-utils && \
    apt-get update && \
    DEBIAN_FRONTEND=noninteractive apt-get install -y tzdata

RUN apt-get install debconf-utils

RUN DEBIAN_FRONTEND=noninteractive apt-get install -y mongodb-org

EXPOSE 8080 4200

Docker 镜像构建正常。我创建一个容器: docker容器运行-it --name Meanstack2 --mount type=bind,source="$(pwd)",target=/home/mean --publish 4200:4200 Meanstack

自从我给我的图像添加了meanstack标签。在交互模式下，我创建了 MongoDB 所需的/data/db 目录。我用命令“mogod &”启动 Mongo。我在 Node JS 和 Angular 目录中运行 npm install。

现在问题开始了。当我尝试在 Angular CLI 目录 blog-frontend 中执行“ng build --prod”时，我收到各种奇怪的错误。当我执行“ng build”时，它工作得很好，在 Node Js 目录“blog-backend”中执行 npm start 后，我​​可以在浏览器上查看该应用程序。

为什么 --prod 不起作用？这些是我得到的错误:

ERROR in ng:///home/mean/blog-frontend/src/app/login-register/login-register.component.html (19,36): Property 'onLogin' does not exist on type 'LoginRegisterComponent'.
ERROR in ng:///home/mean/blog-frontend/src/app/login-register/login-register.component.html (85,42): Property 'resisterUser' does not exist on type 'LoginRegisterComponent'.
ERROR in ng:///home/mean/blog-frontend/src/app/welcome-page/welcome-page.component.html (35,38): Property 'onLogin' does not exist on type 'WelcomePageComponent'.
ERROR in ng:///home/mean/blog-frontend/src/app/note/note-form/note-form.component.html (89,15): Supplied parameters do not match any signature of call target.
ERROR in ng:///home/mean/blog-frontend/src/app/note/note-form/note-form.component.html (95,15): Supplied parameters do not match any signature of call target.
ERROR in /home/mean/blog-frontend/src/app/shared/topics.service.ts (10,33): Property 'configSettings' does not exist on type '{ production: boolean; baseURL: string; }'.
ERROR in /home/mean/blog-frontend/src/app/shared/sub-topics.service.ts (12,33): Property 'configSettings' does not exist on type '{ production: boolean; baseURL: string; }'.
ERROR in /home/mean/blog-frontend/src/app/shared/note.service.ts (14,33): Property 'configSettings' does not exist on type '{ production: boolean; baseURL: string; }'.

Answer 1

标志 --prod 包括 Angular AOT 编译，它对我们编写代码的方式有一些限制。

1) login-register.component.html (19,36):属性“onLogin”不 存在于“LoginRegisterComponent”类型中。

这意味着模板定义了 onLogin 方法，但您没有在 LoginRegisterComponent 上定义它类。

export class LoginRegisterComponent implements OnInit {
  onLogin() { <== must be here
  }

2) login-register.component.html (85,42): 类型“LoginRegisterComponent”上不存在属性“resisterUser”

同上:

export class LoginRegisterComponent implements OnInit {
  onLogin() {
  }

  resisterUser() { <== add this
  }

3) note-form.component.html (89,15):提供的参数与调用目标的任何签名都不匹配。

在 note-form.component.html 中，您调用不带参数的 addText 方法:

(click)="addText()"

在组件中时，您 defined此方法带有必需的参数 textValue

addText(textValue: any) {
  ...
}

要修复它，只需将其设为可选即可

addText(textValue?: any) {
  ...
}

4) note-form.component.html (95,15):提供的参数与调用目标的任何签名都不匹配。

与addCode相同

模板:

(click)="addCode()"

组件:

addCode(codeValue: any) {
  ...
}

修复:

addCode(codeValue?: any) {
  ...
}

5) 类型上不存在属性“configSettings”。

此错误与 AOT 无关，而是与 Angular CLI 限制有关。

生产配置的形状应与开发配置的形状相匹配。

环境.ts

export const environment = {
  production: false,
  configSettings: {
    baseURL: 'http://localhost:4200/api'
  }
};

使用上面的配置，您必须定义具有相同属性的生产配置，但您具有:

环境.prod.ts

export const environment = {
  production: true,
  baseURL: '/api'
};

解决方案:

环境.prod.ts

export const environment = {
  production: true,
  configSettings: {
    baseURL: '/api'
  }
};