NativeScript Angular can't find css files

Question

I'm just getting started with NativeScript, and am working through the tutorial: https://docs.nativescript.org/angular/tutorial/ng-chapter-3

NativeScript can't find css files in the same directory as my component, even when specifying the moduleId.

// login.component.ts

@Component({
  moduleId: module.id,
  styleUrls: [
    './login-common.css',
    './login.android.css',
  ],
  templateUrl: './login.html',
})
export class LoginComponent implements OnDestroy { ... }

My directory structure is:

/app
  /pages
    /login
      login.android.css
      login-common.css
      login.component.ts
      login.html

I've wiped the user data from the emulator, stopped/restarted the app, quadruple-checked the files names, but I still get:

Refreshing application... JS: ns-renderer: ERROR BOOTSTRAPPING ANGULAR JS: ns-renderer: File /data/data/org.nativescript.Groceries/files/app/pages/login/.login.android.css does not exist. Resolved from: /data/data/org.nativescript.Groceries/files/app/pages/login/.login.android.css.

I have also tried not specifying the moduleId value and used paths relative to /app and I get the same errors. No other components use these files. What am I doing wrong?

Update:

I've made another component and was able to successfully import a component-relative stylesheet. Is there some sort of build-cache that I need to clear?

Sean Perkins Sean Perkins · Accepted Answer · 2017-12-28T18:35:39

When the tns runtime actually builds your app, it will re-write platform related files.

What this means is that anything .android will just become the root .ts/.css/.html file.

login.android.css becomes login.css

The same goes for iOS related files. This allows you just import the generic file and it will intelligently filter out the correct files for your runtime.

In your example, just import login.css instead of the two style-sheets listed. In your login-android.css file, import the login-common.css file.

EDIT:

In regard to moduleId, I would always recommend applying that your components. It makes the paths relative to the current folder. So if you add it, it will make the './ imports relative to your login component's folder.

NativeScript Angular can't find css files

1 Answers