primefaces / primeui

Rich set of javascript-css only widgets
http://www.primefaces.org/primeui
278 stars 125 forks source link

Error about gif loader when using angular-cli web pack to include css file #256

Open billdwhite opened 7 years ago

billdwhite commented 7 years ago

When I follow the latest Angular RC5/Angular-Cli Webpack instructions here for including the primeui-ng-all.min.css file in the angular-cli.json file, I get errors complaining about not having an appropriate loader for the 2 gif files mentioned below:

ERROR in ./~/primeui/images/loadingbar.gif
Module parse failed: /dev/src/angular/navigate/node_modules/primeui/images/loadingbar.gif Unexpected character '�' (1:6)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./~/postcss-loader!./~/primeui/primeui-ng-all.min.css 6:16675-16709
 @ ./~/primeui/primeui-ng-all.min.css
 @ multi styles

ERROR in ./~/primeui/images/loading.gif
Module parse failed: /dev/src/angular/navigate/node_modules/primeui/images/loading.gif Unexpected character '' (1:7)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./~/postcss-loader!./~/primeui/primeui-ng-all.min.css 6:32505-32536
 @ ./~/primeui/primeui-ng-all.min.css
 @ multi styles

My angular-cli-json file looks like this:

{
    "project": {
        "version": "1.0.0-beta.11-webpack.2",
        "name": "navigate"
    },
    "apps": [
        {
            "root": "src",
            "prefix": "app",
            "main": "main.ts",
            "index": "index.html",
            "assets": "assets",
            "outDir": "dist",
            "tsconfig": "tsconfig.json",
            "mobile": false,
            "styles": [
                "../node_modules/bootstrap/dist/css/bootstrap.css",
                "../node_modules/primeui/primeui-ng-all.min.css",
                "../node_modules/primeui/themes/bootstrap/theme.css",
                "../node_modules/font-awesome/css/font-awesome.min.css",
                "styles.css"
            ],
            "scripts": [],
            "environments": {
                "source": "../environments/environment.ts",
                "prod": "../environments/environment.prod.ts",
                "dev": "../environments/environment.dev.ts"
            }
        }
    ],
    "addons": [],
    "packages": [],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "css",
        "prefixInterfaces": false,
        "lazyRoutePrefix": "+"
    }
}
jtsom commented 7 years ago

Having a similar, but different problem with PrimeNG.

Running: Angular2 2.0.0-rc.6 AngularCLI 1.0.0-beta.11-webpack.8 PrimeNG: ^1.0.0-beta.14

My angular-cli.json file is:

{
  "project": {
    "version": "1.0.0-beta.11-webpack.8",
    "name": "a2test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "",
      "mobile": false,
      "styles": [
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "styles.css"
      ],
      "scripts": [

      ],
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { InputTextModule } from 'primeng/components/inputtext/inputtext';
import { ButtonModule } from 'primeng/components/button/button';

import { AppComponent } from './app.component';
import { WelcomeComponent } from './welcome/welcome.component';

@NgModule({
  declarations: [
    AppComponent,  WelcomeComponent
  ],
  imports: [
    BrowserModule,
    InputTextModule, ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

running the latest AngularCLI: "1.0.0-beta.11-webpack.8"

When trying to start the app with ng serve, I get:

ERROR in ./~/css-loader!./~/postcss-loader!./~/primeng/resources/primeng.min.css                                                               
Module not found: Error: Can't resolve './images/loadingbar.gif' in 'C:\code\a2test\node_modules\primeng\resources'                            
 @ ./~/css-loader!./~/postcss-loader!./~/primeng/resources/primeng.min.css 6:16049-16083                                                       
 @ ./~/primeng/resources/primeng.min.css                                                                                                       
 @ multi styles                                                                                                                                

ERROR in ./~/css-loader!./~/postcss-loader!./~/primeng/resources/primeng.min.css                                                               
Module not found: Error: Can't resolve './images/loading.gif' in 'C:\code\a2test\node_modules\primeng\resources'                               
 @ ./~/css-loader!./~/postcss-loader!./~/primeng/resources/primeng.min.css 6:33708-33739                                                       
 @ ./~/primeng/resources/primeng.min.css                                                                                                       
 @ multi styles                                                                                                                                

ERROR in ./~/css-loader!./~/postcss-loader!./~/primeng/resources/primeng.min.css                                                               
Module not found: Error: Can't resolve './images/rating.png' in 'C:\code\a2test\node_modules\primeng\resources'                                
 @ ./~/css-loader!./~/postcss-loader!./~/primeng/resources/primeng.min.css 6:50372-50402                                                       
 @ ./~/primeng/resources/primeng.min.css                                                                                                       
 @ multi styles
FallenRiteMonk commented 7 years ago

@billdwhite I found a workaround using the new beta 14! Have a look at the issue at angular-cli: https://github.com/angular/angular-cli/issues/1878