Angular-cli 项目无法在 SharePoint 中加载 fontawesome

Question

我已经使用 Angular 4.3.3 和 CLI 版本 1.2.7 构建了一个应用程序，可以运行在 SharePoint 中。此应用程序的图标依赖于 FontAwesome。

运行宁 ng serve 时，显示 FontAwesome 图标没有问题。但是，在为生产环境构建时，它们不会显示。

Angular 应用程序是客户可以安装的产品的一部分。他们都有自己的 SharePoint 环境。捆绑文件由 SharePoint WebPart 通过 IIS 网站检索。

我能够加载这些文件，因此我的应用程序适用于每个客户，但正如我已经说过的，FontAwesome 图标未显示，因为它尝试加载与 SharePoint 站点相关的 woff2、woff 和 ttf 文件url.

这是错误：

如上图所示，文件是相对于 glen2013/sites/AdventureWorks2014 加载的。提供字体文件和捆绑应用程序文件的 IIS 网站不在 glen2013 服务器上，而是在另一台服务器上。我知道我可以在 CLI 中使用 deployUrl 选项来指定提供文件的路径，但是提供文件的 url 因客户而异。每个客户都有自己的 deployUrl，但我不想强迫业务用户更改 .angular-cli.json 文件并打开命令提示符来触发应用程序的生产构建。

有人可以在运行时帮助我实现这个目标吗？

构建命令

ng build -e prod --no-sourcemap

dist 文件夹内容

favicon.ico
fontawesome-webfont.674f50d287a8c48dc19b.eot
fontawesome-webfont.912ec66d7572ff821749.svg
fontawesome-webfont.af7ae505a9eed503f8b8.woff2
fontawesome-webfont.b06871f281fee6b241d6.ttf
fontawesome-webfont.fee66e712a8a08eef580.woff
index.html
inline.bundle.js
main.bundle.js
polyfills.bundle.js
scripts.bundle.js
styles.bundle.js
vendor.bundle.js

.angular-cli.json

"styles": [
  "styles.css",
  "obiz-theme.scss",
  "../node_modules/@progress/kendo-theme-default/dist/all.css",
  "../node_modules/font-awesome/css/font-awesome.css"
],

ng -v 输出

@angular/cli: 1.2.7
node: 8.0.0
os: win32 x64
@angular/animations: 4.3.3
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/platform-server: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.2.7
@angular/compiler-cli: 4.3.3

Answer 1

您可以使用 angular-cli.json 中的资产属性将所有 font awesome 复制到您的构建目录。这使得构建中的所有文件（css + 字体文件）都可用。

// angular-cli.json
"assets": [
    {"glob": "**/*", "input": "../node_modules/font-awesome", "output": "./font-awesome/"}
]

现在您可以从 index.html

访问它

// index.html
<link href="font-awesome/css/font-awesome.css" type="text/css" rel="stylesheet">

这里是用于从项目外部复制资产的 cli 文档。 https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/asset-configuration.md

Answer 2

我同意LLai.When我升级@angular/cli到1.3.0版本时，我也做了这个mistake.Now我已经解决了。 1.Copy fontawesome 到 src/assets 2.Add 它到 index.html 3.modify配置文件.angular-cli.json "assets": [ {"glob": "**/*", "input": "../node_modules/font-awesome", "output": "./font-awesome/"} ], "styles": [ “../node_modules/font-awesome/css/font-awesome.min.css” ],

Angular-cli 项目无法在 SharePoint 中加载 fontawesome

Angular-cli project can't load fontawesome in SharePoint

sharepoint

sharepoint-2013

sharepoint-online

angular-cli

angular