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

Smart Contract Engineer
Since 2009, I have been a software engineer at Accenture for 9 years, managing, designing, and developing many services, mainly web and mobile apps.
In 2013, I met Bitcoin and started to work on blockchain-related development in 2018, developing an entertainment DApp for underground idols, a blockchain analysis tool, and an STO platform.
Currently, I am working as a Smart Contract Engineer at Secured Finance, developing a DeFi product.

WEB: https://tanakas.org/