<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
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>
<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>
<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>
<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">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">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">PatternFly@redhat.com</a>
<br>
<a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly">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">PatternFly@redhat.com</a>
<br>
<a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly">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">PatternFly@redhat.com</a>
<br>
<a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly">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">PatternFly@redhat.com</a>
<br>
<a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly">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">PatternFly@redhat.com</a>
<br>
<a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly">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">PatternFly@redhat.com</a>
<br>
<a class="moz-txt-link-freetext" href="https://www.redhat.com/mailman/listinfo/patternfly">https://www.redhat.com/mailman/listinfo/patternfly</a>
<br>
</blockquote>
<br>
</body>
</html>