Estoy usando el componente uib-datepicker-popup (UI Bootstrap). Y parece que faltan las fuentes glyphicons. Estoy usando webjars para cargar dependencias. La fuente de los recursos de la carpeta definitivamente falta, el componente falta el símbolo siguiente o anterior

! [Falta el siguiente o el anterior] 1

Usé la importación estándar en build.sbt ("org.webjars"% "angular-ui-bootstrap"% "2.2.0")

Este es mi build.sbt:

// Dependencies
libraryDependencies ++= Seq(
  filters,
  evolutions,
  jdbc,
  cache,
  "com.typesafe.play" %% "anorm" % "2.5.0",
  "mysql" % "mysql-connector-java" % "5.1.36",
  "org.scalatestplus.play" %% "scalatestplus-play" % "1.5.0" % "test",
  "com.typesafe.play" %% "play-mailer" % "5.0.0",
  specs2 % Test,
  // WebJars (i.e. client-side) dependencies
  "org.webjars" %% "webjars-play" % "2.5.0",
  "org.webjars" % "requirejs" % "2.1.14-1",
  "org.webjars" % "underscorejs" % "1.6.0-3",
  "org.webjars" %  "font-awesome"  % "4.7.0",
  "org.webjars" % "jquery" % "1.11.1",
  "org.webjars" % "bootstrap" % "3.3.6" exclude("org.webjars", "jquery"),
  "org.webjars" % "angularjs" % "1.4.9" exclude("org.webjars", "jquery"),
  "org.webjars" % "angular-ui-bootstrap" % "2.2.0"
)

Este es mi encabezado

<!-- Favicon and Apple Icons -->
<link rel="shortcut icon" type="image/png" href='@routes.Assets.versioned("images/logo/logo_small.png")'>
<link rel="apple-touch-icon" href='@routes.Assets.versioned("images/ico/apple-touch-icon.png")'>
<link rel="apple-touch-icon" sizes="72x72" href='@routes.Assets.versioned("images/ico/apple-touch-icon-72x72.png")'>
<link rel="apple-touch-icon" sizes="114x114" href='@routes.Assets.versioned("images/ico/apple-touch-icon-114x114.png")'>

<!-- Angular JavaScript -->
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("jquery.min.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("angular.min.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("angular-resource.min.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("angular-route.min.js"))'></script>

<script type='text/javascript' src='@routes.Assets.versioned("javascripts/angular/app.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/angular/services.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/angular/directives.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/angular/controllers.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/common/dirPagination.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/common/angular-file-upload-all.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/common/angular-datepicker.js")'></script>
<script type="text/javascript" src="@routes.Application.jsRoutes"></script>

<!-- Date picker dependacy JavaScripts -->
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("angular-animate.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("angular-sanitize.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("ui-bootstrap-tpls.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("bootstrap.min.js"))'></script>


<script type='text/javascript' src='@routes.Assets.versioned("javascripts/common/jquery.bootstrap-growl.min.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/common/main.js")'></script>

Recibo un error de consola porque faltan fuentes:

 GET http://localhost:9000/assets/fonts/glyphicons-halflings-regular.woff 

 GET http://localhost:9000/assets/fonts/glyphicons-halflings-regular.ttf 

Siendo novato, me olvidé de algo trivial, supongo

0
Levijatanu 12 dic. 2016 a las 12:43

1 respuesta

La mejor respuesta

Al enviar la pregunta, he omitido la fuente del problema.

    <link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/main.css")'>
    <link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/angular-datepicker.css")'>
    <link rel="stylesheet" media="screen" href='@routes.WebJarAssets.at(webJarAssets.locate("font-awesome.min.css"))'>
    <link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/bootstrap-cerulean.min.css")'>

Estamos utilizando una plantilla basada en bootstrap Bootswatch: Cerulean, tiene un problema con las fuentes, por lo que la solución es colocar manualmente las fuentes que faltan en el directorio

/public/fonts

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2
0
Levijatanu 15 dic. 2016 a las 17:35