概要
Angularの勉強をするときに、参考書内で quickstart というサンプルソースを使う場面がありました。
参考書通りに進めていくと、最初のサンプルソースの起動からエラーが発生してしまうため、対策をこちらに残します。
該当の参考書は以下になります。
(function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a;
b[a]=b[a]||function(){arguments.currentScript=c.currentScript
||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)};
c.getElementById(a)||(d=c.createElement(f),d.src=g,
d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))})
(window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink");
msmaflink({"n":"Angularアプリケーションプログラミング","b":"","t":"","d":"https:\/\/m.media-amazon.com","c_p":"","p":["\/images\/I\/51na6-1irJL._SL500_.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/dp\/B074M54GM5","t":"amazon","r_v":""},"v":"2.1","b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https:\/\/www.amazon.co.jp\/dp\/B074M54GM5","a_id":1524299,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https:\/\/search.rakuten.co.jp\/search\/mall\/Angular%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0\/","a_id":1524263,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2}],"eid":"6vulA","s":"s"});
※2022年12月13日時点ではこれから説明する対処方法で改善されます。
エラー内容
対象プロジェクト：https://github.com/angular/quickstart
npm startコマンドを実行後、以下のエラーが発生する。
[crayon-662d832bb6794295657123/]
原因
\quickstart\package.json で定義されているライブラリのバージョンが古いため、エラーとなっています。
バージョンを以下のように更新することで解決します。
修正後の\quickstart\package.jsonは以下になります。
[crayon-662d832bb6799995929693/]
これで、再び起動コマンドを実行することで先ほどのエラーが解消し、ブラウザが立ち上がります。