Angularでカッコイイalertを使いたい。
というのも、デフォルトのalertってちょっとダサいと思うのですよ。
ということで今回は、「Angular×SweetAlert」の解説をしたいと思います！
目次
僕の環境
OS：Windows10
Angular：7
最初に言っておくと。。
SweetAlertってなぜか色々種類があります。
今回は、「angular-sweetalert-service」と「sweetalert」を入れてみましたが、「angular-sweetalert-service」の方はうまく動かないです。。
なので、「sweetalert」の方から試すと良いですよ！
angular-sweetalert-serviceをインストール
|
1 |
npm install --save angular-sweetalert-service |
「angular-sweetalert-service」をインストールします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
// 共通モジュール 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」を追加します。
|
1 2 3 4 5 6 7 8 |
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」が解決できないって言ってます。
|
1 |
npm install --save rxjs-compat |
調べてみると上記コマンドが有効なようなので、「rxjs-compat」をインストールします。
念のため再サーブします。
ワーニングが出ていますが、エラーは消えました。
一旦これはOKとします。
|
1 |
import { SweetAlertService } from 'angular-sweetalert-service'; |
使用したいコンポーネントのTypeScriptに「SweetAlertService」をインポートします。
※公式は「angular-sweetalert」になっていますが、間違いです。
|
1 2 3 |
constructor( private sweetAlertService: SweetAlertService ) { } |
「SweetAlertService」をDIします。
|
1 2 3 4 5 6 7 8 9 10 11 |
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) |
実際に使ってみると、超エラー出ます。諦めます。。
sweetalertをインストール
|
1 |
npm install sweetalert --save |
全然だめなので、こっちの「sweetalert」をインストールします。
|
1 |
import swal from 'sweetalert'; |
使用したいコンポーネントのTypeScriptに「sweetalert」をインポートします。
|
1 |
swal('Hello world!'); |
こんな感じで使います。
これで完璧！
参考サイト
■angular-sweetalert-service
URL：「https://www.npmjs.com/package/angular-sweetalert-service」
■sweetalert
URL：「https://sweetalert.js.org/guides/」
おすすめ書籍
僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ！
まとめ
なんかうまくいかないライブラリとかって多いですね。。
まあ、メンテされていないものも多いので注意が必要ですな。
ではまた！