Menu
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
<!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>
600
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 {}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
