Nativescript: Custom components within other custom components: occasionally not loaded "in time" and ignoring css

[dragGH102]

I have a page where a custom component is included within another custom component as follows

Page -> 1st level custom component (child of Page) -> 2nd level custom component (child of 1st level custom component)

With 1st-level only custom components I do not have the following issues, but with nested ones yes. Particularly:

• the css class applied to the 2nd level custom component is ignored
• on the 1st level component (pagePart), loaded event is sometimes triggered before the 2nd level custom component (switchComponent) is actually available and therefore I can't make any init code, resulting in various errors. It seems happening the 2nd time the containing the 1st level custom component is loaded. e.g. as in:

Page with components -> (another) Page -> Page with components

Note: I tried to apply loaded=loaded event in in pagePart.xml but it's not triggered (I guess because that applies only to )

Here is an overview of the code:

main-page.xml

<Page actionBarHidden="true"
 pagePart="includes/customComponents/pagePart"
 xmlns="http://www.nativescript.org/tns.xsd">
         <pagePart:pagePart id="first-part" />
</Page>

includes/customComponents/pagePart.xml

<StackLayout xmlns:switchComponent="includes/customComponents/switchComponent"
 xmlns="http://www.nativescript.org/tns.xsd">
      <switchComponent:switchComponent id="first-switch" />
</StackLayout>

includes/customComponents/pagePart.ts

exports.loaded = function() {
         // here goes init code which involves pagePart with id "first-part"
         // --> ISSUE: from time to time (usually when the view at **Page level** is loaded while another view was loading) 2nd level component (switchComponent) is not available resulting in various errors depending on the init code
}

includes/customComponents/switchComponent.xml

<StackLayout>
    <Image src="some_image" cssClass="myClass">
</Stacklayout>

includes/customComponents/switchComponent.css

.myClass {
 /* here go some styling for my custom component "switchComponent" */
}

[dragGH102]

UPDATE

Apparently initializing the custom Switch under a

setTimeout(function(){ // init code }, 0)

on loaded event of top-level container, seems to have solved the problem (except for the CSS issue)

[toddanglin]

I am experiencing the same CSS issue.

That is: CSS files for "2nd level" custom components are not being loaded (or at the very least, not being applied).

I have an app that has a structure like this:

Page.xml/ts/css
--> CustomComponent1.xml/ts/css
------> CustomChildComponent1.xml/ts/css
------> CustomChildComponent2.xml/ts/css
--> CustomComponent2.xml/ts/css
...

CSS is being properly loaded and applied to the root Page and elements in the 1st level custom components from their respective stylesheets. CSS is NOT being properly loaded and applied from the 2nd level custom components stylesheets.

I tried "forcing" the 2nd level CSS to load by using the page.addCssFile method on the root page. Styles still do not apply.

If I manually copy the styles from the 2nd level stylesheet and paste them in the root stylesheet (app.css) OR the 1st level component stylesheet, they DO get applied properly to the 2nd level components.

I would like to keep my styles separated for better maintenance, so any idea why these 2nd level stylesheets are not being loaded/applied?

@tjvantoll @jlooper Have you encountered this yet?

[toddanglin]

Doing some digging in the {N} source, I think this could be happening when loading custom components in Views that do not have a Page element.

The loadCustomComponent method of the ui/builder won't load a CSS file for a custom component unless parentPage exists. My _hunch_ is that a custom component loaded from another custom component does not pass this "parentPage" test WHEN the root element is not a page.

For example:
myPage.xml

<Page xmlns:customView="/views">
   ...
   <customView:myView />
</Page>

views/myView.xml

<GridLayout xmlns:widget="/views/widgets">
   ...
   <widget:myWidget />
</GridLayout>

views/widgets/myWidget.xml

<StackLayout>
   ...
</StackLayout>

CSS loads fine for myPage.css and myView.css, but does not load for myWidget.css. I'm assuming this is because parentPage is undefined by the time the ui/builder gets to myWidget.

I don't know enough about the loading system to fix this bug, but hopefully this "inspires" someone that knows more to take a closer look.

[tjvantoll]

@toddanglin I personally haven’t hit this before. I’ve only nested custom components with Angular, and with ng2 in the mix this all works differently.

I’m not super familiar with this area of the code, but at a glance I think you’re right—it looks like the parent page is not getting preserved, so the custom CSS gets lost.

[3rror404]

Has there been any progress with this CSS issue? I've just come across the same situation.

[alexrainman]

Same issue here

[hamorphis]

I will take a look...

[hamorphis]

I verified that this is indeed an issue. Will try to resolve it.

[toddanglin]

Thanks, Rossen! Looks like the fix will land in the next release.

For future Google searches: Using nested components with CSS files should start working as expected after 2.4.1.

[hamorphis]

@toddanglin I am not sure whether it will land in the next release. We have to merge a huge refactoring into master first and then I will be able to merge my 5-6 pull requests.

[sserdyuk]

@tsonevn This still isn't working right in 3.0.1 even though it's marked fixed and closed. No CSS files are applied from the 2nd level and further on. "Error: CSS file found but no page specified. Please specify page in the options!" is shown in the logs. Should I open a new bug report?

$ tns info
All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬─────────────┐
│ Component        │ Current version │ Latest version │ Information │
│ nativescript     │ 3.0.3           │ 3.0.3          │ Up to date  │
│ tns-core-modules │ 3.0.1           │ 3.0.1          │ Up to date  │
│ tns-android      │ 3.0.1           │ 3.0.1          │ Up to date  │
│ tns-ios          │ 3.0.1           │ 3.0.1          │ Up to date  │
└──────────────────┴─────────────────┴────────────────┴─────────────┘

[toddanglin]

Confirmed that this still isn't working as expected for 2nd level CSS with {N} 3.3.0.

@vchimev Any updates?

[na2axl]

I'm facing the same issue with {N} 4.0.0

[Clifte]

I'm facing the same issue with {N} 4.2.0

[tsonevn]

Hi @Clifte @na2axl,
If you still facing the problem with the latest NativeScript version, please open a new issue while providing a sample project, which can be used for debugging.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.