Question

<小时/> 这不是一个重复的问题：

This question解释了这个问题，但该项目并非像我的那样使用angular-cli构建，因此我没有webpack.config文件。

虽然我在下面描述的问题显然是关于使base_url设置正确，但它与this issue不同，后者是关于设置角度以将请求发送到像api这样的base_url。

我的项目在localhost和github:pages上构建并运行（即使css都正确加载）。唯一不适用于github的东西：页面是图像，它们都返回404（即使我可以看到它们，如果我直接在浏览器中导航到assets文件夹）。

问题是在localhost上，angular-cli在主机名后面没有子文件夹运行项目。但是github:pages确实如此。

例如，项目名称为testapp，然后在github:pages上部署：

https://<username>.github.io/testapp

图片在

中

src/assets/images

使用相对路径在angular-2组件内的css中引用它们：

background-image: url('../../assets/images/dining-room.png');

那么如何配置angular-2生产部署文件，以便在生产中路径变为：

background-image: url('testapp/assets/dining-room.png');

我知道github:pages基于Jekyll，我理解this explanation，但我不明白的是你如何配置一个angular-cli项目来了解{{1}使用文件夹来部署应用程序。

<小时/> 更新1

到目前为止，我已经发现部署到github:pages的命令行有一个base_href选项。所以我可以这样做：

github:pages

然后我可以在/ dist文件夹中看到html文件已被更改为包含基本href，如下所示：

ng github-pages:deploy --base-href /testapp/

我原本希望这可以自动解决问题，但图像仍会返回404.这个base_href不会像你期望的那样自动注入到相对路径中。在本地，index.html文件有<base href="/testapp/">，显然可行。

<小时/> 更新2

在尝试解决这个问题时，我开始相信这与Angular构建组件的方式有关。可以找到一个非常好的解释here。

<小时/> EDIT添加了angular-cli.json

<base href="/">

Answer 1

了解Angular2中的所有组件都被声明为相对路径是解决此问题的关键。简单地说这意味着当ng正在构建/编译项目时，一切都与ROOT相关。请参阅问题中的链接更新2。

因此，我的CSS文件是组件的本地文件，以及我的app/src层次结构深处的2个文件夹。这就是我引用这样的图像的原因：

../../assets/images/<file>.png

但是当角度构建/assets/images处于ROOT时 - 您可以在构建后在DIST文件夹中看到（即在运行ng github-pages:deploy之后）

所以我需要做的就是将css更改为直接从root引用（即忽略该css文件是组件中的2个文件夹）：

assets/images/<file>.png

然后用：

构建

ng github-pages:deploy --base-href /testapp/

在生产中，那些图像链接将起作用，因为/testapp/现在是根，它们是相对于root的，因此：

/testapp/assets/images/<file>.png

<小时/> 回答我认为的问题 - 如何从组件内部访问APP_BASE_HREF

为了将来参考，其他人可能会像我一样思考这个问题并且需要直接在组件中base-href访问以解决此问题。由于我想出了如何做到这一点，我想我会在这里添加它：

1 - 在您的app.module.ts中，您需要导入并提供它：

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

providers: [{provide: APP_BASE_HREF, useValue : '/your-value/'}]

警告 - 请注意，现在这是对您的生产基础-href进行硬编码。这将覆盖您在index.html中设置的任何内容（因此使用ng build命令行选项将毫无意义，因为这是在index.html文件夹内的DIST中创建该设置的内容）。

2 - 在你的组件中添加2个导入并在构造函数中注入APP_BASE_REF：

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

constructor(@Inject(APP_BASE_HREF) private baseHref:string) { 
  console.log(this.baseHref);
}

重要提示

如果您在上面的步骤1中将值设置为：

useValue : '/'

然后部署到github：pages ...浏览到你的应用程序后，它将停止使用文件夹名称（它会在应用程序加载后从地址栏中消失......虽然应用程序将继续运行）

最后

截至2016年12月30日，无法在组件内部显示图像并使用本地相对路径引用它们。请参阅this和this。

Answer 2

我在开发模式下的localhost上遇到了类似的问题。每当我更新SCSS文件时，我的背景图像都不会显示在浏览器中。我的背景图片都是引用相对路径，如： background: url(../../assets/heros/contact-hero-mbl@2x.jpg);。我将图像路径更新为： background: url(/assets/heros/contact-hero-mbl@2x.jpg);，一切似乎都按预期工作。希望这有助于某人。

Angular2，Angular-cli，Webpack - 图像资产未在github上加载：prod deploy

2 个答案: