1. Home
  2. Development
  3. RE: Debugging angular portlet in browser

RE: Debugging angular portlet in browser

moritz löser, modified 7 Years ago.
Debugging angular portlet in browser
Junior Member Posts: 25 Join Date: 8/17/17 Recent Posts

I created a npm-angular-portlet with current blade cli. While it is working fine, i am not able to debug the code in browser (tried chrome so far). It seems that the js and the source maps created by tsc are not mapped to the code running in the browser (bundled by Lifreay).
I fiddled around with some settings and options:

added to tsconfig:

{
  "compilerOptions": {
    "inlineSourceMap": true,
    "inlineSources": true
  }
}

added to babel command line options: --source-maps inline.

 

The only file i can debug is "main.ts" what doesn't help much.

What is the suggested way to debug npm-angular-portlet? 

thumbnail
Andrew Jardine, modified 7 Years ago.
RE: Debugging angular portlet in browser
Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

I'm wondering if perhaps you don't have the developer properties enabled and the js is being mashed together for you. Can you go to the page with you angular portlet and then add to the url ?js_fast_load=0 ... if that helps then check your portal-ext.properties for the following line

 

    include-and-override=portal-developer.properties

and if it is not there, add it and restart. By default in that properties file, the setting used is: js.fast.load=0

 

Let me know if that helps

moritz löser, modified 7 Years ago.
RE: Debugging angular portlet in browser
Junior Member Posts: 25 Join Date: 8/17/17 Recent Posts

My first line in portal-ext.properties is 

include-and-override=portal-developer.properties

 

To be absolutely sure i also added the property again and added the parameter to the url.  The Sources/Page Tab in Chrome dev tools look like that:

I also added the module folder to "Filesystem" tab. 

As you see i see parts of the js source (like AppComponent) but i don't see my own Types/Stuff i added. I added a "tile.service" and "tile". But seeing the js wouldn't help much. I need to debug the Typescript sources. I need the source maps get working but how?

 

As an example: Create the npm-angular-portlet and try to debug into the component where "Hello World!" is set.

 

moritz löser, modified 7 Years ago.
RE: Debugging angular portlet in browser
Junior Member Posts: 25 Join Date: 8/17/17 Recent Posts

need to push this, can't believe that nobody thought about debugging when developing this template for dxp

thumbnail
Andrew Jardine, modified 7 Years ago.
RE: Debugging angular portlet in browser
Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

Hey Moritz, 

 

Ah, it makes sense now that I think about it a little bit more that the property didn't change anything. I guess the js_fast_load piece only affects the JS files that are part of the portlet descriptors. The inclusion of modern frameworks is a relatively new feature still (it was just included as out of the box module types in the fall of 2017 I think) -- but i am sure there is a way.  

I think the Liferay front end guys are more active in the slack channel -- have you tried asking there yet?

moritz löser, modified 7 Years ago.
RE: Debugging angular portlet in browser
Junior Member Posts: 25 Join Date: 8/17/17 Recent Posts

Thanks for the hint about slack. I'll try it there...