[PatternFly] patternfly-ng and SystemJs

[Stan Silvert]

On 5/18/2018 7:54 AM, Stan Silvert wrote:
> On 5/16/2018 2:28 PM, Dan Labrecque wrote:
>> Do you have an example app repo so we can see how it's failing?
> I've put together a version of the Tour of Heroes demo using SystemJS 
> and PatternFly-NG.
> https://github.com/ssilvert/angular-tour-of-heroes/tree/systemjs-patternfly-ng 
>
>
> You can see the changes I made in the first commit to get 
> EmptyStateComponent to render.  I had to configure every pf-ng 
> dependency in my system-config.ts file.
> https://github.com/ssilvert/angular-tour-of-heroes/commit/20ae37b47c7b8052da50a3a26810d6eb024d3be4 
>
>
> I got it to finally "work" with the following caveats:
>
> 1) You have to install a transpiler so that code can be transpiled in 
> the browser.  This, of course, is unacceptable for production. I think 
> the problem is that the production version of pf-ng specifies a module 
> type of "es2015".  See tsconfig-prod.json.  In the plain 
> tsconfig.json, it is using commonjs, which I think would eliminate the 
> issue.  Perhaps we need to release two versions?
>
> 2) If you reference pf-ng's root index.js, you will get an error: 
> "Cannot read property 'Injectable of undefined'".
>
> To get around this error, I had to reference the index.js in each 
> component's subdirectory.  You can see how this is set up in 
> system-config.ts and how the import is done in app.module.ts.  I'm 
> concerned that this workaround may not work for all components and 
> that I'll just hit the above error again eventually.
Which is exactly what happened.  It's possibly a problem with ngx-bootstrap?

zone.js:665 Unhandled Promise rejection: (SystemJS) Cannot read property 
'Injectable' of undefined
     TypeError: Cannot read property 'Injectable' of undefined
         at eval 
(http://localhost:8000/node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js!transpiled:3959:109)
         at Object.eval 
(http://localhost:8000/node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js!transpiled:3961:26)
         at __webpack_require__ 
(http://localhost:8000/node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js!transpiled:31:55)
         at Object.eval 
(http://localhost:8000/node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js!transpiled:3877:99)
         at __webpack_require__ 
(http://localhost:8000/node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js!transpiled:31:55)
         at Object.eval 
(http://localhost:8000/node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js!transpiled:7314:102)
         at __webpack_require__ 
(http://localhost:8000/node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js!transpiled:31:55)
         at Object.eval 
(http://localhost:8000/node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js!transpiled:15129:88)
         at __webpack_require__ 
(http://localhost:8000/node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js!transpiled:31:55)
         at Object.eval 
(http://localhost:8000/node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js!transpiled:13577:98)
     Evaluating http://localhost:8000/app/app.module.js
     Evaluating http://localhost:8000/app/main.js

>
> 3) Everything in RxJs is loading, causing dozens of small requests for 
> RxJs files.  Again, this won't work be acceptable for production.  I 
> fixed this problem in my own app by installing the rxjs-system-bundle 
> package.  But I haven't been able to get this to work with the pf-ng.
>
>>
>> On 5/16/18 11:07 AM, Stan Silvert wrote:
>>> Hi Dan,
>>>
>>> Our app is unable to use WebPack (wish we could).  I've haven't been 
>>> able to get PatternFlyNG to work with SystemJS. Was hoping someone 
>>> could tell me how to set this up.
>>>
>>> Stan
>>>
>>> On 5/16/2018 10:37 AM, Dan Labrecque wrote:
>>>> Hi Stan,
>>>>
>>>> PatternFlyNG is built with WebPack, but that doesn't mean your 
>>>> application must use it. Unless you're interested in tree shaking? 
>>>> As a stand alone library, we're not generating a single bundle.js 
>>>> file as done with applications, but generating multiple index.js 
>>>> files, so modules can be imported individually.
>>>>
>>>> In the application, we're using ES6 syntax to import the modules. I 
>>>> haven't used SystemJS, but understand it's used client-side to 
>>>> import modules lazily. Looking at the SystemJS syntax, I'm not sure 
>>>> there is an advantage over individual ES6 module imports? That is, 
>>>> considering PatternFlyNG is a stand alone library.
>>>>
>>>> FYI, Catherine Robson mentioned she's looking for a date/time to 
>>>> set up with your team to talk about PatternFlyNG in more detail.
>>>>
>>>> Dan
>>>>
>>>> On 5/15/18 3:39 PM, Stan Silvert wrote:
>>>>> Has anyone here successfully used patternfly-ng with a SystemJs 
>>>>> based application?
>>>>>
>>>>> Is patternfly-ng only meant to be used with WebPack?
>>>>>
>>>>> Stan
>>>>>
>>>>> _______________________________________________
>>>>> PatternFly mailing list
>>>>> PatternFly at redhat.com
>>>>> https://www.redhat.com/mailman/listinfo/patternfly
>>>>
>>>> _______________________________________________
>>>> PatternFly mailing list
>>>> PatternFly at redhat.com
>>>> https://www.redhat.com/mailman/listinfo/patternfly
>>>
>>>
>>> _______________________________________________
>>> PatternFly mailing list
>>> PatternFly at redhat.com
>>> https://www.redhat.com/mailman/listinfo/patternfly
>>
>> _______________________________________________
>> PatternFly mailing list
>> PatternFly at redhat.com
>> https://www.redhat.com/mailman/listinfo/patternfly
>
>
> _______________________________________________
> PatternFly mailing list
> PatternFly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly