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

回答

相關問題