Re: [osgi-dev] Angular New Enroute

[Matthews, Kevin via osgi-dev]

Hi David, I am going to try what Joao suggested with ng maven plugin. I think 
that direction should work.

From: David Leangen [mailto:o...@leangen.net]
Sent: Friday, August 03, 2018 7:42 PM
To: Matthews, Kevin; OSGi Developer Mail List
Subject: Re: [osgi-dev] Angular New Enroute


Hi,

Angular 2+ works very differently from AngularJS. In enRoute (or at least in 
v2, I am not yet familiar with the current enRoute), it used AngularJS. You 
used to be able to just include the JS file, and that was it. Angular 2+ 
requires you to build/compile your application first, so you cannot just ship 
the source code (unless you include some kind of interpreter, but I’ve never 
attempted that).

What we do is build the files at some point during the build process, and ship 
the entire dist directory.

It works for us as a deployment mechanism. Never tried it as a DS component, 
though. Because of the way an Angular 2+ app works, I don’t immediately see how 
you could do that. If you figure it out, I’d be interested in hearing your 
solution.


Cheers,
=David



On Aug 4, 2018, at 4:55, Matthews, Kevin via osgi-dev 
mailto:osgi-dev@mail.osgi.org>> wrote:

Hello,

Has anyone integrated the new angular 2+/6 into the enroute project as a 
separate UI module/DS component? I have added the contents of my angular src 
folder into the static folder  of the enroute sample but doesn’t seem to render 
the static pages. Should I add the entire angular folder to static folder or 
just the src folder of my angular generate project?

Kevin Matthews
Senior Application Analyst
First Data, 3975 NW 120 Ave, Coral Springs, FL 33065
Office: 954-845-4222 | Mobile: 561-465-6694

kevin.matth...@firstdata.com<mailto:kevin.matth...@firstdata.com> | 
firstdata.com<http://firstdata.com/>

The information in this message may be proprietary and/or confidential, and 
protected from disclosure. If the reader of this message is not the intended 
recipient, or an employee or agent responsible for delivering this message to 
the intended recipient, you are hereby notified that any dissemination, 
distribution or copying of this communication is strictly prohibited. If you 
have received this communication in error, please notify First Data immediately 
by replying to this message and deleting it from your computer.
___
OSGi Developer Mail List
osgi-dev@mail.osgi.org<mailto:osgi-dev@mail.osgi.org>
https://mail.osgi.org/mailman/listinfo/osgi-dev<https://urldefense.proofpoint.com/v2/url?u=https-3A__mail.osgi.org_mailman_listinfo_osgi-2Ddev=DwMFaQ=ewHkv9vLloTwhsKn5d4bTdoqsmBfyfooQX5O7EQLv5TtBZ1CwcvjU063xndfqI8U=wKHHp1xupEN1UoR2CPDlg9US2Vs3om5ld5YqSsWMQX8=KVVZRzTqH1sTQppccxSw4v32MPJcykMMpxujDPlyMIY=SnXgzLLYzN4lk-wcF8A6vrfTazk55p6675Lkzdvic1I=>

___
OSGi Developer Mail List
osgi-dev@mail.osgi.org
https://mail.osgi.org/mailman/listinfo/osgi-dev

Re: [osgi-dev] Angular New Enroute

[Matthews, Kevin via osgi-dev]

Thanks Joao, this helps the maven plugin. I will use REST as endpoint for 
communication layer between angular and server side as shown in the sample 
enroute project.

From: João Assunção [mailto:joao.assun...@exploitsys.com]
Sent: Monday, August 06, 2018 12:12 PM
To: OSGi Developer Mail List
Cc: Matthews, Kevin; David Leangen
Subject: Re: [osgi-dev] Angular New Enroute

As David mentioned you will need to include the "ng build" step in your build 
process. I include a portion of the pom where exec-maven-plugin is used to 
invoke "npm install" and "ng build".
To expose the angular app we are using HTTP whiteboard. The bundle activator 
exports a  ResourceMapping service configured with the path of the ngapp 
directory. We are doing it in the bundle activator but it could be done in 
@Activate of a DS component. In our case, the communication between the angular 
side and the server side (a DS component) is done using web sockets, but I 
think it would be easy to make a DS component expose a REST service..


DefaultResourceMapping rootResourceMapping = new DefaultResourceMapping();
rootResourceMapping.setAlias("/myApp");
rootResourceMapping.setPath("/ng");
rootResourceMappingRegistration = 
bundleContext.registerService(ResourceMapping.class, rootResourceMapping, null);

// Redirect 404 errors to the default page
DefaultErrorPageMapping errorpageMapping = new DefaultErrorPageMapping();
errorpageMapping.setError("404");
errorpageMapping.setLocation("/myApp/index.html");
errorpage404Registration = 
bundleContext.registerService(ErrorPageMapping.class, errorpageMapping, null);

// Registers a filter to rewrite the URL "myApp/" to
// index.html
RedirectMatchFilter filter = new RedirectMatchFilter("/myApp/", 
"/myApp/index.html");
props = new Hashtable<>();
props.put(ExtenderConstants.PROPERTY_URL_PATTERNS, "/myApp/*");
filtrerRegistration = bundleContext.registerService(Filter.class, filter, 
props);





org.codehaus.mojo
exec-maven-plugin
1.5.0


   exec-npm-install
   generate-sources
   
${maven.exec.skip}
${project.basedir}/src/main/ngapp
${npm.executable}

   install

   
   
exec
   


   exec-npm-ng-build
   generate-sources
   
${maven.exec.skip}
${project.basedir}/src/main/ngapp
${ng.executable}

   build
   --target=${build.target}
   --base-href=/myApp/
   --no-progress
   --output-hashing=all

   
   
exec
   






João Assunção

Email: joao.assun...@exploitsys.com<mailto:joao.assun...@exploitsys.com>
Mobile: +351 916968984
Phone: +351 211933149
Web: 
www.exploitsys.com<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.exploitsys.com=DwMFaQ=ewHkv9vLloTwhsKn5d4bTdoqsmBfyfooQX5O7EQLv5TtBZ1CwcvjU063xndfqI8U=wKHHp1xupEN1UoR2CPDlg9US2Vs3om5ld5YqSsWMQX8=fQet__nyoR_6Y5VXE7qnrBRIx637Y7xQ11pF8wBTskQ=Sg5iZYx-jtTTX9uaRJ8BBjbVhN9VqxrnOPQmOmTIwZ0=>



On Fri, Aug 3, 2018 at 11:42 PM, David Leangen via osgi-dev 
mailto:osgi-dev@mail.osgi.org>> wrote:

Hi,

Angular 2+ works very differently from AngularJS. In enRoute (or at least in 
v2, I am not yet familiar with the current enRoute), it used AngularJS. You 
used to be able to just include the JS file, and that was it. Angular 2+ 
requires you to build/compile your application first, so you cannot just ship 
the source code (unless you include some kind of interpreter, but I’ve never 
attempted that).

What we do is build the files at some point during the build process, and ship 
the entire dist directory.

It works for us as a deployment mechanism. Never tried it as a DS component, 
though. Because of the way an Angular 2+ app works, I don’t immediately see how 
you could do that. If you figure it out, I’d be interested in hearing your 
solution.


Cheers,
=David



On Aug 4, 2018, at 4:55, Matthews, Kevin via osgi-dev 
mailto:osgi-dev@mail.osgi.org>> wrote:

Hello,

Has anyone integrated the new angular 2+/6 into the enroute project as a 
separate UI module/DS component? I have added the contents of my angular src 
folder into the static folder  of the enroute sample but doesn’t seem to render 
the static pages. Should I add the entire angular folder to static folder or 
just the src folder of my angular generate project?

Kevin Matthews
Senior Application Analyst
First Data, 3975 NW 120 Ave, Coral Springs, FL 33065
Office: 954-845-4222 | Mobile: 561-465-6694

kevin.matth...@firstdata.com<mailto:kevin.matth...@firstdata.com> | 
firstdata.com<http://firstdata.com/>

The information in this message may be proprietary and/or confidential, and 
protected from disclosure. If the reader of this message is not the intended 
recipient, or an employee or agent responsible for delivering this message to 
the intended recipient, you are hereby notified that any dissemination, 
distribution or copying of this communication is strictly prohibited.

Re: [osgi-dev] Angular New Enroute

[João Assunção via osgi-dev]

As David mentioned you will need to include the "ng build" step in your
build process. I include a portion of the pom where exec-maven-plugin is
used to invoke "npm install" and "ng build".
To expose the angular app we are using HTTP whiteboard. The bundle
activator exports a  ResourceMapping service configured with the path of
the ngapp directory. We are doing it in the bundle activator but it could
be done in @Activate of a DS component. In our case, the communication
between the angular side and the server side (a DS component) is done using
web sockets, but I think it would be easy to make a DS component expose a
REST service..


DefaultResourceMapping rootResourceMapping = new DefaultResourceMapping();
rootResourceMapping.setAlias("/myApp");
rootResourceMapping.setPath("/ng");
rootResourceMappingRegistration =
bundleContext.registerService(ResourceMapping.class, rootResourceMapping,
null);

// Redirect 404 errors to the default page
DefaultErrorPageMapping errorpageMapping = new DefaultErrorPageMapping();
errorpageMapping.setError("404");
errorpageMapping.setLocation("/myApp/index.html");
errorpage404Registration =
bundleContext.registerService(ErrorPageMapping.class, errorpageMapping,
null);

// Registers a filter to rewrite the URL "myApp/" to
// index.html
RedirectMatchFilter filter = new RedirectMatchFilter("/myApp/",
"/myApp/index.html");
props = new Hashtable<>();
props.put(ExtenderConstants.PROPERTY_URL_PATTERNS, "/myApp/*");
filtrerRegistration = bundleContext.registerService(Filter.class, filter,
props);





org.codehaus.mojo
exec-maven-plugin
1.5.0


   exec-npm-install
   generate-sources
   
${maven.exec.skip}
${project.basedir}/src/main/ngapp
${npm.executable}

   install

   
   
exec
   


   exec-npm-ng-build
   generate-sources
   
${maven.exec.skip}
${project.basedir}/src/main/ngapp
${ng.executable}

   build
   --target=${build.target}
   --base-href=/myApp/
   --no-progress
   --output-hashing=all

   
   
exec
   






João Assunção

Email: joao.assun...@exploitsys.com
Mobile: +351 916968984
Phone: +351 211933149
Web: www.exploitsys.com



On Fri, Aug 3, 2018 at 11:42 PM, David Leangen via osgi-dev <
osgi-dev@mail.osgi.org> wrote:

>
> Hi,
>
> Angular 2+ works very differently from AngularJS. In enRoute (or at least
> in v2, I am not yet familiar with the current enRoute), it used AngularJS.
> You used to be able to just include the JS file, and that was it. Angular
> 2+ requires you to build/compile your application first, so you cannot just
> ship the source code (unless you include some kind of interpreter, but I’ve
> never attempted that).
>
> What we do is build the files at some point during the build process, and
> ship the entire dist directory.
>
> It works for us as a deployment mechanism. Never tried it as a DS
> component, though. Because of the way an Angular 2+ app works, I don’t
> immediately see how you could do that. If you figure it out, I’d be
> interested in hearing your solution.
>
>
> Cheers,
> =David
>
>
> On Aug 4, 2018, at 4:55, Matthews, Kevin via osgi-dev <
> osgi-dev@mail.osgi.org> wrote:
>
> Hello,
>
> Has anyone integrated the new angular 2+/6 into the enroute project as a
> separate UI module/DS component? I have added the contents of my angular
> src folder into the static folder  of the enroute sample but doesn’t seem
> to render the static pages. Should I add the entire angular folder to
> static folder or just the src folder of my angular generate project?
>
> *Kevin Matthews *
> Senior Application Analyst
> First Data, 3975 NW 120 Ave, Coral Springs, FL 33065
> Office: 954-845-4222 *|* Mobile: 561-465-6694
>
> kevin.matth...@firstdata.com *|* firstdata.com
>
> The information in this message may be proprietary and/or confidential,
> and protected from disclosure. If the reader of this message is not the
> intended recipient, or an employee or agent responsible for delivering this
> message to the intended recipient, you are hereby notified that any
> dissemination, distribution or copying of this communication is strictly
> prohibited. If you have received this communication in error, please notify
> First Data immediately by replying to this message and deleting it from
> your computer.
> ___
> OSGi Developer Mail List
> osgi-dev@mail.osgi.org
> https://mail.osgi.org/mailman/listinfo/osgi-dev
>
>
>
> ___
> OSGi Developer Mail List
> osgi-dev@mail.osgi.org
> https://mail.osgi.org/mailman/listinfo/osgi-dev
>
___
OSGi Developer Mail List
osgi-dev@mail.osgi.org
https://mail.osgi.org/mailman/listinfo/osgi-dev

Re: [osgi-dev] Angular New Enroute

[David Leangen via osgi-dev]

Hi,

Angular 2+ works very differently from AngularJS. In enRoute (or at least in 
v2, I am not yet familiar with the current enRoute), it used AngularJS. You 
used to be able to just include the JS file, and that was it. Angular 2+ 
requires you to build/compile your application first, so you cannot just ship 
the source code (unless you include some kind of interpreter, but I’ve never 
attempted that).

What we do is build the files at some point during the build process, and ship 
the entire dist directory.

It works for us as a deployment mechanism. Never tried it as a DS component, 
though. Because of the way an Angular 2+ app works, I don’t immediately see how 
you could do that. If you figure it out, I’d be interested in hearing your 
solution. 


Cheers,
=David


> On Aug 4, 2018, at 4:55, Matthews, Kevin via osgi-dev 
>  wrote:
> 
> Hello,
>  
> Has anyone integrated the new angular 2+/6 into the enroute project as a 
> separate UI module/DS component? I have added the contents of my angular src 
> folder into the static folder  of the enroute sample but doesn’t seem to 
> render the static pages. Should I add the entire angular folder to static 
> folder or just the src folder of my angular generate project?
>  
> Kevin Matthews 
> Senior Application Analyst
> First Data, 3975 NW 120 Ave, Coral Springs, FL 33065
> Office: 954-845-4222 | Mobile: 561-465-6694
> 
> kevin.matth...@firstdata.com  | 
> firstdata.com  
>  
> The information in this message may be proprietary and/or confidential, and 
> protected from disclosure. If the reader of this message is not the intended 
> recipient, or an employee or agent responsible for delivering this message to 
> the intended recipient, you are hereby notified that any dissemination, 
> distribution or copying of this communication is strictly prohibited. If you 
> have received this communication in error, please notify First Data 
> immediately by replying to this message and deleting it from your computer.
> ___
> OSGi Developer Mail List
> osgi-dev@mail.osgi.org 
> https://mail.osgi.org/mailman/listinfo/osgi-dev 
> 
___
OSGi Developer Mail List
osgi-dev@mail.osgi.org
https://mail.osgi.org/mailman/listinfo/osgi-dev