[PatternFly] patternfly-ng and SystemJs

[Dan Labrecque]

The patternfly-ng library generates metadata but not factories. This 
allows applications to bundle the library as part of your build process 
using webpack, rollup, etc. Therefore, a transpiler is expected.

Regarding your app.module, you shouldn't declare EmptyStateComponent 
yourself -- just import EmptyStateModule.

You also shouldn't need to add dependencies like angular-tree-component, 
ngx-datatable, C3, etc. That is, if you only import
EmptyStateModule.

Dan

On 5/21/18 8:57 AM, Stan Silvert wrote:
> I have now found a solution for #2. Strangely, if you load 
> ngx-bootstrap.umd.min.js instead of ngx-bootstrap.umd.js it will work.
>
> I think the PatternFly-NG team needs to address #1.
>
> At the moment, I'm not sure how to address #3.
>
> 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.
>>
>> 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
>
>
> _______________________________________________
> PatternFly mailing list
> PatternFly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20180521/f0d5d728/attachment.htm>