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'
  }
};

ng build --prod无法在Docker容器上运行

1 个答案: