<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body text="#000000" bgcolor="#FFFFFF"> 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. <div class="moz-cite-prefix">On 5/21/18 12:59 PM, Stan Silvert wrote: </div> <blockquote type="cite" cite="mid:d5576231-42ce-ad96-deed-f9b5b733412d@redhat.com"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <div class="moz-cite-prefix">Hi Dan. Thanks for looking at this. On 5/21/2018 9:53 AM, Dan Labrecque wrote: </div> <blockquote type="cite" cite="mid:a7fc9994-3919-f156-cbd9-c8c6e6efd17f@redhat.com"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 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. </blockquote> 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. <blockquote type="cite" cite="mid:a7fc9994-3919-f156-cbd9-c8c6e6efd17f@redhat.com"> Regarding your app.module, you shouldn't declare EmptyStateComponent yourself -- just import EmptyStateModule. </blockquote> Fixed. Btw, I've merged a new version that also includes the VerticalNavigationComponent. <blockquote type="cite" cite="mid:a7fc9994-3919-f156-cbd9-c8c6e6efd17f@redhat.com"> You also shouldn't need to add dependencies like angular-tree-component, ngx-datatable, C3, etc. That is, if you only import EmptyStateModule. </blockquote> 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. <blockquote type="cite" cite="mid:a7fc9994-3919-f156-cbd9-c8c6e6efd17f@redhat.com"> Dan <div class="moz-cite-prefix">On 5/21/18 8:57 AM, Stan Silvert wrote: </div> <blockquote type="cite" cite="mid:96a7c2a5-e038-1177-d168-5f017e885123@redhat.com">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: <blockquote type="cite">On 5/16/2018 2:28 PM, Dan Labrecque wrote: <blockquote type="cite">Do you have an example app repo so we can see how it's failing? </blockquote> I've put together a version of the Tour of Heroes demo using SystemJS and PatternFly-NG. <a class="moz-txt-link-freetext" href="https://github.com/ssilvert/angular-tour-of-heroes/tree/systemjs-patternfly-ng" moz-do-not-send="true">https://github.com/ssilvert/angular-tour-of-heroes/tree/systemjs-patternfly-ng</a> 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. <a class="moz-txt-link-freetext" href="https://github.com/ssilvert/angular-tour-of-heroes/commit/20ae37b47c7b8052da50a3a26810d6eb024d3be4" moz-do-not-send="true">https://github.com/ssilvert/angular-tour-of-heroes/commit/20ae37b47c7b8052da50a3a26810d6eb024d3be4</a> 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. <blockquote type="cite"> On 5/16/18 11:07 AM, Stan Silvert wrote: <blockquote type="cite">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: <blockquote type="cite">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: <blockquote type="cite">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 <a class="moz-txt-link-abbreviated" href="mailto:PatternFly@redhat.com" moz-do-not-send="true">PatternFly@redhat.com</a> <a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly" moz-do-not-send="true">https://www.redhat.com/mailman/listinfo/patternfly</a> </blockquote> _______________________________________________ PatternFly mailing list <a class="moz-txt-link-abbreviated" href="mailto:PatternFly@redhat.com" moz-do-not-send="true">PatternFly@redhat.com</a> <a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly" moz-do-not-send="true">https://www.redhat.com/mailman/listinfo/patternfly</a> </blockquote> _______________________________________________ PatternFly mailing list <a class="moz-txt-link-abbreviated" href="mailto:PatternFly@redhat.com" moz-do-not-send="true">PatternFly@redhat.com</a> <a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly" moz-do-not-send="true">https://www.redhat.com/mailman/listinfo/patternfly</a> </blockquote> _______________________________________________ PatternFly mailing list <a class="moz-txt-link-abbreviated" href="mailto:PatternFly@redhat.com" moz-do-not-send="true">PatternFly@redhat.com</a> <a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly" moz-do-not-send="true">https://www.redhat.com/mailman/listinfo/patternfly</a> </blockquote> _______________________________________________ PatternFly mailing list <a class="moz-txt-link-abbreviated" href="mailto:PatternFly@redhat.com" moz-do-not-send="true">PatternFly@redhat.com</a> <a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly" moz-do-not-send="true">https://www.redhat.com/mailman/listinfo/patternfly</a> </blockquote> _______________________________________________ PatternFly mailing list <a class="moz-txt-link-abbreviated" href="mailto:PatternFly@redhat.com" moz-do-not-send="true">PatternFly@redhat.com</a> <a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly" moz-do-not-send="true">https://www.redhat.com/mailman/listinfo/patternfly</a> </blockquote> <fieldset class="mimeAttachmentHeader"></fieldset> <pre wrap="">_______________________________________________ PatternFly mailing list <a class="moz-txt-link-abbreviated" href="mailto:PatternFly@redhat.com" moz-do-not-send="true">PatternFly@redhat.com</a> <a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly" moz-do-not-send="true">https://www.redhat.com/mailman/listinfo/patternfly</a> </pre> </blockquote> <fieldset class="mimeAttachmentHeader"></fieldset> <pre wrap="">_______________________________________________ PatternFly mailing list <a class="moz-txt-link-abbreviated" href="mailto:PatternFly@redhat.com">PatternFly@redhat.com</a> <a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly">https://www.redhat.com/mailman/listinfo/patternfly</a> </pre> </blockquote> </body> </html>