Issue loading a font from primeng omega theme roboto-v15-latin

[egonzal93]

Hi,

I was using the no-universal-support branch as my starter template:

I was using a primeng theme and I have this on my my scss file

@import '~primeng/resources/themes/omega/theme';

Webpack cannot resolve a module I get the following error:

ERROR in .//css-loader!.//sass-loader/lib/loader.js!./src/app/containers/dashboard/style.scss
Module not found: Error: Can't resolve './fonts/roboto-v15-latin-regular.ttf'

Inside of '../../node_modules/primeng/resources/themes/omega/theme.css'

its referencing the font:

/* roboto-regular - latin /
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('fonts/roboto-v15-latin-regular.eot'); / IE9 Compat Modes /
src: local('Roboto'), local('Roboto-Regular'),
url('fonts/roboto-v15-latin-regular.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
url('fonts/roboto-v15-latin-regular.woff2') format('woff2'), / Super Modern Browsers /
url('fonts/roboto-v15-latin-regular.woff') format('woff'), / Modern Browsers /
url('fonts/roboto-v15-latin-regular.ttf') format('truetype'), / Safari, Android, iOS /
url('fonts/roboto-v15-latin-regular.svg#Roboto') format('svg'); / Legacy iOS */
}

My app.components.ts loads the primeng library:
@component({
selector: 'sdm-app',
styleUrls: [
'./material-theme.scss',
'../../node_modules/primeng/resources/primeng.min.css',
'../../node_modules/primeng/resources/themes/omega/theme.css',
'../../node_modules/font-awesome/css/font-awesome.min.css',
'./app.component.scss'],
templateUrl: './app.component.html',
encapsulation: ViewEncapsulation.None
})

Is there something that needs to be added into the webpack.config.ts ?

  {
    test: /\.scss$/,
    loaders: ['to-string-loader', 'css-loader', 'sass-loader']
  },

Thanks,
Jason

[qdouble]

hmm... can you upload a fork with this?

[egonzal93]

Hi Thanks for the response.
I will upload it. In the meantime I tried to resolve it by adding this on constants.js

All dependent files need for

exports.MY_COPY_FOLDERS = [
// use this for folders you want to be copied in to Client dist
// src/assets and index.html are already copied by default.
// format is { from: 'folder_name', to: 'folder_name' }

{ from: 'node_modules/primeng/resources/primeng.min.css' },
{ from: 'node_modules/primeng/resources/themes/omega/theme.css'} ,
{ from: 'node_modules/primeng/resources/themes/omega'} ,
{ from: 'node_modules/font-awesome/css/font-awesome.min.css' },
];

And then I did an $ npm run build:dev
I get the same type of error during the build:

./node_modules/@angular/platform-browser/@angular/platform-browser.es5.js] .//@angular/platform-browser/@angular/platform-browser.es5.js 142 kB {0} [built]
[./node_modules/@angular/router/@angular/router.es5.js] .//@angular/router/@angular/router.es5.js 210 kB {0} [built]
[./node_modules/@angularclass/hmr/dist/index.js] .//@angularclass/hmr/dist/index.js 202 bytes {0} [built]
[./node_modules/@angularclass/idle-preload/dist/index.js] .//@angularclass/idle-preload/dist/index.js 3.02 kB {0} [built]
[./node_modules/@ngrx/core/add/operator/select.js] .//@ngrx/core/add/operator/select.js 170 bytes {0} [built]
[./node_modules/primeng/primeng.js] .//primeng/primeng.js 3.83 kB {0} [built]
[./src/app/app.module.ts] ./src/app/app.module.ts 3.34 kB {0} [built]
[./src/app/app.routing.ts] ./src/app/app.routing.ts 319 bytes {0} [built]
[./src/environment.ts] ./src/environment.ts 866 bytes {0} [built]
[./src/main.browser.ts] ./src/main.browser.ts 693 bytes {0} [built]
[./src/polyfills.browser.ts] ./src/polyfills.browser.ts 276 bytes {0} [built]
[./src/rxjs.imports.ts] ./src/rxjs.imports.ts 930 bytes {0} [built]
+ 492 hidden modules

ERROR in .//css-loader!.//sass-loader/lib/loader.js!./src/app/primeng-theme.scss
Module not found: Error: Can't resolve './fonts/roboto-v15-latin-regular.eot' in '/Users/Jason/WebstormProjects/code-snippets/sdm/sdm-app/src/app'
@ .//css-loader!.//sass-loader/lib/loader.js!./src/app/primeng-theme.scss 6:16364-16411 6:16506-16553
@ ./src/app/primeng-theme.scss
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.browser.ts

ERROR in .//css-loader!.//sass-loader/lib/loader.js!./src/app/primeng-theme.scss
Module not found: Error: Can't resolve './fonts/roboto-v15-latin-regular.woff2' in '/Users/Jason/WebstormProjects/code-snippets/sdm/sdm-app/src/app'
@ .//css-loader!.//sass-loader/lib/loader.js!./src/app/primeng-theme.scss 6:16605-16654
@ ./src/app/primeng-theme.scss
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.browser.ts

ERROR in .//css-loader!.//sass-loader/lib/loader.js!./src/app/primeng-theme.scss
Module not found: Error: Can't resolve './fonts/roboto-v15-latin-regular.woff' in '/Users/Jason/WebstormProjects/code-snippets/sdm/sdm-app/src/app'
@ .//css-loader!.//sass-loader/lib/loader.js!./src/app/primeng-theme.scss 6:16687-16735
@ ./src/app/primeng-theme.scss
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.browser.ts

ERROR in .//css-loader!.//sass-loader/lib/loader.js!./src/app/primeng-theme.scss
Module not found: Error: Can't resolve './fonts/roboto-v15-latin-regular.ttf' in '/Users/Jason/WebstormProjects/code-snippets/sdm/sdm-app/src/app'
@ .//css-loader!.//sass-loader/lib/loader.js!./src/app/primeng-theme.scss 6:16767-16814
@ ./src/app/primeng-theme.scss
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.browser.ts

ERROR in .//css-loader!.//sass-loader/lib/loader.js!./src/app/primeng-theme.scss
Module not found: Error: Can't resolve './fonts/roboto-v15-latin-regular.svg' in '/Users/Jason/WebstormProjects/code-snippets/sdm/sdm-app/src/app'
@ .//css-loader!.//sass-loader/lib/loader.js!./src/app/primeng-theme.scss 6:16850-16897
@ ./src/app/primeng-theme.scss
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.browser.ts

ERROR in .//css-loader!.//sass-loader/lib/loader.js!./src/app/primeng-theme.scss
Module not found: Error: Can't resolve './images/slider_handles.png' in '/Users/Jason/WebstormProjects/code-snippets/sdm/sdm-app/src/app'
@ .//css-loader!.//sass-loader/lib/loader.js!./src/app/primeng-theme.scss 6:19475-19513
@ ./src/app/primeng-theme.scss
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.browser.ts
Child html-webpack-plugin for "index.html":
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] .//html-webpack-plugin/lib/loader.js!./src/index.html 1.66 kB {0} [built]
[./node_modules/lodash/lodash.js] .//lodash/lodash.js 540 kB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 517 bytes {0} [built]

**I tried to add a module resolver on webpack.config.ts perhaps **

const clientConfig = function webpackConfig(): WebpackConfig {
let config: WebpackConfig = Object.assign({});

config.module = {
rules: [
{
test: /.js$/,
loader: 'source-map-loader',
exclude: [EXCLUDE_SOURCE_MAPS]
},
{
test: /.ts$/,
loaders: !DLL && !DEV_SERVER ? ['@ngtools/webpack'] : [
'@angularclass/hmr-loader',
'awesome-typescript-loader?{configFileName: "tsconfig.webpack.json"}',
'angular2-template-loader',
'angular-router-loader?loader=system&genDir=compiled&aot=' + AOT
],
exclude: [/.(spec|e2e|d).ts$/]
},
{ test: /.json$/, loader: 'json-loader' },
{ test: /.html/, loader: 'raw-loader', exclude: [root('src/index.html')] },
{ test: /.css$/, loader: 'raw-loader' },
{
test: /.scss$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader']
},
...MY_CLIENT_RULES
],
modules: [
path.resolve(__dirname), 'node_modules'
]
};

But this won't run.

[egonzal93]

Hello,

I had forked it and pushed it under egonzal93-001

Basically I can't do a build and kept getting the errors from above this thread.

Thanks,
Jason

[egonzal93]

Hi,

I figured it out and fixed it. I got it to compile and run.

I'll post what I did later.

Thanks,
Jason

[tmzblue]

Hello,

I was struggling with this problem too. But I found the solution in a webpack related problem.

jkrnak's post solved my issue.

Hope it helps!