<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<div class="moz-cite-prefix">On 5/22/2018 1:31 PM, Dan Labrecque
wrote:<br>
</div>
<blockquote type="cite"
cite="mid:5f609a15-1779-55a0-ae18-cceb89908905@redhat.com">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
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.<br>
</blockquote>
I'm not asking for a bundled version. I don't want a packaged
bundle. <br>
<br>
I think if you just provide UMD files then systemjs can load it
without a transpiler.<br>
<br>
You can easily try out my example and see the problem. Just go to
system-config.ts and comment out this:<br>
<br>
transpiler: 'plugin-babel',<br>
<br>
If you provide UMD files then patternfly-ng could be loaded the same
way as ngx-bootstrap.<br>
<br>
<blockquote type="cite"
cite="mid:5f609a15-1779-55a0-ae18-cceb89908905@redhat.com">
<div class="moz-cite-prefix">On 5/21/18 12:59 PM, Stan Silvert
wrote:<br>
</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.<br>
<br>
On 5/21/2018 9:53 AM, Dan Labrecque wrote:<br>
</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.<br>
</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.<br>
<br>
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.<br>
<br>
Therefore, we need a version of patternfly-ng that does not
require a transpiler at run time when using SystemJS.<br>
<br>
<blockquote type="cite"
cite="mid:a7fc9994-3919-f156-cbd9-c8c6e6efd17f@redhat.com"> <br>
Regarding your app.module, you shouldn't declare <span
class="blob-code-inner"><span class="pl-smi">EmptyStateComponent
yourself -- just import </span></span><span
class="blob-code-inner"><span class="pl-smi">EmptyStateModule.<br>
</span></span></blockquote>
Fixed. Btw, I've merged a new version that also includes the
VerticalNavigationComponent.<br>
<blockquote type="cite"
cite="mid:a7fc9994-3919-f156-cbd9-c8c6e6efd17f@redhat.com"><span
class="blob-code-inner"><span class="pl-smi"> <br>
You also shouldn't need to add </span></span><span
class="blob-code-inner"><span class="pl-smi"><span
class="blob-code-inner"><span class="pl-s">dependencies
like angular-tree-component, </span></span></span></span><span
class="blob-code-inner"><span class="pl-smi"><span
class="blob-code-inner"><span class="pl-s"><span
class="blob-code-inner"><span class="pl-s">ngx-datatable,
</span></span>C3, etc. That is, if you only import </span></span></span></span><br>
<span class="blob-code-inner"><span class="pl-smi"><span
class="blob-code-inner"><span class="pl-s"><span
class="blob-code-inner"><span class="pl-smi"></span></span><span
class="blob-code-inner"><span class="pl-smi">EmptyStateModule.<br>
</span></span></span></span></span></span></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.<br>
<br>
<blockquote type="cite"
cite="mid:a7fc9994-3919-f156-cbd9-c8c6e6efd17f@redhat.com"><span
class="blob-code-inner"><span class="pl-smi"><span
class="blob-code-inner"><span class="pl-s"><span
class="blob-code-inner"><span class="pl-smi"> <br>
</span></span></span></span></span></span>Dan<br>
<br>
<div class="moz-cite-prefix">On 5/21/18 8:57 AM, Stan Silvert
wrote:<br>
</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. <br>
<br>
I think the PatternFly-NG team needs to address #1. <br>
<br>
At the moment, I'm not sure how to address #3. <br>
<br>
On 5/18/2018 7:54 AM, Stan Silvert wrote: <br>
<blockquote type="cite">On 5/16/2018 2:28 PM, Dan Labrecque
wrote: <br>
<blockquote type="cite">Do you have an example app repo so
we can see how it's failing? <br>
</blockquote>
I've put together a version of the Tour of Heroes demo
using SystemJS and PatternFly-NG. <br>
<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>
<br>
<br>
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. <br>
<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>
<br>
<br>
I got it to finally "work" with the following caveats: <br>
<br>
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? <br>
<br>
2) If you reference pf-ng's root index.js, you will get an
error: "Cannot read property 'Injectable of undefined'". <br>
<br>
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. <br>
<br>
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. <br>
<br>
<blockquote type="cite"> <br>
On 5/16/18 11:07 AM, Stan Silvert wrote: <br>
<blockquote type="cite">Hi Dan, <br>
<br>
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. <br>
<br>
Stan <br>
<br>
On 5/16/2018 10:37 AM, Dan Labrecque wrote: <br>
<blockquote type="cite">Hi Stan, <br>
<br>
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. <br>
<br>
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. <br>
<br>
FYI, Catherine Robson mentioned she's looking for a
date/time to set up with your team to talk about
PatternFlyNG in more detail. <br>
<br>
Dan <br>
<br>
On 5/15/18 3:39 PM, Stan Silvert wrote: <br>
<blockquote type="cite">Has anyone here successfully
used patternfly-ng with a SystemJs based
application? <br>
<br>
Is patternfly-ng only meant to be used with
WebPack? <br>
<br>
Stan <br>
<br>
_______________________________________________ <br>
PatternFly mailing list <br>
<a class="moz-txt-link-abbreviated"
href="mailto:PatternFly@redhat.com"
moz-do-not-send="true">PatternFly@redhat.com</a>
<br>
<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>
<br>
</blockquote>
<br>
_______________________________________________ <br>
PatternFly mailing list <br>
<a class="moz-txt-link-abbreviated"
href="mailto:PatternFly@redhat.com"
moz-do-not-send="true">PatternFly@redhat.com</a> <br>
<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>
<br>
</blockquote>
<br>
<br>
_______________________________________________ <br>
PatternFly mailing list <br>
<a class="moz-txt-link-abbreviated"
href="mailto:PatternFly@redhat.com"
moz-do-not-send="true">PatternFly@redhat.com</a> <br>
<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>
<br>
</blockquote>
<br>
_______________________________________________ <br>
PatternFly mailing list <br>
<a class="moz-txt-link-abbreviated"
href="mailto:PatternFly@redhat.com"
moz-do-not-send="true">PatternFly@redhat.com</a> <br>
<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>
<br>
</blockquote>
<br>
<br>
_______________________________________________ <br>
PatternFly mailing list <br>
<a class="moz-txt-link-abbreviated"
href="mailto:PatternFly@redhat.com"
moz-do-not-send="true">PatternFly@redhat.com</a> <br>
<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>
<br>
</blockquote>
<br>
<br>
_______________________________________________ <br>
PatternFly mailing list <br>
<a class="moz-txt-link-abbreviated"
href="mailto:PatternFly@redhat.com" moz-do-not-send="true">PatternFly@redhat.com</a>
<br>
<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>
<br>
</blockquote>
<br>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<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>
<p><br>
</p>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<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>
<br>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<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>
<p><br>
</p>
</body>
</html>