request fonts ignore baseHref

[hoiama]

When component request fonts in "http://localhost:xxxx/assets/fonts/fontawesome-webfont.woff2?v=4.7.0" is necessary consider the <base href="/EXAMPLE"> in index.html, this tag should transform the request to "http://localhost:xxxx/EXAMPLEassets/fonts/fontawesome-webfont.woff2", but the component ignores it and generate 404 error.

[oblivion-hymns]

Our team is having the same issue. We have an unfortunate corporate requirement that says all requests must be made to a specific base URL, and I can't figure out how to make angular-editor do that natively. That being said, I'm unsure if this is possible via CSS, which is where the editor's requests come from.

One workaround is to @import the Fontawesome CSS file (e.g., via CDN) in the CSS for the component that uses the editor. That'll at least make the icons appear, although you'll still see warnings. We put ours in a wrapper component so it carries the CSS around with it. Not ideal, but it got the job done for now.

You could also intercept the requests on your server and rewrite them to use the right base URL or asset path. This worked for us, too (using express), although it wasn't enough to meet our corporate requirements.

[hoiama]

Hi, I am studying the code today and I saw that the problem is in file angular-editor-master/projects/angular-editor/src/lib/style.scss, at this file you can see a request to another scss @import "~font-awesome/scss/font-awesome.scss; that have many scss that need variable $fa-font-path, this variable is the local that you need to update with your baseUrl, the default is /assets/fonts and browser will make request to localhost:xxx/assets/fonts/fontawesome-webfont.woff2.

I change to => $fa-font-path: "/bwp/blog/assets/fonts" !default; now the browser will request to localhost:xxx/bwp/blog/assets/fonts/fontawesome-webfont.woff2

So, the lib need a new feature to define a custom value to $fa-font-path when we call selector of component, or define it in editorConfig.

<angular-editor [baseUrl]="'bwp/blog'" [config]="editorConfig"></angular-editor>

I make a build and work perfect here, maybe in next month I will create a feature to collaborate.

[chpoit]

This is an issue on my end too, we have <base href="dist/"> in our index.html and the library does not respect it

[marcoserafini2]

Hi, I am studying the code today and I saw that the problem is in file angular-editor-master/projects/angular-editor/src/lib/style.scss, at this file you can see a request to another scss @import "~font-awesome/scss/font-awesome.scss; that have many scss that need variable $fa-font-path, this variable is the local that you need to update with your baseUrl, the default is /assets/fonts and browser will make request to localhost:xxx/assets/fonts/fontawesome-webfont.woff2.

I change to => $fa-font-path: "/bwp/blog/assets/fonts" !default; now the browser will request to localhost:xxx/bwp/blog/assets/fonts/fontawesome-webfont.woff2

So, the lib need a new feature to define a custom value to $fa-font-path when we call selector of component, or define it in editorConfig.

<angular-editor [baseUrl]="'bwp/blog'" [config]="editorConfig"></angular-editor>

I make a build and work perfect here, maybe in next month I will create a feature to collaborate.

hi @hoiama , I have the same problem. If you plan to implement this feature, I'll wait for you. Otherwise I'll proceed with the development.

[kambbado]

I successfully migrated the angular-editor project to Angular 17 and incorporated @fortawesome/angular-fontawesome icons. In case someone, like @Kolkov or others, wants to leverage my repository at https://github.com/kambbado/angular-editor as a reference, feel free. I have locally published it to our Azure DevOps. This was the most straightforward method considering the number of tickets I had opened against this issue.

Make sure to update you .npmrc file in the angular-editor director your npm registry

npm install --legacy-peer-deps
npm run build-prod:lib
npm run publish:lib