JavaScript
AngularJS
angular-ui-router

[AngularJS] angular-ui-router 0.2.x から 1.0.x への移行

サービスを数ヶ月ぶりに開発するため、npmのpackageを一斉にupdateしていた。

いつも通り

ncu -u

で何も考えずにupdate。

すると angular-ui-router@uirouter/angularjs に変わったと言われたのでついでに書き換え。
多分この時か ncu -u のタイミングでversionが1.xに変わったと思う。いくつか動かないポイントがあったのでメモ書き程度に残しておく。
(今更AngularJS?という話は置いておいて・・・)

$stateChangeStart

$stateChangeStartイベントをlistenしているところがどうも動かない。調べてみると

https://stackoverflow.com/questions/37163811/angular-js-ui-router-statechangesuccess-event-not-firing

If you are using the new ui-router (v1.0.0), the $stateChange* events will not work. You must use $transitions.on* hooks from now on.

ほう。。。
というわけで以下のように修正

-    $rootScope.$on('$stateChangeStart', (event, next, params) => {
+    $transitions.onStart({}, trans => {
+      const next = trans.to();
+      const params = trans.params();

callback関数への引数はこの辺にdocumentがある
https://ui-router.github.io/ng1/docs/latest/classes/transition.transition-1.html

The transition has been superseded by a different transition

上の修正で表面上は動くようになったが、見出しのエラーが出てる。

https://github.com/angular-ui/ui-router/issues/2977

In ui-router legacy, people wondered why their transitions were failing silently. In 1.0, we added a default error handler which is printing the message that the original transition (to an auth state) was superseded by the new one (to guest). Read more here

なるほど。

恐らくベストは $state.go('hoge'); してるところをissueの通りに書き直すソリューション。けど設計が良くなくて該当箇所が必ずイベント内から呼び出させれる保証はなかったので、諦めてエラーを握りつぶすことに。

+    $state.defaultErrorHandler(function() { /* do nothing */});

hash path

前までは /#/home みたいなリンクに飛ぶと /home のstateを読み込んでくれたけれど、それが動いてなかった。

params の内容を見てみると # 以下がパラメーターとして扱われている。

色々悩んだ末・・・

console.log($locationProvider.hashPrefix());  // => '!'

これかー。確かにこれだと /#!/home にしないとルーティングしてくれなさそう。

どこかでデフォルト変わった・・・?と思って探したら記述が見つかった。=> https://docs.angularjs.org/guide/migration#commit-aa077e8

以下の設定を追加して解決

-  $locationProvider.html5Mode(true);
+  $locationProvider.html5Mode(true).hashPrefix('');

厳密にはこれは ui-router じゃなくて AngularJS の変更ですが。

最後に

まあ少なくとも最初の二つに関しては、まず https://ui-router.github.io/guide/ng1/migrate-to-1_0 を読んでからやれって話です。