ng build --prod не работает на контейнере Docker - PullRequest
0 голосов
/ 13 октября 2018

Я пытаюсь развернуть приложение стека MEAN в контейнере Docker.Код для стекового приложения 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

Так как я дал своему изображению метку из стека.В интерактивном режиме я создаю каталог / data / db, необходимый для MongoDB.Я запускаю Mongo с помощью команды "mogod &".Я запускаю npm install в каталогах Node JS и Angular.

Теперь проблема начинается.Когда я пытаюсь выполнить команду "ng build --prod" в директории blog Angular CLI, я получаю всевозможные странные ошибки.Когда я выполняю «ng build», он работает нормально, и я могу просматривать приложение в своем браузере после запуска npm в каталоге Node Js «blog-backend».

Почему нет -прод работа?Вот ошибки, которые я получаю:

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

1 Ответ

0 голосов
/ 14 октября 2018

Флаг --prod включает компиляцию Angular AOT и имеет некоторые ограничения относительно того, как нам нужно писать код.

1) login-register.component.html (19,36): Свойство 'onLogin' не существует для типа 'LoginRegisterComponent'.

Это означает, что шаблон определяет метод onLogin, но вы не определили его для LoginRegisterComponent class.

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

2) login-register.component.html (85,42): свойство 'resisterUser' не существует для типа 'LoginRegisterComponent'

то же, что и выше:

export class LoginRegisterComponent implements OnInit {
  onLogin() {
  }

  resisterUser() { <== add this
  }

3) note-form.component.html (89,15): предоставляемые параметры не соответствуют ни одной сигнатуре цели вызова.

В note-form.component.html вы вызываете метод addText без параметров:

(click)="addText()"

, а в компоненте вы определяете этот метод с обязательным параметром 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'
  }
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...