NativeScript Angular - Styles not applied in app.component

[MaxiSonntag]

The plugin works just fine in regular components in NativeScript with Angular, but not in app.component.

require( "nativescript-platform-css" ); is set in main.ts file, however styles in app.component.css are not applied to app.component.html layout. Same if required in app.module.ts. When using the same code in a placeholder component it works like a charm.

I'm using TabView as root navigation, therefore it would be nice if it was possible to set platform specific syles here as well.

[Ryan Pendergast]

I have what I think is a related problem. I use SASS for NativeScript and the following does not work in my _app-common.scss

.tablet :host {
    .btn,
    button {
        font-size: 24;
    }
}

The exact same css put into my mycomp.component.scss works fine.

Painful because styles I'd like applied throughout my app I have to copy/paste into every component's .scss (or use an import).

[Nathanael Anderson]

Check the CSS generated and make sure the :host is being applied. If Sass is stripping it out; that would be the reason.

[Ryan Pendergast]

Thanks for the idea, but when the scss compiles it leaves :host in the resulting css.

_app-common.scss:

.far {
  font-family: 'Font Awesome 5 Free', fa-regular-400;
}

.fab {
  font-family: 'Font Awesome 5 Brands', fa-brands-400;
}

.fas {
  font-family: 'Font Awesome 5 Free Solid', fa-solid-900;
}

.action-link {
  color: $btn-color;
}

.tablet :host {
    .btn,
    button {
        font-size: 24;
    }
}

my app.ios.scss looks like this:

// Import app variables
@import 'app-variables';

// Import the theme’s main ruleset - both index and platform specific.
@import '~nativescript-theme-core/scss/index';
@import '~nativescript-theme-core/scss/platforms/index.ios';

// Import common styles
@import 'app-common';

// Place any CSS rules you want to apply only on iOS here

It compiles to app.ios.css correctly:

...
.tablet :host .btn,
.tablet :host button {
  font-size: 24;
}

However this is not picked up in any of my components. If I put the .tablet :host {... into my component specific .scss it compiles down to the same .css and everything works fine. Also of note, the other rules in _app-common.scss are correctly working throughout all my components.

@NathanaelA any ideas? I haven't looked at your code yet to see how the device (ex: .tablet) injection is working.

My guess is this is an issue completely outside of your plugin, so don't waste your time on this if you don't know off the top of your head.

[Nathanael Anderson]

Hmm, that is weird. .tablet is injected at the top level page element. I have seen another bug that if you are using a tabview as the top element you have issues since the code looks for a page element, never finds it so it never sets it. I need to spend some time with the plugin and making sure all top level elements are supported (Page used to be the only valid top level element, in the latest versions of NS now there can be several types... So this is a known issue; just haven't had time to test and fix it... )

[Ryan Pendergast]

AFAIK Angular running on NativeScript does not have a <page> XML element.

main.ts loads ./app/app.module which loads and renders app.component.ts. In my app, app.component.html is:

<page-router-outlet></page-router-outlet>

And the 1st (root aka /) component that is rendered in this router-outlet is my home.component.html:

<ActionBar title="Home" class="action-bar" visability="collapsed"></ActionBar>

<Button class="btn btn-primary btn-rounded-sm" [nsRouterLink]="['/showtime/create']" text="Create"></Button>
...

I know the tablet is being injected correctly, because if I put the following into home.component.scss it works as expected:

.tablet :host {
    .btn,
    button {
        font-size: 24;
    }
}

Totally understand not testing and fixing this one. It is easy to work around, and like I said its prob not problem with your plugin. Just leaving details here incase someone else runs into it.

[Nathanael Anderson]

Actually just because you are not be manually adding a root Page element; the ActionBar is a child of Page; NativeScript Angular it is automatically adding a Page element for you, I think the Page router does it automatically if you don't create one. ;-)

There is some auto-add code in several components in NativeScript -- if you don't actually specify a proper parent element it will create it in between the two pieces that need it.

[Tom Faltesek]

For anyone else who stumbles upon this issue using Angular + NS, I've found that when you're adding a rule to a global SASS file like _app-common.scss you should NOT use the :host selector. The :host selector is only needed in a specific component's SASS file.

_app-common.scss:

.tablet {
    .btn, button {
        font-size: 24;
    }
}

home.component.scss:

.tablet :host {
    .btn, button {
        font-size: 24;
    }
}

I hope this helps the next person. Good luck.