【Angular】alertをカスタマイズ！SweetAlertの使い方！ │ Traveler

Angularでカッコイイalertを使いたい。

というのも、デフォルトのalertってちょっとダサいと思うのですよ。

ということで今回は、「Angular×SweetAlert」の解説をしたいと思います！

1. 僕の環境
2. 最初に言っておくと。。
3. angular-sweetalert-serviceをインストール
4. sweetalertをインストール
5. 参考サイト
6. おすすめ書籍
7. まとめ

僕の環境

OS：Windows10

Angular：7

最初に言っておくと。。

SweetAlertってなぜか色々種類があります。

今回は、「angular-sweetalert-service」と「sweetalert」を入れてみましたが、「angular-sweetalert-service」の方はうまく動かないです。。

なので、「sweetalert」の方から試すと良いですよ！

angular-sweetalert-serviceをインストール

npm install --save angular-sweetalert-service

1	npm install --save angular-sweetalert-service

「angular-sweetalert-service」をインストールします。

// 共通モジュール
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material/input';
import { MatTabsModule } from '@angular/material/tabs';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { FullCalendarModule } from 'ng-fullcalendar';

// 共通サービス
import { HttpService, NoopInterceptor } from './service/http/http.service';
import { LogService } from './service/log/log.service';
import { RouterService } from './service/router/router.service';
import { SweetAlertService } from 'angular-sweetalert-service';
import { UtilService } from './service/util/util.service';

// 共通コンポーネント
import { AppComponent } from './app.component';
import { LoginComponent } from './component/login/login.component';
import { TimepickerComponent } from './component/timepicker/timepicker.component';
import { PageNotFoundComponent } from './component/error/page-not-found/page-not-found.component';
import { IntegerComponent } from './component/integer/integer.component';
import { FullcalendarComponent } from './component/fullcalendar/fullcalendar.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    TimepickerComponent,
    PageNotFoundComponent,
    IntegerComponent,
    FullcalendarComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatTabsModule,
    MatCheckboxModule,
    MatButtonModule,
    FullCalendarModule
  ],
  providers: [
    HttpService,
    LogService,
    RouterService,
    SweetAlertService,
    UtilService,
    { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// 共通モジュール

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

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatInputModule } from '@angular/material/input';

import { MatTabsModule } from '@angular/material/tabs';

import { MatCheckboxModule } from '@angular/material/checkbox';

import { MatButtonModule } from '@angular/material/button';

import { FullCalendarModule } from 'ng-fullcalendar';

// 共通サービス

import { HttpService, NoopInterceptor } from './service/http/http.service';

import { LogService } from './service/log/log.service';

import { RouterService } from './service/router/router.service';

import { SweetAlertService } from 'angular-sweetalert-service';

import { UtilService } from './service/util/util.service';

// 共通コンポーネント

import { AppComponent } from './app.component';

import { LoginComponent } from './component/login/login.component';

import { TimepickerComponent } from './component/timepicker/timepicker.component';

import { PageNotFoundComponent } from './component/error/page-not-found/page-not-found.component';

import { IntegerComponent } from './component/integer/integer.component';

import { FullcalendarComponent } from './component/fullcalendar/fullcalendar.component';

@NgModule({

declarations: [

AppComponent,

LoginComponent,

TimepickerComponent,

PageNotFoundComponent,

IntegerComponent,

FullcalendarComponent,

imports: [

BrowserModule,

AppRoutingModule,

FormsModule,

ReactiveFormsModule,

NgbModule,

BrowserAnimationsModule,

MatInputModule,

MatTabsModule,

MatCheckboxModule,

MatButtonModule,

FullCalendarModule

providers: [

HttpService,

LogService,

RouterService,

SweetAlertService,

UtilService,

{ provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true }

bootstrap: [AppComponent]

})

export class AppModule { }

「app.module.ts」に「SweetAlertService」を追加します。

ERROR in ./node_modules/angular-sweetalert-service/node_modules/@angular/core/@angular/core.es5.js
Module not found: Error: Can't resolve 'rxjs/Observable' in 'C:\Users\泉　浩兵\Desktop\AngularCLI\angular-project\node_modules\angular-sweetalert-service\node_modules\@angular\core\@angular'
ERROR in ./node_modules/angular-sweetalert-service/node_modules/@angular/core/@angular/core.es5.js
Module not found: Error: Can't resolve 'rxjs/Subject' in 'C:\Users\泉　浩兵\Desktop\AngularCLI\angular-project\node_modules\angular-sweetalert-service\node_modules\@angular\core\@angular'
ERROR in ./node_modules/angular-sweetalert-service/node_modules/@angular/core/@angular/core.es5.js
Module not found: Error: Can't resolve 'rxjs/observable/merge' in 'C:\Users\泉　浩兵\Desktop\AngularCLI\angular-project\node_modules\angular-sweetalert-service\node_modules\@angular\core\@angular'
ERROR in ./node_modules/angular-sweetalert-service/node_modules/@angular/core/@angular/core.es5.js
Module not found: Error: Can't resolve 'rxjs/operator/share' in 'C:\Users\泉　浩兵\Desktop\AngularCLI\angular-project\node_modules\angular-sweetalert-service\node_modules\@angular\core\@angular'

ERROR in ./node_modules/angular-sweetalert-service/node_modules/@angular/core/@angular/core.es5.js

Module not found: Error: Can't resolve 'rxjs/Observable' in 'C:\Users\泉　浩兵\Desktop\AngularCLI\angular-project\node_modules\angular-sweetalert-service\node_modules\@angular\core\@angular'

ERROR in ./node_modules/angular-sweetalert-service/node_modules/@angular/core/@angular/core.es5.js

Module not found: Error: Can't resolve 'rxjs/Subject' in 'C:\Users\泉　浩兵\Desktop\AngularCLI\angular-project\node_modules\angular-sweetalert-service\node_modules\@angular\core\@angular'

ERROR in ./node_modules/angular-sweetalert-service/node_modules/@angular/core/@angular/core.es5.js

Module not found: Error: Can't resolve 'rxjs/observable/merge' in 'C:\Users\泉　浩兵\Desktop\AngularCLI\angular-project\node_modules\angular-sweetalert-service\node_modules\@angular\core\@angular'

ERROR in ./node_modules/angular-sweetalert-service/node_modules/@angular/core/@angular/core.es5.js

Module not found: Error: Can't resolve 'rxjs/operator/share' in 'C:\Users\泉　浩兵\Desktop\AngularCLI\angular-project\node_modules\angular-sweetalert-service\node_modules\@angular\core\@angular'

アプリをサーブするとエラーが。。

「rxjs/Observable」が解決できないって言ってます。

npm install --save rxjs-compat

1	npm install --save rxjs-compat

調べてみると上記コマンドが有効なようなので、「rxjs-compat」をインストールします。

念のため再サーブします。

angular-sweetalert-service

ワーニングが出ていますが、エラーは消えました。

一旦これはOKとします。

import { SweetAlertService } from 'angular-sweetalert-service';

1	import { SweetAlertService } from 'angular-sweetalert-service';

使用したいコンポーネントのTypeScriptに「SweetAlertService」をインポートします。

※公式は「angular-sweetalert」になっていますが、間違いです。

constructor(
  private sweetAlertService: SweetAlertService
) { }

constructor(

private sweetAlertService: SweetAlertService

) { }

「SweetAlertService」をDIします。

ERROR TypeError: myWindow.Sweetalert2 is not a function
    at SweetAlertService.push../node_modules/angular-sweetalert-service/js/service/sweetalert2.service.js.SweetAlertService.alert (sweetalert2.service.js:40)
    at LoginComponent.push../src/app/component/login/login.component.ts.LoginComponent.login (login.component.ts:51)
    at Object.eval [as handleEvent] (LoginComponent.html:18)
    at handleEvent (core.js:21673)
    at callWithDebugContext (core.js:22767)
    at Object.debugHandleEvent [as handleEvent] (core.js:22470)
    at dispatchEvent (core.js:19122)
    at core.js:19569
    at HTMLButtonElement.<anonymous> (platform-browser.js:993)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

ERROR TypeError: myWindow.Sweetalert2 is not a function

at SweetAlertService.push../node_modules/angular-sweetalert-service/js/service/sweetalert2.service.js.SweetAlertService.alert (sweetalert2.service.js:40)