dir.by  
  Search  
Programming, development, testing
Angular
Создаем новое web приложение с Angular 12 в Visual Studio Code. Используем: Node.js + Angular (пишем нашу компоненту в ts файле) + Typescript (конвертация файлов ts в js)
  Looked at 2888 times    
 Создаем новое web приложение с Angular 12 в Visual Studio Code. Используем: Node.js + Angular (пишем нашу компоненту в ts файле) + Typescript (конвертация файлов ts в js) 
last updated: 7 Augusta 2021
my_example_angular_12.zip ...
размер: 4 kb
Структура файлов:
На заметку! если назвать проект с восклицательными знаками например так: D:/my_example_angular_12!!! то при выполнении будет ошибка
D:/my_example_angular_12
        angular.json                  файл настройки Angular
        package.json                  файл настройки Node.js (содержит названия пакетов)
        tsconfig.json                  файл настройки TypeScript
        tsconfig.app.json          файл настройки TypeScript
        .vscode
                launch.json            файл настройки для Visual Studio Code (путь к запускаемому файлу)
        src
                index.html
                main.ts
                polyfills.ts
                app
                        app.component.html
                        app.component.scss
                        app.component.ts
                        app.module.ts
Как запустить пример локально у себя на компьютере?
Шаг 1.
Открываем
Visual Studio Code
и выбираем папку
В Visual Studio Code нажимаем на меню FileOpen Folder
и выбираем папку D:/my_example_angular12
Шаг 2.
Устанавливаем библиотеки
В Visual Studio Code нажимаем на меню TerminalNew Terminal
Выполним:
npm install


Смотрите картинку:


Объяснение:
В этом zip архиве нет node_modules пакетов.
Название и версии пакетов написаны в файле package.json.
Поэтому при выполнении в командной строке npm install пакеты с названием и версии из package.json скачаются из интернета и установятся в папку node_modules
Шаг 3.
Компилируем проект и запускаем под локальным web server
Выполним:
npm run start


Смотрите картинку:


Объяснение:
Команда npm run start запускает скрипт start.
Скрипт start определен в файле package.json.
Файл D:/my_example_angular_12/package.json:
{
...
    "scripts": {
        "start": "ng serve"
    }
...
}

Скрипт start запустит angular команду ng serve:
ng serve это локальный web server, потому что в браузере мы видим http://localhost:4200/
ng serve постоянно следит за изменениями в файлах и обновляет страницу в браузере.
Шаг 4.
Открываем страницу
В Visual Studio Code нажимаем на меню RunStart Debugging

Смотрите картинку:


Автоматически в браузере Google Chrome откроется новая страница с таким адресом: http://localhost:4200/
 


Объяснение:
Запускается Google Chrome с адресом http://localhost:4200/
потому что файл настройки .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
     {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome",
          "url": "http://localhost:4200/"
     }
]}

создержит
"url": "${workspaceFolder}/index.html"
На заметку!
Если поменяли файл ts или html в папке src то в браузере Google Chrome страница сама обновится.
 
← Previous topic
Создаем новое web приложение с Angular 9 в Visual Studio Code. Используем: Node.js + Angular (пишем нашу компоненту в ts файле) + Typescript (конвертация файлов ts в js)
 
Next topic →
В web приложение с Angular 12 добавляем маршрутизацию (router)
 
Your feedback ... Comments ...
   
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  
Яндекс.Метрика