Hello b_poplin,
Some comments regarding your comments:
> prevent Lithium Apps from bootstrapping in liaAddScript angular = true
Please note that when using the <@liaAddScript> directive in Freemarker, if you use the angular="true" attribute, the only impact this flag has is to ensure that the code inside of the specific directive is added AFTER we add our angular library and module code and BEFORE we manually bootstrap the angular library on the page. Setting this attribute will not "prevent Lithium Apps from bootstrapping" as you commented.
> Problem 1: The annotated example step 7 "Load custom Angular JS libs from plugin and core Angular libs"
- How do I get my scripts "vendor.bundle.js" and "app.bundle.js" added? Currently, in custom component I have tried appending the scripts to the page Header inside the liaAddScript angular = true
In order to have the "vendor.bundle.js" and "app.bundle.js" scripts added to the page in the location mentioned in Step 7, you would need to add them to the plugin in the following location:
/res/js/angularjs/custom
You can add your two files here using the lithium-sdk or via a Support ticket. This is documented in the linked article here:
> Alternatively, if you’re using the Community Plugin SDK, you can add this a custom JavaScript in res/js/angularjs/custom.
> Problem 2: coreModuleDeps.push('myApp'); Even with adding the "app.bundle.js" script to the header, "myApp" is undefined.
I am not sure I understand, in this case "myApp" is a string so I am not sure what you mean by it is undefined. Do you mean that when our app calls to bootstrap it is not able to find the "myApp" dependency? Without seeing the exception or way that you configured things, my guess would be that the "myApp" you registered is done against a second/different copy of the Angular library. This is likely the case if you try and load your Angular application in the <head> as it would be done prior to the Angular library that we load and use. This would mean all your modules are registered with the version of Angular you included in the head, and the one we include would not be able to find those modules. Can you please provide the exact exception you are seeing.
> Is it possible to push into coreModuleDeps as dependency when the app is defined in an external script?
Yes, it is possible to push a dependency into coreModuleDeps if it is defined in an external script. In fact, in theory you can push them into "coreModuleDeps" before the external script has loaded. The external script that contains the app dependency only needs to have loaded prior to the call to bootstrap the angular library. In your case you will just want to ensure that you added the scripts in the plugin under "/res/js/anguarjs/custom" to ensure they are loaded in the correct location and using OUR copy of AngularJs.
> similarly, is it possible to bootstrap our app using "app.bundle.js" with "li-community" defined as dependency?
Yes, it is possible per the doc. Is there are specific question or problem that you ran into when trying to do this?
> I want to make sure I have implemented in the most efficient way possible.
> In order to get working, I had to: ...
Please note that the approach you took in order to get your AngularJs application working with ours is not something we officially support, may not work with all our AngularJs based components, and is not something we would be able to provide support for if issues are discovered. The main issue with the approach you took is that you are loading our AngularJs based components on Angular version 1.5.8 and our components expect a minimum version of 1.7.3. Some, or even all, of our components may continue to work, but we make no guarantees about compatibility with older versions of AngularJs. Furthermore, we strongly encourage you to upgrade and use later versions of AngularJs which have some security fixes. I would also be concerned about overriding "window.angular" and some of the other steps taken to get things working.
To ensure the best compatibility with our application for your specific use case I would recommend Option 2 (or Option 3) as described in the documentation. To get Option 2 working you would need to:
- Not include your copy of "vendor.bundle.js" in our page so that your copy of the AngularJs library is not included and ours is used. If there are other dependencies included in "vendor.bundle.js" that we do not include then you may need to include these separately.
- Ensure your AngularJs code can work with the version we use: 1.7.3. Most changes done between 1.5.8 and 1.7.3 do not require any changes to the code signature so this might just work.
- Add "app.bundle.js" into your plugin under "/res/js/angularjs/custom".
- Use the <@liaAddScript> directive to register your app:
<@liaAddScript angular="true">
var coreModuleDeps = LITHIUM.AngularSupport.getOptions().coreModuleDeps || [];
coreModuleDeps.push('myApp');
LITHIUM.AngularSupport.setOptions({ coreModuleDeps: coreModuleDeps });
</@liaAddScript>
