Compatibility with Electron

[kareljan]

I'm trying to install primeng but I get the following error

Uncaught ReferenceError: jQuery is not defined
Chrome says it's because of this line "jQuery.uaMatch = function( ua ) {" (line 112)
I've imported jquery before.
But even in the primeui-ng-all file this error pops up.
Did I forgot to add something?

my dependencies

 "dependencies": {
    "angular2": "2.0.0-beta.15",
    "angular2-localstorage": "^0.2.0"
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "jquery": "^2.2.3",
    "moment": "^2.12.0",
    "ng2-material": "^0.2.8",
    "primeng": "^1.0.0-beta.3",
    "primeui": "4.1.8",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.25",
    "typescript": "^1.8.7",
    "zone.js": "0.6.10"
}

[cagataycivici]

Please remove your jquery and only include;

<script src="node_modules/primeui/primeui-ng-all.min.js"></script>

[kareljan]

When I include only primeui-ng-all.js, I get the error on an other line, within the file on line 9846. So that doesn't really help. Maybe I have to mention it's a Electron app. But that must not make a difference.

[Zuzon]

maybe i'm a captain obvious, but i think you try to use that framework in non-angular app.

[kareljan]

It's an angular app. But that must not change the fact that I get an error
within the file itself. If I load primeui-ng-all.js It must load jQuery in
the top portion of the file, but the error says that it can't find jQuery
further down in the same file. So that's a bit weird.

On Wed, Apr 27, 2016 at 9:08 AM Aigars Zeiza [email protected]
wrote:

maybe i'm a captain obvious, but i think you try to use that framework in
non-angular app.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#256 (comment)

[cagataycivici]

It is probably because of Electron, we also faced with it but could not find enough time to provide a sample with electron. I'll ask my colleague to work on this to setup a quickstart with electron.

@Mrtcndkn Please take over.

[Mrtcndkn]

Hi,
I created a sample demo about PrimeNG-Electron and webpack you can review from:
https://github.com/Mrtcndkn/PrimeNG-Electron
Hope it will help you.

[kareljan]

I've checked it out but, I'm not able to build it successfully. So Can you explain in short What I have to do to make primeng work in electron?

I've tried to import the script like so "import 'script!node_modules/primeui/primeui-ng-all.min.js';". But this gives me a new error. Now I get "Error: ReferenceError: $ is not defined(…)"

[kareljan]

Ok I have found a solution after a long search. It was indeed not primeng related but Electron related.

I've installed jquery through npm
and then I've added

<script src="node_modules/jquery/dist/jquery.min.js"></script>   
<script src="node_modules/primeui/primeui-ng-all.js"></script>

It's a bit strange to load jquery and then load the -all version. But if I load the primeui-ng.js than I get the error again.

And important to add primeng to the packages in the system config

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true }, 
  packages: {
    'app': {defaultExtension: 'ts'},
    'primeng': {
      defaultExtension: 'js'
    }
  },
  map: {
    "primeng": "node_modules/primeng"
  }
});
System.import('app/main')
              .then(null, console.error.bind(console));

So, I hope this will help other people who are having the same problem.
If your situation is slightly different than mine, and you are having problems with loading jquery in electron, I suggest you read this electron/electron#254

[Mrtcndkn]

I solved the problems according to that issue but i have to change node-integration:false in my case but it seems you handled it differently.I'm glad to hear that you find a solution.

[kareljan]

Idd when you change node-integration to false it loads like a normal webpage in the browser. So there are no issues.

[Mrtcndkn]

Yes it's not a problem for me but if someone try to use other third parties or some api's which uses node it can cause some issues

[kareljan]

Ok I feel like an ass now. Apparently the only thing I had to do was to add

'primeng': {
  defaultExtension: 'js'
}

to the package. You don't need to reference the files in a script tag. So you can remove

<script src="node_modules/jquery/dist/jquery.min.js"></script>   
<script src="node_modules/primeui/primeui-ng-all.js"></script>

and it still works. And no errors.

Sorry for all the fuss.

[Mrtcndkn]

No worries it's a good practice for anyone =)

[AlexVFornazieri]

Guys, I need your help,

I did tests and I liked PrimeNG, mainly for including jQuery, which is where the core of the application I'm building was developed, so much so that I ended up buying a premium template.

But to make my system really be useful it needs to have a desktop version, in the case with Electron.

I saw the @Mrtcndkn PrimeNG-Electron repository but I noticed that it is outdated and I could not run the example application included in the template I bought in it.

Are you aware of any boilerplate project with Electron + Angular + PrimeNg set works perfectly, without conflicts?

[Mrtcndkn]

Not at the moment but maybe we can update that existing electron-primeng example to the latest versions. @AlexVFornazieri