Primeng/Primeui webpack Module parse failed Unexpected character #1878

FallenRiteMonk · 2016-08-29T19:46:03Z

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

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
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 [email protected]
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)
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
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!

The text was updated successfully, but these errors were encountered:

billdwhite · 2016-08-29T23:13:33Z

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

davyzhang · 2016-08-30T06:51:49Z

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 · 2016-08-31T15:56:46Z

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 · 2016-09-01T14:50:56Z

@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 · 2016-09-01T15:17:18Z

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 · 2016-09-01T20:02:32Z

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

FallenRiteMonk · 2016-09-02T12:23:14Z

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 · 2016-09-02T12:26:27Z

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 · 2016-09-02T12:27:46Z

Which primeng modules are you using?

jtsom · 2016-09-02T12:30:34Z

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

FallenRiteMonk · 2016-09-02T12:33:42Z

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 · 2016-09-02T12:36:04Z

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 · 2016-09-02T13:11:05Z

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 · 2016-09-02T13:21:10Z

@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"
      ]

jtsom · 2016-09-02T13:23:44Z

Yup, just read the comment and made that change. I don't get a build error anymore :)

(I'm now getting a runtime exception: config.js:15 Uncaught TypeError: Cannot read property 'Emulated' of undefined - some nasty issue trying to use the latest of all the things - typescript 2, A2CLi, A2 RC6... Ugh)

ctkdev · 2016-09-02T13:25:42Z

@jtsom Be sure to downgrade typescript to "typescript": "2.0.0"

Check the package.json file to make sure that you have downgraded typescript and pinned it at 2.0.0

jtsom · 2016-09-02T13:41:34Z

Yup. I do have that in my package.json, trying to do an npm install [email protected] to see if that helps...

and nope...

ctkdev · 2016-09-02T13:48:04Z

@jtsom I was right where you are right now.

I followed the steps listed in this comment to get past the issue:
#1901 (comment)

I promise it is worth it once you get everything in place and working. The cli is great - when it works. ;-)

jtsom · 2016-09-02T13:49:15Z

Yeah, I just did that (I did it with another project and it fixed it), but it's not working for this one...

I can't wait until everything is final and all the dependencies are up to date!

ctkdev · 2016-09-02T14:28:49Z

@jtsom As a last resort - I normally do a:
rm -rf node_modules/ dist/ tmp/

Then do a:
npm install

jtsom · 2016-09-02T14:29:59Z

Thanks... been there.. done that ;) No joy.

jtsom · 2016-09-02T15:20:21Z

The crazy thing is, I have another project, that's configured almost identically, that runs just fine. The package.json, app.module.ts, and angular-cli.json files are just about identical. I'm at a loss...

add loader to support loading of gif images Closes #1878

angular-automatic-lock-bot · 2019-09-06T03:40:55Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

FallenRiteMonk mentioned this issue Aug 30, 2016

fix: add loader for gif #1888

Closed

FallenRiteMonk mentioned this issue Sep 2, 2016

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

Open

andvasp mentioned this issue Sep 10, 2016

Having css-loader post-css loader ERROR #1943

Closed

FallenRiteMonk mentioned this issue Sep 12, 2016

fix: add loader for gif #2066

Merged

hansl closed this as completed in #2066 Sep 12, 2016

hansl pushed a commit that referenced this issue Sep 12, 2016

fix: add loader for gif (#2066)

126c82b

add loader to support loading of gif images Closes #1878

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Primeng/Primeui webpack Module parse failed Unexpected character #1878

Primeng/Primeui webpack Module parse failed Unexpected character #1878

FallenRiteMonk commented Aug 29, 2016

billdwhite commented Aug 29, 2016

davyzhang commented Aug 30, 2016 •

edited

Loading

jtsom commented Aug 31, 2016

ctkdev commented Sep 1, 2016

jtsom commented Sep 1, 2016

ctkdev commented Sep 1, 2016

FallenRiteMonk commented Sep 2, 2016

jtsom commented Sep 2, 2016

FallenRiteMonk commented Sep 2, 2016

jtsom commented Sep 2, 2016

FallenRiteMonk commented Sep 2, 2016

jtsom commented Sep 2, 2016 •

edited

Loading

ctkdev commented Sep 2, 2016

FallenRiteMonk commented Sep 2, 2016

jtsom commented Sep 2, 2016

ctkdev commented Sep 2, 2016

jtsom commented Sep 2, 2016

ctkdev commented Sep 2, 2016

jtsom commented Sep 2, 2016

ctkdev commented Sep 2, 2016

jtsom commented Sep 2, 2016

jtsom commented Sep 2, 2016

angular-automatic-lock-bot bot commented Sep 6, 2019

Primeng/Primeui webpack Module parse failed Unexpected character #1878

Primeng/Primeui webpack Module parse failed Unexpected character #1878

Comments

FallenRiteMonk commented Aug 29, 2016

billdwhite commented Aug 29, 2016

davyzhang commented Aug 30, 2016 • edited Loading

jtsom commented Aug 31, 2016

ctkdev commented Sep 1, 2016

jtsom commented Sep 1, 2016

ctkdev commented Sep 1, 2016

FallenRiteMonk commented Sep 2, 2016

jtsom commented Sep 2, 2016

FallenRiteMonk commented Sep 2, 2016

jtsom commented Sep 2, 2016

FallenRiteMonk commented Sep 2, 2016

jtsom commented Sep 2, 2016 • edited Loading

ctkdev commented Sep 2, 2016

FallenRiteMonk commented Sep 2, 2016

jtsom commented Sep 2, 2016

ctkdev commented Sep 2, 2016

jtsom commented Sep 2, 2016

ctkdev commented Sep 2, 2016

jtsom commented Sep 2, 2016

ctkdev commented Sep 2, 2016

jtsom commented Sep 2, 2016

jtsom commented Sep 2, 2016

angular-automatic-lock-bot bot commented Sep 6, 2019

davyzhang commented Aug 30, 2016 •

edited

Loading

jtsom commented Sep 2, 2016 •

edited

Loading