What happens when I start an Angular 8 application? Run main.ts file. Creating a module.

Компьютер, программы

→

Angular

Что происходит при запуске Angular 8 приложения?

посмотрели 4343 раз

обновлено: 17 July 2020

Структура Angular 8 примера: скачать ...

D:/my_example_angular

my.html

package.json файл настройки Node.js (содержит названия пакетов)

tsconfig.json файл настройки TypeScript

webpack.config.js файл настройки Webpack (как объединять js файлы в один)

src

main.ts

my.component.ts

build

transformed.js после запуска Webpack сгенерируется этот файл

Что происходит?

Шаг 1. Открываем my.html в браузере Google Chrome

В браузере выполняется файл my.html

Файл my.html

<!DOCTYPE html>
<html>

<head>
     <meta http-equiv='Content-Type' content='text/html;charset=utf-8' >
     <title>Hello Angular 8</title>
</head>

<body>
     <my-app>Загрузка...</my-app>
     <script src="build/transformed.js"></script>
</body>

</html>

Сначала выполнится:

<my-app>Загрузка...</my-app>

Тэг my-app пока не определен.
Поэтому на экране просто отобразится текст Загрузка...

Потом выполнится скрипт:

то есть начнет загружаться файл build/transformed.js

Шаг 2. файл build/transformed.js:

Как и когда создается файл transformed.js ?

Файл transformed.js создается когда запустим Webpack.

Файл transformed.js создается потому что, указан в файле настроек webpack.config.js как выходной файл это секция output:

output: {
path: __dirname + '/build',
filename: 'transformed.js'
}

Как запускается Webpack?

Чтобы запустить Webpack выполним в командной строке:

npm run MyBuild

Команда npm run MyBuild запускает скрипт MyBuild.
Скрипт MyBuild определен в файле package.json.
Файл D:/my_example_angular/package.json:
{
...
    "scripts": {
        "MyBuild": "webpack"
    }
...
}

Скрипт MyBuild запустит Webpack:
• Webpack запустит TypeScript.
• TypeScript сконвертирует наши файлы main.ts, my.component.ts в файлы main.js, my.component.js
• Webpack соберет файлы main.js, my.component.js и библиотеку Angular в один файл transformed.js

Из чего состоит файл transformed.js ?

Файл transformed.js состоит из файлов:
• main.ts
• my.component.ts
• библиотека Angular

Объяснение:
Webpack создает выходной файл transformed.js.
Чтобы создать выходной файл Webpack вначале открывает входной файл.
Входной файл указывается в файле настроек webpack.config.js в секции entry:

...
entry: {
'app': './src/main.ts'
}
...

Webpack берет входной файл main.ts и внутри смотрит какие подключаются файлы, библиотеки.
И запаковывает входной файл main.ts и файлы которые подключаются внутри в один выходной файл transformed.js.

У нас в примере внутри файла main.ts подключаются такие файлы и библиотеки:

...
import 'core-js'; // библиотека Angular
import 'zone.js/dist/zone'; // библиотека Angular
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; // библиотека Angular
...
import { NgModule } from '@angular/core'; // библиотека Angular
import { BrowserModule } from '@angular/platform-browser'; // библиотека Angular
import { FormsModule } from '@angular/forms'; // библиотека Angular
import { MyComponent1 } from './my.component'; // файл my.component.ts
...

Поэтому Webpack берет файлы:
• main.ts (файл входа для Webpack)
• my.component.ts (подключается внутри файла main.ts)
• библиотеку Angular (подключается внутри файла main.ts)
и запаковывает все в один файл transformed.js

На заметку! Webpack запаковывает только js файлы.
Поэтому сначала Webpack используя TypeScript loader конвертирует ts файлы в js файлы.
А потом запаковывает все js файлы в один transformed.js файл

Шаг 3. Файл main.ts

Файл main.ts

import 'core-js';
import 'zone.js/dist/zone';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

///////////// создаем модуль ///////////////////

import { NgModule }          from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }     from '@angular/forms';
import { MyComponent1 }     from './my.component';

// NgModule создает модуль на ооснове свойств: imports, declarations, bootstrap, ...
@NgModule({
     imports: [ BrowserModule, FormsModule ],
     declarations: [ MyComponent1 ],
     bootstrap: [ MyComponent1 ]
})

///////////// запуск Angular пиложения ///////////////////

class AppModule { }

// platformBrowserDynamic это функция создает динамическую браузерную платформу
// В Angular есть понятие динамической платформы. Это пакет пакет @angular/platform-browser-dynamic
// Динамический означает то что, модуль со всеми его компонентами создаются в рантайме (во время выполнения web приложения)
// На заметку! Если хотите чтобы web приложение запускалось в другом потоке, то используйте платформу из пакета @angular/platform-webworker.
const platform = platformBrowserDynamic();

// bootstrapModule использует компилятор. Компилятор во время выполнения web приложения компилирует модуль со всеми его компонентами
// bootstrapModuleFactory использует готовый скомпилированный модуль
platform.bootstrapModule(AppModule);

← Previous topic
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)

Next topic →
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)