Chrome 扩展程序 - 未设置基本 href。请为 APP_BASE_HREF 提供一个值答案

【问题标题】：Chrome Extension - No base href set. Please provide a value for the APP_BASE_HREFChrome 扩展程序 - 未设置基本 href。请为 APP_BASE_HREF 提供一个值
【发布时间】：2017-03-09 13:02:42
【问题描述】：

我正在构建一个 Chrome 浏览器操作扩展。

我正在尝试将 Angular 2 应用程序加载到 Chrome 的弹出窗口中。

我在使用 Angular 1.5 之前已经这样做了，但尝试使用 Angular 2 并遇到错误。

未处理的 Promise 拒绝：未设置基本 href。请提供一个值为 APP_BASE_HREF 令牌或向文档添加基本元素。 ; 区域：;任务：Promise.then；值：错误：未设置基本 href。请为 APP_BASE_HREF 令牌提供一个值或添加一个基础元素添加到文档中。(...) 错误：未设置基本 href。请提供一个 APP_BASE_HREF 令牌的值或向文件。

我已将<base href="/"> 标签放入我的popu.html。但问题是，vendor.js 和 main.js 被 Chrome 加载到下面（在被 popup.html 加载之前），所以没有 HTML 页面可以放置<base href="/">

只是想知道如何解决这个问题。

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>

【问题讨论】：

我不明白。您正在显示当前打开的选项卡的控制台，而不是弹出窗口。因此，您看到的错误来自内容脚本。您需要从浏览器操作的上下文菜单中调用“检查弹出窗口”以查看弹出窗口中发生的情况。
谢谢 Xan，你说得对，我对弹出窗口与内容脚本有一个误解，所以我遇到了一些超出 APP_BASE_HREF 问题的问题

标签： javascript angular google-chrome-extension

【解决方案1】：

您可以改为在代码中设置基本 href

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

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

【讨论】：