あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

Fix:Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.

Angular

Angular で以下のようなエラーが発生するようになってしまいました。

Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
    at new PathLocationStrategy (common.js:403)
    at provideLocationStrategy (router.js:5319)
    at _callFactory (core.js:17503)
    at _createProviderInstance (core.js:17455)
    at initNgModule (core.js:17385)
    at new NgModuleRef_ (core.js:18112)
    at createNgModuleRef (core.js:18101)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:19932)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (core.js:20660)
    at core.js:14313

この原因は、HTML の構文エラーです。

以下がエラーになったものですが、<body>の終了タグが抜けていますね。

<!--before-->
<html>
<body>
  <app-root></app-root>
</html>

<body>の終了タグを追加したところ問題は解決しました。

<!--after-->
<html>
<body>
  <app-root></app-root>
</body>
</html>

このエラーの解決方法として、以下のようにapp.module.tsにAPP_BASE_HREF の指定をするやり方がネットで見つかりますが、これはこの問題は解決しますが、結局別のエラーが発生するので根本的な解決策にはなりません。

import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/'}]
})

Angular 手強い。