AngularでSwiperを利用したコンポーネントを作成する

tanana no webにスライダーを導入するにあたり、AngularでSwiperを使えるようにしようと思います。
1年以上前にもAngularでSwiperを使用する機会があったのですが、今回もその時と同じくコンポーネントを自作します。

コンポーネントの作成方法はQiitaに投稿。
https://qiita.com/biga816/items/540bc88fe040ca2c4497

そして満を持して自作コンポーネントの導入!
問題なく動いたので、サーバーへアップしようとng build --prodしたら謎のエラーが。。

ERROR in vendor.6b586774124aae05d86b.bundle.js from UglifyJs
Unexpected token: name (Dom7) [vendor.6b586774124aae05d86b.bundle.js:108376,6]

原因を探ってみると、なにやらSwiperのライブラリ自体が原因でエラーが出ている様子。
最初はWebpackを疑って下記の記事を見たものの、そもそもng build --prodでエラーが出ているので違う。。
https://github.com/nolimits4web/Swiper/issues/2263

検証と調査を続けること1時間、下記記事を見つけて無事解決しました。
https://github.com/zefoy/ngx-swiper-wrapper/issues/76

単純にangular cliのバージョンを最新版にするだけでした。
SwiperはES6を使用しているらしく、ES6のuglifyをサポートするようになったのは最新のangular-cli (1.5.0-rc.8)からだとか。

The following two tabs change content below.
Akihiro Tanaka

Akihiro Tanaka

Engineer/UI Designer
UI設計を得意とするエンジニア。 現在はDApps開発しています。
好きな言語はTypeScript、好きなフレームワークはIonic、Angular。 趣味はハーレー、キャンプ、アンティーク。
WEB: http://tanakas.org/