サービスを数ヶ月ぶりに開発するため、npmのpackageを一斉にupdateしていた。
いつも通り
ncu -u
で何も考えずにupdate。
すると angular-ui-router が @uirouter/angularjs に変わったと言われたのでついでに書き換え。
多分この時か ncu -u のタイミングでversionが1.xに変わったと思う。いくつか動かないポイントがあったのでメモ書き程度に残しておく。
（今更AngularJS?という話は置いておいて・・・）
$stateChangeStart
$stateChangeStartイベントをlistenしているところがどうも動かない。調べてみると
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
上の修正で表面上は動くようになったが、見出しのエラーが出てる。
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 を読んでからやれって話です。