These are chat archives for AngularClass/angular2-webpack-starter

14th
Feb 2017
Mark Oliver
@invegat
Feb 14 2017 17:55
npm run server:prod fails at least for modern npm 4.1.2 and node 6.9.5.
LAADHARI
@pabx06
Feb 14 2017 18:34
hi
is there a way to get more helpfull error/stackTraces than the default zone.js:error ?
jeewendra kumar
@jeewendrakumar
Feb 14 2017 18:50
Hi Everyone. Have one question. How do you reload a route after API call. navigateByUrl not working
Muhammad Ali Makhdoom
@14Muhammad
Feb 14 2017 21:35

Hello,
can you help me with webpack 2 angular 2 ?
I purchased this dashboard..
https://wrapbootstrap.com/theme/sing-app-web-angular-2.0-dashboard-WB0J6BJ85

I want to add DevExtremeModule in it
but I am having issuewith loading fonts inside the css
let me know if you can help

I'm loading DevExteme css files in application.scss
like this

@import '~devextreme/dist/css/dx.common';
@import '~devextreme/dist/css/dx.spa';
@import '~devextreme/dist/css/dx.light.compact';

its loading and getting css

but inside that dx.light.compact.css file , devExtreme loading its own fonts
but webpack not consider those and I have console error
http://localhost:3000/icons/dxicons.ttf
404 (Not Found)
did you get the issue ?
somehow I want to make url relative which is inside the css file..

@font-face {
font-family: 'DXIcons';
src: url(icons/dxicons.woff) format('woff'), url(icons/dxicons.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}

A little light will be appreciated ..

Muhammad Ali Makhdoom
@14Muhammad
Feb 14 2017 21:45

Hello,
can you help me with webpack 2 angular 2 ?
I purchased this dashboard..
https://wrapbootstrap.com/theme/sing-app-web-angular-2.0-dashboard-WB0J6BJ85

I want to add DevExtremeModule in it
but I am having issuewith loading fonts inside the css
let me know if you can help

I'm loading DevExteme css files in application.scss
like this

@import '~devextreme/dist/css/dx.common';
@import '~devextreme/dist/css/dx.spa';
@import '~devextreme/dist/css/dx.light.compact';

its loading and getting css

but inside that dx.light.compact.css file , devExtreme loading its own fonts
but webpack not consider those and I have console error
http://localhost:3000/icons/dxicons.ttf
404 (Not Found)
did you get the issue ?
somehow I want to make url relative which is inside the css file..

@font-face {
font-family: 'DXIcons';
src: url(icons/dxicons.woff) format('woff'), url(icons/dxicons.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}

A little light will be appreciated ..

Mark Oliver
@invegat
Feb 14 2017 21:56
Do you have " {
test: /.(eot|woff2?|svg|ttf)([\?]?.*)$/,
use: 'file-loader'}" in webpack.common.js?
Muhammad Ali Makhdoom
@14Muhammad
Feb 14 2017 21:59
@invegat , yes
I have following rules, let me know if I'm missing something
rules: [
        /*
         * Typescript loader support for .ts and Angular 2 async routes via .async.ts
         * Replace templateUrl and stylesUrl with require()
         *
         * See: https://github.com/s-panferov/awesome-typescript-loader
         * See: https://github.com/TheLarkInn/angular2-template-loader
         */
        {
          test: /\.ts$/,
          use: [
            '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
            'awesome-typescript-loader?{configFileName: "tsconfig.webpack.json"}',
            'angular2-template-loader',
            'angular-router-loader?loader=system&genDir=compiled/src/app&aot=' + AOT
          ],
          exclude: [/\.(spec|e2e)\.ts$/]
        },

        /*
         * Json loader support for *.json files.
         *
         * See: https://github.com/webpack/json-loader
         */
        {
          test: /\.json$/,
          use: 'json-loader'
        },

        { test: /\.scss$/, use: ['raw-loader', 'sass-loader'] },

        { test: /\.(woff2?|ttf|eot|svg)$/, use: 'url?limit=10000&name=[name].[ext]' },

        // Bootstrap 4
        { test: /bootstrap\/dist\/js\/umd\//, use: 'imports?jQuery=jquery' },

        /*
         * to string and css loader support for *.css files
         * Returns file content as string
         *
         */
        {
          test: /\.css$/,
          use: ['to-string-loader', 'css-loader']
        },

        /* Raw loader support for *.html
         * Returns file content as string
         *
         * See: https://github.com/webpack/raw-loader
         */
        {
          test: /\.html$/,
          use: 'raw-loader',
          exclude: [helpers.root('src/index.html')]
        },

        /* File loader for supporting images, for example, in CSS files.
        */
        {
          test: /\.(jpg|png|gif)$/,
          use: 'file-loader'
        }
      ]
Muhammad Ali Makhdoom
@14Muhammad
Feb 14 2017 22:08
@invegat :: did you notice any issue with the pasted code above ?
Mark Oliver
@invegat
Feb 14 2017 22:12
As far as I know all you need to do is use file-loader to get your fonts sent to the output, and just name the fonts you are using without any path info at all
I am using the bootstrap fonts that way
Mark Oliver
@invegat
Feb 14 2017 22:20
It doens't matter where the fonts are stored as long as webpack can find them, mine are at "src\assets\fonts\"