Если вы являетесь разработчиком внешнего интерфейса, то есть хорошие шансы, что вы слышали или даже использовали веб-пакет. Процесс сборки Angular использует веб-пакет для решения многих задач, таких как преобразование файлов Sass в CSS и перенос TypeScript в JavaScript.
Модули JavaScript имеют очень ограниченную поддержку в веб-браузерах. Теоретически, любое приложение JavaScript должно быть ограничено одним исходным файлом перед загрузкой в браузер. Также рекомендуется разделять код на модули, содержащиеся в отдельных файлах, поэтому при развертывании приложения JavaScript модули встроены в один исходный файл. Сверхдержава Webpack объединяет несколько модулей в один файл, что делает его очень важным инструментом для сборки.
Webpack не ограничивается простым объединением исходных файлов. Поскольку он может поддерживать множество плагинов, он может выполнять множество дополнительных задач. Загрузчики модулей Webpack могут анализировать файлы разных типов. Это позволяет, например, файлам Angular TypeScript использовать import оператор для импорта файлов таблиц стилей. Обычно веб-пакет скрыт за инструментом командной строки Angular. Но в некоторых случаях может потребоваться настроить конфигурацию веб-пакета при создании приложения Angular.
В более ранних версиях Angular было возможно извлечь конфигурацию веб-пакета и изменить ее напрямую. В Angular 8 доступ к базовой конфигурации отключен. Но все еще возможно расширить конфигурацию веб-пакета и добавить дополнительные загрузчики или параметры конфигурации. В этом уроке я покажу вам, как создать приложение Angular 8 и настроить конфигурацию веб-пакета.
Пререквизиты: Node.js v12 +.
Настроить угловой с Webpack
Я предполагаю, что у вас есть общие знания JavaScript и Angular и что вы установили node и npm менеджер пакетов в вашей системе. Для начала вам потребуется глобально установить инструмент командной строки Angular. Откройте терминал и установите Angular с помощью следующей команды.
Оболочка
1
npm install -g @angular/cli@8.3.20
В зависимости от вашей системы вам может потребоваться выполнить эту команду с правами администратора, используя sudo. Теперь перейдите в каталог по вашему выбору и создайте новое приложение Angular, выполнив команду ниже.
Оболочка
xxxxxxxxxx
1
ng new angular-webpack-demo --routing --style css
Чтобы разрешить настройку конфигурации веб-пакета, вам необходимо установить пользовательский веб-пакет Angular Builder. Перейдите во вновь созданный каталог angular-webpack-demo и выполните следующую команду.
Оболочка
xxxxxxxxxx
1
npm install -D -E @angular-builders/custom-webpack@8.4.1
Вы будете использовать webpack-define плагин для внедрения глобальных определений значений в ваш код. В качестве примера, это может быть использовано для обозначения флаговых частей ваших приложений.
Чтобы включить пользовательские конфигурации веб-пакетов, откройте angular.json файл конфигурации. Найдите линию "builder": "@angular-devkit/build-angular:browser" внутри architect.build раздела. Замените его следующими строками.
JSON
xxxxxxxxxx
1
"builder": "@angular-builders/custom-webpack:browser",
Теперь внутри architect.build.options добавьте следующее свойство.
JSON
xxxxxxxxxx
1
"customWebpackConfig": {
2
"path": "./custom-webpack.config.js"
3
},
Это добавляет custom-webpack.config.js к конфигурации веб-пакета по умолчанию для ng build команды. Чтобы также включить конфигурацию для ng serve команды, найдите строку "builder": "@angular-devkit/build-angular:dev-server", и замените ее приведенным ниже кодом.
JSON
xxxxxxxxxx
1
"builder": "@angular-builders/custom-webpack:dev-server",
Теперь создайте файл custom-webpack.config.js и вставьте в него следующий контент.
JavaScript
xxxxxxxxxx
1
const webpack = require('webpack');
2
module.exports = {
4
plugins: [
5
new webpack.DefinePlugin({
6
'STABLE_FEATURE': JSON.stringify(true),
7
'EXPERIMENTAL_FEATURE': JSON.stringify(false)
8
})
9
]
10
};
Это создает две глобальные константы, STABLE_FEATURE и EXPERIMENTAL_FEATURE, и делает их доступными в вашем приложении. Чтобы узнать больше об использовании DefinePlugin, пожалуйста, обратитесь к документации DefinePlugin .
Реализовать угловое приложение
Чтобы облегчить создание чистого адаптивного макета, установите Bootstrap и его компоненты Angular. В вашем терминале выполните команду ниже.
Оболочка
xxxxxxxxxx
1
ng add ngx-bootstrap@5.2.0
Теперь запустите ваш любимый IDE и откройте файл src/styles.css.html. Добавьте следующую строку, чтобы включить таблицу стилей для библиотеки начальной загрузки.
CSS
xxxxxxxxxx
1
@import "~bootstrap/dist/css/bootstrap.css";
Откройте src/app/app.component.html и замените содержимое по умолчанию следующим.
HTML
xxxxxxxxxx
1
<nav class="navbar navbar-expand navbar-light bg-light">
2
<ul class="navbar-nav mr-auto">
3
<li class="nav-item">
4
<a class="nav-link" [routerLink]="['']">
5
Home
6
</a>
7
</li>
8
<li class="nav-item">
9
<a class="nav-link" [routerLink]="['demo']">
10
Demo
11
</a>
12
</li>
13
</ul>
14
</nav>
15
<router-outlet></router-outlet>
router-outlet Элемент служит в качестве контейнера для маршрутизатора. Это означает, что различные компоненты могут быть загружены в этот заполнитель путем изменения URL-адреса в панели навигации браузера. Создайте два компонента, которые нужно поместить в, router-outlet и назовите их Home и Demo. Снова откройте терминал и выполните следующие команды.
Оболочка
xxxxxxxxxx
1
ng generate component home
2
ng generate component demo
Теперь откройте src/app/app-routing.module.ts и добавьте маршруты для этих компонентов.
Машинопись
xxxxxxxxxx
1
import { NgModule } from '@angular/core';
2
import { Routes, RouterModule } from '@angular/router';
3
import { HomeComponent } from './home/home.component';
4
import { DemoComponent } from './demo/demo.component';
5
const routes: Routes = [
7
{
8
path: '',
9
component: HomeComponent
10
},
11
{
12
path: 'demo',
13
component: DemoComponent,
14
},];
15
@NgModule({
17
imports: [RouterModule.forRoot(routes)],
18
exports: [RouterModule]
19
})
20
export class AppRoutingModule { }
Затем поместите некоторый контент на домашнюю страницу. Откройте src/app/home/home.component.html и замените содержимое по умолчанию следующим кодом.
HTML
xxxxxxxxxx
1
<div class="container">
2
<div class="row mt-5">
3
<div class="col-sm">
4
<h1>Angular Webpack Demo</h1>
5
</div>
6
</div>
7
</div>
8
DemoComponent Будет отображать содержимое в зависимости от функции флагов , которые вы определили в конфигурации WebPack. Откройте src/app/demo/demo.component.ts и вставьте в него следующий код.
xxxxxxxxxx
1
import { Component, OnInit } from '@angular/core';
2
declare const STABLE_FEATURE: boolean;
4
declare const EXPERIMENTAL_FEATURE: boolean;
5
@Component({
7
selector: 'app-demo',
8
templateUrl: './demo.component.html',
9
styleUrls: ['./demo.component.css']
10
})
11
export class DemoComponent implements OnInit {
12
stableFeature: string;
13
experimentalFeature: string;
14
constructor() { }
16
ngOnInit() {
18
this.stableFeature = STABLE_FEATURE ? 'Stable feature enabled' : 'Stable feature disabled';
19
this.experimentalFeature = EXPERIMENTAL_FEATURE ? 'Experimental feature enabled' : 'Experimental feature disabled';
20
}
21
}
Обратите внимание на объявления STABLE_FEATURE и EXPERIMENTAL_FEATURE в верхней части файла. Они необходимы для того, чтобы TypeScript знал, что две константы существуют. Но также обратите внимание, что здесь не присваиваются значения.
Затем откройте src/app/demo/demo.component.html и замените содержимое следующими строками.
HTML
xxxxxxxxxx
1
<div class="container">
2
<div class="row mt-5">
3
<div class="col-sm col-md-8 offset-md-2">
4
<h2>Demo Features</h2>
5
<p>
6
{{stableFeature}}
7
</p>
8
<p>
9
{{experimentalFeature}}
10
</p>
11
</div>
12
</div>
13
</div>
Добавить угловую аутентификацию
Почти каждому веб-приложению понадобится какая-то аутентификация пользователя. Используя Okta Angular SDK, действительно легко добавить современную аутентификацию единого входа в любое приложение Angular.
Для начала зарегистрируйте учетную запись разработчика Okta, если у вас ее еще нет. Откройте браузер и перейдите на https://developer.okta.com . Перейдите по ссылке « Регистрация» и заполните регистрационную форму. После завершения регистрации вы попадете на панель инструментов Okta.
Чтобы зарегистрировать новое приложение в Okta, выберите вкладку « Приложения » вверху и нажмите кнопку « Добавить приложение» . Вы попадете на экран конфигурации, где вы можете изменить настройки для вашего приложения.
Чтобы Okta работала с сервером разработки вашего приложения Angular, вам нужно внести две модификации в эти настройки. Сначала измените базовый URI на http://localhost:4200/. Затем установите URI перенаправления входа на http://localhost:4200/implicit/callback. Выберите код авторизации в качестве типа предоставления и нажмите кнопку « Готово» . Вы увидите обзор настроек вместе с сгенерированным идентификатором клиента.
Откройте терминал в каталоге вашего приложения и добавьте пакет Okta в ваше приложение Angular, выполнив команду ниже.
таблица
xxxxxxxxxx
1
npm install -E @okta/okta-angular@1.2.2
Теперь откройте src/app/app.module.ts и добавьте импорт модуля аутентификации Okta в начало файла.
Машинопись
xxxxxxxxxx
1
import { OktaAuthModule } from '@okta/okta-angular';
Далее в том же файле добавьте модуль аутентификации в imports массив.
Машинопись
xxxxxxxxxx
1
OktaAuthModule.initAuth({
2
issuer: 'https://{yourOktaDomain}/oauth2/default',
3
redirectUri: 'http://localhost:4200/implicit/callback',
4
clientId: '{yourClientId}',
5
pkce: true
6
})
В этом фрагменте кода {yourOktaDomain} находится ваш домен Okta. Это можно найти в правом верхнем углу панели инструментов Okta с ярлыком Org URL . Значение {yourClientId} можно скопировать со страницы настроек приложения, как описано выше.
Затем откройте src/app/app.component.ts и замените содержимое следующим кодом.
Машинопись
xxxxxxxxxx
1
import { Component } from '@angular/core';
2
import { OktaAuthService } from '@okta/okta-angular';
3
@Component({
5
selector: 'app-root',
6
templateUrl: './app.component.html',
7
styleUrls: ['./app.component.css']
8
})
9
export class AppComponent {
10
title = 'angular-webpack-demo';
11
isAuthenticated: boolean;
12
constructor(public oktaAuth: OktaAuthService) {
14
this.oktaAuth.$authenticationState.subscribe(
15
(isAuthenticated: boolean) => this.isAuthenticated = isAuthenticated
16
);
17
}
18
ngOnInit() {
20
this.oktaAuth.isAuthenticated().then((auth) => {this.isAuthenticated = auth});
21
}
22
login() {
24
this.oktaAuth.loginRedirect();
25
}
26
logout() {
28
this.oktaAuth.logout('/');
29
}
30
}
Это добавляет флаг isAuthenticated к компоненту приложения, который отслеживает статус аутентификации пользователя. Компонент также содержит два обратных вызова для входа и выхода пользователя. Теперь откройте src/app/app.component.html и добавьте кнопки входа и выхода, вставив приведенный ниже код в конце внутри <nav> элемента.
HTML
xxxxxxxxxx
1
<span>
2
<button class="btn btn-primary" *ngIf="!isAuthenticated" (click)="login()"> Login </button>
3
<button class="btn btn-primary" *ngIf="isAuthenticated" (click)="logout()"> Logout </button>
4
</span>
src/app/app-routing.module.ts Снова откройте и добавьте импорт компонента обратного вызова Okta и средства проверки подлинности в начало файла.
Машинопись
xxxxxxxxxx
1
import { OktaCallbackComponent, OktaAuthGuard } from '@okta/okta-angular';
Затем зарегистрируйте компонент обратного вызова в implicit/callback маршруте, добавив следующую запись в routes массив.
Машинопись
xxxxxxxxxx
1
{
2
path: 'implicit/callback',
3
component: OktaCallbackComponent
4
}
Наконец, добавьте охрану маршрута к записи маршрута для демонстрационного компонента.
Машинопись
xxxxxxxxxx
1
{
2
path: 'demo',
3
component: DemoComponent,
4
canActivate: [OktaAuthGuard]
5
}
Отлично сработано! Вы завершили реализацию приложения Angular с пользовательской конфигурацией веб-пакета. Вы можете попробовать приложение, снова открыв терминал и выполнив следующую команду.
Оболочка
xxxxxxxxxx
1
ng serve
Откройте браузер и перейдите к, http://localhost:4200/ и вы увидите свое приложение. Если вы нажмете на ссылку Demo вверху, вам будет предложено войти в систему. После успешного входа в сервис Okta вы должны увидеть что-то вроде этого.
Узнайте больше об Angular и Webpack
В этом уроке я показал вам, как создать простое веб-приложение Angular с настраиваемой конфигурацией веб-пакета. Начиная с Angular 8, доступ к внутренней конфигурации веб-пакета был ограничен. Однако все еще возможно расширить объект конфигурации с помощью пользовательской конфигурации. Это позволяет регистрировать пользовательские загрузчики или дополнительные плагины веб-пакетов. В представленном здесь примере я продемонстрировал, как использовать DefinePlugin для определения глобальных констант через конфигурацию. Это может быть полезно для пометки компонентов вашего приложения.
Как всегда, вы можете найти исходный код этого руководства на GitHub в примере oktadeveloper / okta-angular-webpack-example .
Если вы хотите узнать больше о Webpack, Angular и аутентификации, воспользуйтесь ссылками ниже.
- Создайте базовое приложение CRUD с Angular и Node
- Используйте угловые схемы, чтобы упростить свою жизнь
- Создайте безопасный вход для своего углового приложения
- Angular 8 + Spring Boot 2.2: создайте приложение CRUD сегодня!
- Создайте настольное приложение с Angular и Electron
Если у вас есть какие-либо вопросы по этому посту, пожалуйста, добавьте комментарий ниже. Чтобы получить больше высокотехнологичного контента, следите за @oktadev в Twitter или подпишитесь на наш канал на YouTube !
Как настроить угловую сборку с помощью Webpack была первоначально опубликована в блоге разработчиков Okta 9 декабря 2019 года.