Приложение Angular не загружается через Docker

У меня есть приложение Angular, которое отлично работает, когда я запускаю ng serve из командной строки. Однако, когда я помещаю приложение в контейнер Docker и пытаюсь запустить контейнер, я получаю эту ошибку в DOM (просто отрывок):

  Uncaught Error: Template parse errors:
    Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
      <div class = "col-md-6 offset-md-3">
        <h2>Register new User</h2>
        <form [ERROR ->][formGroup] = "registerForm" (ngSubmit) = "onSubmit()">
          <div class = "form-group">
            "): ng:///AppModule/RegisterComponent.html@5:14
     No provider for ControlContainer ("
      <div class = "col-md-6 offset-md-3">
        <h2>Register new User</h2>
        [ERROR ->]<form [formGroup] = "registerForm" (ngSubmit) = "onSubmit()">
          <div class = "form-group">
      "): ng:///AppModule/RegisterComponent.html@5:8
    No provider for NgControl ("
          <div class = "form-group">
            <label>First Name</label>
            [ERROR ->]<input type = "text" formControlName = "firstName" 
    class = "form-control" [ngClass] = "{ 'is-invalid': submit"): ng:///AppModule/RegisterComponent.html@8:12
    No provider for NgControl ("
          <div class = "form-group">
            <label>Last Name</label>
            [ERROR ->]<input type = "text" formControlName = "lastName" class = "form-control" [ngClass] = "{ 'is-invalid': submitt"): ng:///AppModule/RegisterComponent.html@15:12
ng:///AppModule/RegisterComponent.html@39:12
    at syntaxError (compiler.js:215)
    at 




    TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)

Мой Dockerfile (который создается в правильном месте) выглядит следующим образом:

# Stage 1 Build
FROM node:8.11.3
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH ./node_modules/bin:$PATH
COPY package*.json ./
RUN npm install
RUN npm install -g @angular/[email protected]
COPY . /usr/src/app
CMD ng serve --host 0.0.0.0

#Stage 2
FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
WORKDIR /usr/share/nginx/html
COPY dist/ .

Многие из решений, которые я исследовал до сих пор, включают внесение изменений в файл app.module.ts, которые позволяют импортировать и экспортировать FormsModule и ReactiveFormsModule:

 exports: [FormsModule, ReactiveFormsModule, CommonModule],
 imports: [
BrowserModule,
FormsModule,
HttpClientModule,
HttpModule,
ReactiveFormsModule,
CommonModule,
RouterModule.forRoot(appRoutes)

Но мне все еще не удалось заставить это работать через Docker. Кто-нибудь сталкивался с этой проблемой в прошлом?

Только предположение, но разве для некоторых пакетов angular, которые вы устанавливаете, уже не требуется angular cli? Что я имею в виду: может быть, попробуйте установить angular cli, прежде чем выполнять npm install

AirLancer 07.09.2018 16:32

Я переключил две инструкции по установке RUN npm, так что сначала идет angular cli. Но, похоже, дает тот же результат. Хотя очень признателен, даже не подумал об этом.

SamRR_75 07.09.2018 16:39

Еще одна странная мысль: команды «RUN» dockerfile не обязательно выполняются в ожидаемом вами порядке, поскольку они могут быть кэшированы. Так что, возможно, может помочь один «RUN» с командами, объединенными с «&&».

AirLancer 07.09.2018 16:51

Что-то вроде «ЗАПУСТИТЬ npm install -g @ angular / cli @ 6.0.8 && npm install»?

SamRR_75 07.09.2018 16:53

Практически, оставьте вторую строку «RUN»: RUN npm install -g @ angular / cli @ 6.0.8 && npm install или, если вы хотите, чтобы она была более читаемой: RUN npm install -g @ angular / cli @ 6.0.8 \ (new строка здесь) npm install

AirLancer 07.09.2018 16:56

Все еще вижу те же ошибки :(

SamRR_75 07.09.2018 16:58
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
6
220
0

Другие вопросы по теме