Primeng/Primeui webpack Module parse failed Unexpected character

[FallenRiteMonk]

Error on adding primeng/primeui to a angular-cli webpack project

1. OS?
   Linux 4.4.0-34-generic long update time 285707ms #53-Ubuntu SMP Wed Jul 27 16:06:39 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux

2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: local (v1.0.0-beta.11-webpack.2, branch: master)
   node: 6.4.0
   os: linux x64

   git log on local angular-cli clone:
   latest master commit is:
   commit 1f4c6fe
   Author: Mike Brocchi mbrocchi@gmail.com
   Date: Mon Aug 29 00:05:32 2016 -0400

   feat(feature): add ability to generate feature modules (feat(feature): add ability to generate feature modules #1867)

3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   added primeng to a project:
   npm install --save primeng primeui
   added "../node_modules/primeui/themes/omega/theme.css", "../node_modules/font-awesome/css/font-awesome.min.css", "../node_modules/primeui/primeui-ng-all.min.css" to apps[0].styles
   ng build

4. The log given by the failure. Normally this include a stack trace and some
   more information.

ERROR in ./~/primeui/images/loadingbar.gif
Module parse failed: <PROJECT_PATH>/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)
 @ <CLI_CLONE_PATH>/angular-cli/~/css-loader!<CLI_CLONE_PATH>/angular-cli/~/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: <PROJECT_PATH>/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)
 @ <CLI_CLONE_PATH>/angular-cli/~/css-loader!<CLI_CLONE_PATH>/angular-cli/~/postcss-loader!./~/primeui/primeui-ng-all.min.css 6:32505-32536
 @ ./~/primeui/primeui-ng-all.min.css
 @ multi styles

Just ask if any more information is required!

[billdwhite]

I filed this same issue against the primeng/primeui github project here

[davyzhang]

The simplest way is to work around is replacing the gif with another. or just delete it and touch an empty file with the same name

I guess it's the image file format problems

[jtsom]

Having a similar, but different problem with PrimeNG.

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": "+"
  }
}

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

[ctkdev]

@jtsom That looks like the same issue that was reported above.
The error indicates that it: "Can't resolve './images/loading.gif'" which is what the commits from @FallenRiteMonk fixed since there wasn't a loader in the webpack config that would handle the *.gif files.

https://github.com/FallenRiteMonk/angular-cli/commit/db95dbf98aae326e41919c991abed07b5d8e0a1f

[jtsom]

I'm not so sure... those commits seem to say that it's a problem with the actual gif file format.. not that it can't find the files at all, which is what the errors I see seem to indicate.

Looking in the folders specified in the error messages, I do not see the gif image files it's looking for:

C:\code\a2test\node_modules\primeng\resources\images\loading.gif (and rating.png - which also indicates that it isn't a gif specific problem)

Looking around I do see images with the correct name in the 'primeui/resources/images' folder... so it looks like images referenced in the primeng css files are looking for files in the primeui package...

[ctkdev]

@jtsom You are exactly correct. I was mistaken. Those files are not available in the primeng/resources/images folder.

[FallenRiteMonk]

I found a workaround if one only needs primeng modules not using the gif images. In my case (using Growl) it works.
Just upgrade primeng to beta 14 and then in your angular-cli.json instead of adding "../node_modules/primeui/primeui-ng-all.min.css" to apps.styles add "../node_modules/primeng/components/growl/growl.css"

[jtsom]

The thing is, I'm not including
"../node_modules/primeng/resources/primeng.min.css",
in my angular-cli.json, I'm including:
"../node_modules/primeng/resources/primeng.min.css",

@ctkdev so, is there a fix / workaround on the horizon?

[FallenRiteMonk]

Which primeng modules are you using?

[jtsom]

Whichever was installed when I did a npm install primeng - "primeng": "^1.0.0-beta.14" (per the directions)

[FallenRiteMonk]

That's just what you installed, but that doesn't mean you need/use all of them! Which modules do you import in your code and inject into your app module?
In my case:

import { GrowlModule } from 'primeng/components/growl/growl';

@NgModule({
  imports: [
    CommonModule,
    routing,
    GrowlModule
  ],
...

[jtsom]

import { InputTextareaModule, ButtonModule } from 'primeng/primeng';

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

That's as far as I got when it started throwing the errors and nothing would display - I didn't even get to put any items on the actual template.

[ctkdev]

Mine is similar:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import {RouterModule} from '@angular/router';
import {ButtonModule} from 'primeng/components/button/button';

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

angular-cli.json

{
  "project": {
    "version": "1.0.0-beta.11-webpack.8",
    "name": "angular-cli-webpack-8"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/primeng/components/button/button.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": "+"
  }
}

package.json

{
  "name": "angular-cli-webpack-8",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "core-js": "^2.4.0",
    "font-awesome": "^4.6.3",
    "primeng": "^1.0.0-beta.14",
    "primeui": "^4.1.15",
    "rxjs": "5.0.0-beta.11",
    "script-loader": "^0.7.0",
    "ts-helpers": "^1.1.1",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.11-webpack.8",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "0.2.3",
    "karma-jasmine": "0.3.8",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.3",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.0"
  }
}

I added a project that works as a baseline https://github.com/ctkdev/angular-cli-webpack-8

@FallenRiteMonk Thanks for the tip on importing the individual component CSS files in the angular-cli.json e.g. "../node_modules/primeng/components/button/button.css"

[FallenRiteMonk]

@jtsom have a look at @ctkdev's example, especially at the angular-cli.json.
Yours should look pretty much the same, only that its style array would be like:

"styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/primeng/components/button/button.css",
        "../node_modules/primeng/components/inputtextarea/inputtextarea.css"
      ]