dir.by  
  Search  
Programming, development, testing
Angular
Используем Docker в проекте с Angular (под Windows)
  Looked at 5322 times       Comments 1  
 Last Comment: (19 July 2021 14:35) Спасибо тебе, добрый человек! read...       Write a comment...
 Используем Docker в проекте с Angular (под Windows) 
last updated: 21 December 2020
Шаг 1. Устанавливаем Docker для Windows
Шаг 2. Скачиваем пример Angular
Шаг 3. Добавляем файл Dockerfile
Добавим код в
  Файл Dockerfile
FROM node:latest
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 4200 49153
CMD npm run start
Строка FROM node:latest устанавливает версию узла для использования в образе докера.

Затем мы устанавливаем каталог или папку, в которой мы будем работать в этой среде (внутри образа докера). Я выбрал /app для простоты.

Затем мы запускаем npm install установку всех пакетов в эту среду.
Открываем два порта, 4200 потому что сервер разработки Angular работает на этом порту, 49153 потому что это порт прямой перезагрузки Angular.
Шаг 4. Добавляем файл docker-compose.yml
Добавим код в
  Файл docker-compose.yml
version: "3.7"
services:
  dashboard:
    build: .
    ports:
      - "4200:4200"
      - "49153:49153"
    volumes:
      - "/app/node_modules"
      - ".:/app"
Шаг 5. Добавим start в файл package.json
  Файл package.json
{
     "name": "my_example_angular_8",
     "version": "1.0.0",
     "description": "My Angular 8 Project",
     "scripts": {
          "start": "ng serve",
          "build": "ng build",
          "start": "ng serve --host 0.0.0.0 --poll 500"
     },
     "dependencies": {
          "@angular/common": "~8.1.0",
          "@angular/compiler": "~8.1.0",
          "@angular/core": "~8.1.0",
          "@angular/forms": "~8.1.0",
          "@angular/platform-browser": "~8.1.0",
          "@angular/platform-browser-dynamic": "~8.1.0",
          "@angular/router": "~8.1.0",
          "rxjs": "~6.4.0",
          "zone.js": "~0.9.1"
     },
     "devDependencies": {
          "@angular-devkit/build-angular": "~0.801.0",
          "@angular/cli": "~8.1.0",
          "@angular/compiler-cli": "~8.1.0",
          "@types/node": "~8.9.4",
          "typescript": "~3.4.3"
     }
}
--poll сообщает клиенту каждые 500 миллисекунд проверять, есть ли какие-либо новые изменения.
Шаг 6. В терминальной строке выполняем команду "docker-compose up"
Шаг 7. Откроем Dashboard
Запускаем образ
Шаг 8. Откроем Google Chrome
Вводим адрес http://localhost:4200
Все работает!
 
← Previous topic
Error "Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js)" | nodejs npm angular
 
Next topic →
Angular Flex-Layout
 
Your feedback ... 1 Comments
mirninec
19 July 2021 14:35
Спасибо тебе, добрый человек!
   
Your Name
Your comment (www links can only be added by a logged-in user)

  Объявления  
  Объявления  
 
Что такое Angular 8?
Новое приложение Angular 8
Вариант 1. Создаем новое Angular приложение с консоли командой angular/cli (50 файлов)
Создаем новое web приложение с Angular 8. Используем командную строку: npx -p @angular/cli@8.1.0 ng new
Вариант 2 (для меня лучший). Создаем новое Angular приложение сами (8 файлов)
Create a new web application with Angular 8 in Visual Studio Code. We use: Node.js + Angular (write our component in ts file) + Typescript (convert files ts to js)
Что происходит при запуске Angular 8 приложения? Запуск main.ts файла. Создание модуля.
Angular 9
Создаем новое web приложение с Angular 9 в Visual Studio Code. Используем: Node.js + Angular (пишем нашу компоненту в ts файле) + Typescript (конвертация файлов ts в js)
Angular 12
Создаем новое web приложение с Angular 12 в Visual Studio Code. Используем: Node.js + Angular (пишем нашу компоненту в ts файле) + Typescript (конвертация файлов ts в js)
В web приложение с Angular 12 добавляем маршрутизацию (router)
Описание Angular
Модули в Angular
Компоненты в Angular
Привязка данных в Angular
Errors
Error "npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spell included, verify that the path is correct and try again." | nodejs npm angular
Error "npm ERR! While resolving: @angular/flex-layout@12.0.0-beta.35 | Could not resolve dependency: | Conflicting peer dependency: @angular/cdk@12.2.13" | nodejs npm angular
ng serve Error "ng : The term 'ng' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spellin the path is correct and try again." | nodejs npm angular
ng serve Error "File ng.ps1 cannot be loaded. The file ng.ps1 is the current system." | nodejs npm angular
Error "Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js)" | nodejs npm angular
Docker для Angular
Используем Docker в проекте с Angular (под Windows)
Angular Flex-Layout
Angular Flex-Layout
WWW сайты для изучения Angular
Сайты для изучения Angular

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика