angularjs 2 cli，构建 chrome 扩展，定义内容和后台脚本的麻烦

Question

假设我用 cli 生成了一个新的 angularjs-2 应用程序,因此，通过 ng build，它构建我的源代码到 /dist 文件夹。

因为我正在构建 chrome 扩展，所以我必须在 manifest.json 中定义我的 content-script 在哪里(随页面加载)background script/ event page 在哪里(加载一次)。

所以我必须在我的 manifest.json 中定义它们，

  "content_scripts": [
    {
      "matches": ["*"],
      "css": ["content-script.css"],
      "js": ["content-script.js"]
    }

    "background": {
       "scripts": ["eventPage.js"],
       "persistent": false
    },

问题是，当我配置 .angular-cli.json 来定义应该通过 ng build 放入 /dist 文件夹中的内容时我有点困惑该把什么放在哪里。

有一个脚本部分，我可以在其中放置我的内容脚本

  "scripts": [
    "content-script.ts"
  ],

然后(无论是一个文件还是多个文件)它都会编译成一个 dist/scripts.bundle.js

然后在我的 manifest.json 中我必须设置: “内容脚本”:[

{
  "matches": ["*"],
  "css": ["mystyles.css"],
  "js": ["scripts.bundle.js"]
}

但是.. 正如我所说，只有一个 scripts.bundle.js。那我应该为背景/事件页面做些什么呢？ (当我需要内容时，我无法加载背景，反之亦然)。

这一切听起来好像为了用 angularjs 2 构建一个插件，我实际上需要构建包含 3 个 angulaj 应用程序的应用程序:

• 弹出页面的应用程序(通过点击分机图标)
• 内容页面应用
• 选项页面的应用程序(通过右键单击分机图标)

(当我说 app 时，我指的是 angularjs2 app)

CLI 似乎是 not support it ？有什么方法(除了不使用 CLI 之外)吗？

Answer 1

这可以在不使用 Angular CLI 弹出 Webpack 配置的情况下完成。经过多次咒骂、拉头发和砸键盘后，我想通了:))。 Chrome 扩展文档非常糟糕，一点都不好笑。添加 Angular X 文档是错误方向的力量倍增器；)

它对我的工作方式是这样的:

在您的 angular-cli.json 文件中，“apps[0]”对象中有一个名为“assets”的数组:

运行 ng build 时，放入 assets 数组的任何内容都包含在 dist 文件夹中。这就是为什么在图像中你可以看到我已经包含了我的 manifest.json 文件、图像、图标等。你也可以只包含一个文件夹名称，只要任何文件/文件夹位于你的 angular 的 src 目录中应用:

所以你可以看到，我还在我的 src 目录中放置了一个名为“js”的文件夹，并在 angular-cli.json 文件中将其引用为 Assets 数组中的“js”。

然后我的 js 文件夹包含在 dist 目录中，该文件夹中的文件(包括 background.js)可以简单地引用为“js/filename.js”:

我希望能帮助遇到此问题的任何人。使用新技术的扩展开发几乎不值得付出努力，但如果你能突破所有的困惑，你就会置身于稀薄的空气中，哈哈。

祝你好运:)