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

我已经构建了一个可以在SharePoint中运行的Angular 4.3.3和CLI版本1.2.7的应用程序。此应用程序取决于FontAwesome的图标。Angular-cli项目无法在SharePoint中加载fontawesome

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

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

我可以加载这些文件，以便我的应用程序可以为每个客户工作，但正如我已经说过的，FontAwesome图标不会显示，因为它会尝试加载相对于SharePoint网站url的woff2，woff和ttf文件。

这是错误：相对于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.912ec66d7572ff82 1749.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

来源

2017-08-11 GStaes

您可以使用资产属性的角度，cli.json所有字体真棒复制到您的构建目录。这使得构建中可用的所有文件（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

来源

2017-08-11 13:43:55 LLai

我需要的文件已经存放在dist文件夹中。我用我正在使用的命令和dist文件夹内容更新了我的问题。 – GStaes

@GStaes和你的font-awesome.css正在请求这些字体文件？我建议上述只是为了保持文件夹结构相同。 font-awesome.css正在尝试加载相对于自身的资源（'../fonts/fontawesome-webfont.eot?v=4.7.0'） – LLai

我通过动态地将样式链接添加到页面来实现它。 – GStaes

我同意LLai.When当我将@ angular/cli升级到版本1.3.0时，我也犯了这个错误。现在我已经解决了它。 1.复印 fontawesome为src /资产 2.增加它的index.html 3.修改配置文件.angular-cli.json “资产”：[{ “水珠”： “**/*”， “input”：“../node_modules/font-awesome”，“output”：“./font-awesome/”} ]， “styles”：[ “../node_modules/font-awesome/css/ font-awesome.min.css“ ”，

来源

2017-08-21 08:21:23

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

回答

相关问题