Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
billdwhite opened this issue Aug 24, 2016 · 2 comments

Comments

@billdwhite
Copy link

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
Copy link

jtsom commented Sep 2, 2016

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
Copy link

@billdwhite I found a workaround using the new beta 14! Have a look at the issue at angular-cli:
angular/angular-cli#1878

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants