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!