[PatternFly] patternfly-ng and SystemJs
Stan Silvert
ssilvert at redhat.com
Tue May 22 20:23:14 UTC 2018
On 5/22/2018 1:31 PM, Dan Labrecque wrote:
> The problem with providing a bundled version of patternfly-ng is that
> it will include everything. For example, that would include
> ngx-datatable, angular-tree-component, etc. even if you're not using
> table or tree list.
I'm not asking for a bundled version. I don't want a packaged bundle.
I think if you just provide UMD files then systemjs can load it without
a transpiler.
You can easily try out my example and see the problem. Just go to
system-config.ts and comment out this:
transpiler: 'plugin-babel',
If you provide UMD files then patternfly-ng could be loaded the same way
as ngx-bootstrap.
> On 5/21/18 12:59 PM, Stan Silvert wrote:
>> Hi Dan. Thanks for looking at this.
>>
>> On 5/21/2018 9:53 AM, Dan Labrecque wrote:
>>> 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.
>> I'm not using a bundler. I'm using a loader. Namely, SystemJs. The
>> requirements of my application make it impossible to use a bundler.
>>
>> If I'm required to use a transpiler then I have to download the
>> transpiler and then do transpilation on the browser side. This is
>> likely to result in a performance problem.
>>
>> Therefore, we need a version of patternfly-ng that does not require a
>> transpiler at run time when using SystemJS.
>>
>>>
>>> Regarding your app.module, you shouldn't declare EmptyStateComponent
>>> yourself -- just import EmptyStateModule.
>> Fixed. Btw, I've merged a new version that also includes the
>> VerticalNavigationComponent.
>>>
>>> You also shouldn't need to add dependencies like
>>> angular-tree-component, ngx-datatable, C3, etc. That is, if you only
>>> import
>>> EmptyStateModule.
>> Fixed. But I'm glad that I have commented code in my
>> system-config.ts that knows how to load whatever is needed for other
>> components.
>>
>>>
>>> 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
>>>
>>>
>>>
>>> _______________________________________________
>>> 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/20180522/21591807/attachment.htm>
More information about the PatternFly
mailing list