Chrome Extension - No base href set. Please provide a value for the APP_BASE_HREF

8
votes

I am building a Chrome Browser Action Extension.

I am attempting to load an Angular 2 application into the Popup Window in Chrome.

I have done this before using Angular 1.5, but attempting with Angular 2 and getting an error.

Unhandled Promise rejection: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document. ; Zone: ; Task: Promise.then ; Value: Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.(…) Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.

I have put the <base href="/"> tag into my popu.html. But the problem is that vendor.js and main.js get loaded underneath by Chrome (and before being loaded by popup.html) and so there is no HTML page in which to put <base href="/">

Just wondering how I can resolve this issue.

Popup.html

enter image description here

<!doctype html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8">
    <title>FountainJS</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png"/>
    <link href="../styles/popup.css" rel="stylesheet">
</head>

<body>
<div style="width: 200px; height: 150px;">
<fountain-root>My Awesome Chrome Popup should load with Angular 2 right Here</fountain-root>
<script type="text/javascript" src="../scripts/vendor.js"></script>

<script type="text/javascript" src="../scripts/main.js"></script>
</div>
</body>
</html>
1
javascriptangulargoogle-chrome-extension
I don't understand. You're showing the console for the currently open tab, NOT the popup. Therefore the errors you see are from a content script. You need to evoke "Inspect popup" from the browser action's context menu to see what happens in the popup. – Xan
Thanks Xan, your right, I had an misunderstanding around popup vs content script and so I had a couple of issues going on above and beyond the APP_BASE_HREF issue – David Cruwys

1 Answers

22
votes

You could set the base href in code instead

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

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