I have a .NET Core 2.0 app using the Angular 2 Template.
The problem is that I can't add a custom font (woff2) to the app.component.css
#font-face {
font-family: 'FrutigerBold';
src: url("./assets/fonts/frutiger65_bold.woff2") format('woff2');
}
And get the following error:
NodeInvocationException: Prerendering failed because of error: Error: Module parse failed: C:\Users\gbuenrostro\documents\visual studio 2017\Projects\SecurityAngular\SecurityAngular\ClientApp\app\assets\fonts\frutiger65_bold.woff2 Unexpected character '�' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
Any ideas?
This is the Project:
Don't add the css in your app.component.css.
Create a file.css to include the font (not put then in asset folder) and change the webpack.config.vendor adding the file in nonTreeShakableModules
const nonTreeShakableModules = [
...
'file.css',
...
];
Related
I've added my fonts as such:
#font-face {
font-family: "NHaasGroteskDSProMedium";
src: url(/fonts/NHaasGroteskDSProM.otf);
}
#font-face {
font-family: "NHaasGroteskDSProBold";
src: url(/fonts/NHaasGroteskDSProB.otf);
}
The folder is well located, as you can see here:
I keep having this error:
Failed to decode downloaded font: http://localhost:3000/fonts/NHaasGroteskDSProM.otf
OTS parsing error: invalid sfntVersion: 1008813135
I'm therefore not able to display the correct fonts when the npm start launches.
Files in the src folder are not directly served by your server. These files are bundled together with the build process first, and any files that are not imported will not end up in the build.
For these types of files, you can place them in the public folder, and the will end up in the build untouched and can be served by your server.
For more info see the CRA page on the public folder
Rails-4
For font face mentioned below,
#font-face {
font-family: "Verdana";src: url(/assets/Verdana.ttf) format("truetype");
}
Location of file is app/assets/fonts (loaded by rails itself)
Now if I have this file in app/assets/fonts/client_4 folder,
I had to add following in application.rb
config.assets.paths << Rails.root.join('app', 'assets', 'fonts', 'client_4')
or
Dir.glob("#{Rails.root}/app/assets/fonts/**/").each do |path|
config.assets.paths << path
end
It worked with font-face url provided as url(/assets/Verdana.ttf), but need to restart server to load application.rb
Query
Case is my font file is uploaded by user and stored in newly created client_x folder present in app/assets/fonts directory.
I want to add asset_path in this case for that client_x folder without restarting server. Please suggest.
Update
I added following in controller whenever directory is created,
MyApplication::Application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts', "client_#{#client.id}/").to_s
And I checked following in page by erb tag,
= puts MyApplication::Application.config.assets.paths.inspect
And I got following output,
[
[ 0] "/home/..../app/assets/fonts",
[ 1] "/home/..../app/assets/images",
[ 2] "/home/..../app/assets/javascripts",
[ 3] "/home/..../app/assets/stylesheets",
[ 4] "/home/..../vendor/assets/javascripts",
.
.
[20] "/home/..../app/assets/fonts/client_164/",
[21] "/home/..../app/assets/fonts/client_163/"
]
20th path is added by application.rb & loaded when server started, I do get font file by asset_url in font-face
21st path is added by controller and & I do not get font file by asset_url in font-face.
I am not getting if I inspect I can see both path in assets , still I do not get asset url for font files inside client_163 added by controller. I want it without restarting server. Please suggest if eagerload or autoload can help.
I could not get exact what I wanted but I found alternative to work with.
I did not add asset path for sub-directories inside app/assets/fonts/.
I worked with complete url like "#{APP_URL}/assets/client_#{client_id}/#{self[file]}"
which produce url like 'http://localhost:3000/assets/client_163/GreatVibes-Regular.otf'
Here APP_URL for development is, 'http://localhost:3000' set in development.rb.
Similarly added for staging & production.
Better to keep variable APP_URL in application.yml (implementing figaro gem) & accessing as "#{ENV[APP_URL]}" (note: add application.yml in .gitignore)
Waiting for better approach.
Update
In staging & production I am getting font applied for not secure https url so, please help.
I have created an angular 5 project with angular cli. referenced css in angular-cli.json style tag.
"styles": [
"styles.css",
"static/css/custom.css",
"static/css/style.bundle.css",
"static/css/vendors.bundle.css",
"static/css/fullcalendar.bundle.css"
]
when i try to run app in browser. i get font files aborted error in console
GET http://localhost:4200/fonts/font-awesome/fontawesome-webfont.woff2?v=4.7.0 net::ERR_ABORTED
fonts/font-awesome/fontawesome-webfont.woff?v=4.7.0:1 GET http://localhost:4200/fonts/font-awesome/fontawesome-webfont.woff?v=4.7.0 net::ERR_ABORTED
fonts/font-awesome/fontawesome-webfont.ttf?v=4.7.0:1 GET http://localhost:4200/fonts/font-awesome/fontawesome-webfont.ttf?v=4.7.0 net::ERR_ABORTED
these font files are being used in vendors.bundle.css
what have i tried:
I tried to change url src: url("fonts/socicon/socicon.eot") to src: url("/fonts/socicon/socicon.eot") in css file.
I tried to load css like this,
<link rel="stylesheet" type="text/css" ref="./static/css/style.bundle.css"/>
but it gave me this error
**because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled**
Angular 2: file not found on local .json file
It seems that the "static" folder not accessible. This previous issue may help.
I'm using ASP.NET Core Template Pack (Angular 2 , Net core ,webpack) (plugin website)
Now I need to use a css file that is not located in mycomponents folder.
My folder structure :
screenshot
Component
import { Component } from '#angular/core';
#Component({
selector: 'app',
template: require('./app.component.html'),
styles: [require('./mystyle.css')]
})
export class AppComponent {
}
and I ran the command :
webpack --config webpack.config.vendor.js
I still get the error
Call to Node module failed with error: Prerendering failed because of error: Error: Cannot find module "./mystyle.css"
Can someone help me ?
Thanks
Your css file is located in different folder.
Path to your custom css should be [require('../../../assets/css/mystyle.css')]
Please note it that there is already created css file for app.component by default.
I'm trying to use fullcalendar plugin in my grails app and I'm getting a Resource not found for all the fullcalendar css and js files :
Error|
Resource not found: /plugins/full-calendar-1.5.1.0/css/fullcalendar.css
Resource not found: /plugins/full-calendar- 1.5.1.0/css/fullcalendar.print.css
Resource not found: /plugins/full-calendar-1.5.1.0/css/fullcalendar.css
Resource not found: /plugins/full-calendar- 1.5.1.0/css/fullcalendar.print.css
Resource not found: /plugins/full-calendar-1.5.1.0/js/fullcalendar.min.js
Resource not found: /plugins/full-calendar-1.5.1.0/css/fullcalendar.css
Resource not found: /plugins/full-calendar-1.5.1.0/css/fullcalendar.print.css
Resource not found: /plugins/full-calendar-1.5.1.0/js/fullcalendar.js
I'm using
compile ":full-calendar:1.5.1.0"
in grails 2.3.7
Ideally I guess it should look into the plugins/web-app/css or js folder in grails 2.3.7 where the actual files are present.
I'm including the fullcalendar using
<fullcal:resources/>
And grails clean did not do any magic this time.
Below is the fullCalendarResources.groovy config file
modules = {
'full-calendar' {
dependsOn 'jquery'
dependsOn 'jquery-ui'
resource url: [ plugin:'full-calendar', dir:'css/fullcalendar', file:'fullcalendar.css' ]
resource url: [ plugin:'full-calendar', dir:'css/fullcalendar', file:'fullcalendar.print.css' ], attrs: [ media: 'print' ]
resource url: [ plugin:'full-calendar', dir:'js/fullcalendar', file:'fullcalendar.js' ],
disposition:'head', nominify: true
}
}
My basic question is why is it looking in plugin/{plugin-name}/css instead of the web-app folder?
After doing a lot of permutations, this is what worked for me:
<g:javascript library="full-calendar"/>
<r:layoutResources/>
instead of
<fullcal:resources/>
in the head
EDIT :
A better way would be to add the fullcalender resources to ApplicationResources.groovy and manually add the js and css to /web-app to and add the application library to your page. As the grails plugin for fullcalender has not been updated.