Nativescript 8 and Angular 12 not running when using @Component{styleUrls}.

[boutier]

Environment
% ns info
✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.0.2 version and is up to date.
✔ Component @nativescript/core has 8.0.8 version and is up to date.
✔ Component @nativescript/ios has 8.0.0 version and is up to date.

Angular / Nativescript Angular: 12.0.5

Describe the bug
When having styleUrls: ['./side-drawer.scss'], on AppComponent, Angular does not start, i.e. it hangs just before it should prompt the following log (but it doesn't).

CONSOLE LOG: Angular is running in development mode. Call enableProdMode() to enable production mode.

To Reproduce

$ ns --version
8.0.2
$ ns create test --ng
$ cd test
$ git am - << EOF
From 7743326ef312e0be2446d9f335b1bcb12cdd2962 Mon Sep 17 00:00:00 2001
From: Matthieu Boutier <matthieu.boutier@wanadoo.fr>
Date: Wed, 21 Jul 2021 09:37:59 +0200
Subject: [PATCH] pok

---
 package.json             | 1 +
 src/app/app.component.ts | 3 ++-
 src/app/side-drawer.scss | 4 ++++
 yarn.lock                | 5 +++++
 4 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 src/app/side-drawer.scss

diff --git a/package.json b/package.json
index 2d30384..ba48751 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@angular/compiler-cli": "~12.0.0",
+    "@nativescript/ios": "8.0.0",
     "@nativescript/types": "~8.0.0",
     "@nativescript/webpack": "beta",
     "@ngtools/webpack": "~12.0.0",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5920b7a..19c9a4e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,8 @@
-import { Component } from '@angular/core'
+import { Component } from '@angular/core';

 @Component({
   selector: 'ns-app',
   templateUrl: './app.component.html',
+  styleUrls: ['./side-drawer.scss'],
 })
 export class AppComponent {}
diff --git a/src/app/side-drawer.scss b/src/app/side-drawer.scss
new file mode 100644
index 0000000..4dc2dab
--- /dev/null
+++ b/src/app/side-drawer.scss
@@ -0,0 +1,4 @@
+.compact-row Label {
+  padding: 5, 0, 5, 0;
+  margin: 0, 0, 0, 0;
+}
diff --git a/yarn.lock b/yarn.lock
index 66021e8..1a60c36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -308,6 +308,11 @@
     glob "^7.1.0"
     mkdirp "^1.0.4"

+"@nativescript/ios@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@nativescript/ios/-/ios-8.0.0.tgz#7942ded15d0ea113607e23393cf67fd9458ec9a5"
+  integrity sha512-gmAl+Jy022tH8XaOURzEd3WuhA8kkppK0MjNqDu6eidc1llILQ+/s6JyTK6Q2l63F5rXFlGtm/Wxkot+SIzV9g==
+
 "@nativescript/theme@~3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@nativescript/theme/-/theme-3.0.1.tgz#fabc676638c22a63932e300ba23acc51f228e9ad"
--
2.30.1 (Apple Git-130)
EOF
$ ns run ios

Expected behavior
App should start!

Related issues
Might be related to #6
Certainly duplicate of NativeScript/nativescript-angular#2352 (it seems people keep posting issues in the wrong place — maybe could you put a message somewhere to redirect them; in the issue template?)

[edusperoni]

@boutier did you try the workaround on that issue?

#6 (comment)

[boutier]

[In short: Yes, it doesn't change anything.]

Well, before your answer, I obviously tried it but with an extra line (if it was stupid, please teach me why!):

            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app/side-drawer.scss'))

So, just to be sure, I copy paste the exact code you provided: at first start, "tada! It worked". But only at first start. Subsequent calls to ns run ios or ns clean && ns run ios still doesn't start the application. So I think it was some sort of "chance"…

Did you tried and succeed to reproduce with the steps above?

[edusperoni]

I haven't tried the demo app yet, but I do have a couple of apps with custom styleUrls on AppComponent and they're all working fine on latest.

You can try 2 things:

1. naming it side-drawer.component.scss (that workaround is there so you don't need to do this, but let's try anyway)
2. running with --no-hmr

[boutier]

Ah ah! Using --no-hmr together with the patched Webpack as in #6 (comment) make the app works every time.

  webpack.chainWebpack((config, nsEnv) => {
    …
    if (nsEnv.hmr && nsEnv.ios) {
      console.warn('Disabling HMR for ios compilation (bug in @nativescript/webpack)');
      nsEnv.hmr = false;
    }

Both seems required. Is there a simple explanation to what's going on?

Many thanks!

[edusperoni]

Seems like a non-clean environment. Try running ns clean, hmr is working with custom styleurls

[boutier]

Well… I feel quite uncomfortable. As I wrote in the comment above (#19 (comment)) : « Subsequent calls to ns run ios or ns clean && ns run ios still doesn't start the application ».

That said, everything is now working fine everywhere, so I'm confused. Maybe because I may have removed manually the app from the iPhone?

Could you also explain me why adding app.scss, app.android.scss and app.ios.scss solves the issue since none of these files exist (a fresh ns create test --ng project has a app.css file instead)?

[edusperoni]

@boutier the workaround is no longer required with the latest webpack. Answering your question, the app.${platform}.ts is added there just in case they are there (first takes the platform specific, then the base one).