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 container run -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 限制有关。

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

environment.ts

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

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

environment.prod.ts

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

解决方案：

environment.prod.ts

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