Angular и SystemJS собираем приложение

Автор: | 23.07.2019

Рассмотрим создание простого веб-приложения на Angular с использованием загрузчика модулей SystemJS

Перейдите в корневой каталог вашего проекта и создайте там файл package.json:

  • npm install -y

Создадим файл конфигурации для загрузчика модулей systemjs.config.js:

Angular использует TypeScript поэтому опишем конфигурацию для него в файле tsconfig.json:

Далее мы можем установить нужные нам модули:

  • npm install

, или если вы используете виртуальную машину (напр. VirtualBox):

  • npm install --no-bin-links

В корне вашего проекта рядом с созданными ранее файлами появится новый каталог node_modules.

Теперь создадим в корне файл index.html:

В нем подключаются необходимые скрипты и происходит загрузка модуля нашего Angular приложения.

Angular является компонентным фреймворком. В каталоге app создадим компонент приложения app.component.ts:

Компоненты загружаются через модуль приложения app/app.module.ts :

Этот модуль как раз и загружается в файле index.html

Осталось создать еще один файл app/main.ts:

Все наше приложение готово. Для его запуска вы можете использовать любой известный вам веб-сервер.

В результате на экране вашего веб-браузера появится сначала слово "Загрузка...", а потом на его месте вы увидите "Hello Angular!"