dir.by  
  Поиск  
Компьютер, программы
Angular
 Используем Docker в проекте с Angular (под Windows) 
посмотрели 7434 раз
обновлено: 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)

  Объявления  
  Объявления  
 
What is Angular 8?
New Angular 8 application
Option 1. Creating a new Angular application from the console with the angular/cli command (50 files)
Creating a new web application with Angular 8. Using the command line: npx -p @angular/cli@8.1.0 ng new
Option 2 (the best for me). Creating a new Angular application yourself (8 files)
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)
What happens when I start an Angular 8 application? Run main.ts file. Creating a module.
Angular 9
Creating a new web application with Angular 9 in Visual Studio Code. Use: Node.js + Angular (write our component in the ts file) + Typescript (convert ts files to js)
Angular 12
Creating a new web application with Angular 12 in Visual Studio Code. Use: Node.js + Angular (write our component in the ts file) + Typescript (convert ts files to js)
Adding routing (router) to the web application with Angular 12
Angular Description
Modules in Angular
Components in Angular
Binding data in 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 for Angular
Using Docker in a project with Angular (for Windows)
Angular Flex-Layout
Angular Flex-Layout
WWW Sites to Learn Angular
Sites to learn Angular

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