「ng serve base href not working」はAngular開発時によく遭遇するエラーの一つですが正しい手順を踏めば簡単に解決できます。この記事ではこのエラーが発生したときの対処法を紹介していきます。
Angular13でのng serveのbase hrefを利用する場合
Angular 13では–base-hrefオプションを引き続き使用することができます。以下はAngular 13で–base-hrefオプションを使用してng serveを実行する方法です。
ng serve --base-href=/your-base-href/上記のコマンドでは、/your-base-href/の部分をプロジェクトに合わせたベースURLに置き換えます。このオプションを使用することで、開発サーバーにアクセスするときにベースURLが正しく設定されます。
ただしAngular 14以降では–base-hrefオプションは削除されており代わりにangular.jsonファイルでベースURLを設定する必要があります。
Angular 14以降を使用する場合は前述の方法ではなく、angular.jsonファイル内でベースURLを設定する必要があります。
Angular14でbase hrefがnot workingエラーした場合
先程も紹介したようにAngular14移行は–base-hrefオプションが利用できないのでangular.jsonファイルの変更が必要です。
以下手順にそってベースURLの設定していきましょう。
- Angularプロジェクトのangular.jsonファイルを開きます。
- “projects”セクション内の該当するプロジェクトの”architect”オブジェクトを探します。
- “serve”オブジェクト内の”options”オブジェクトを探します。
- “options”オブジェクト内の”baseHref”プロパティを設定します。
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-app:build",
"baseHref": "/your-base-href/"
}
}上記の設定で、/your-base-href/の部分を自分のプロジェクトに合わせたベースURLに変更する必要があります。