Cannot include styleUrls

[jet-lee-m]

Hi,

I use nativescript-dev-webpack in a nativescript project with angular 2 support. Now I have the problem that I cannot build my simple project with "npm run start-ios-bundle" when I include styleUrls in a component.

@Component({ selector: "page-login", templateUrl: "login.html", styleUrls: ["login.css"] })

I get following error:

ERROR in ./main.aot.ts Module not found: Error: Can't resolve './app.module.ngfactory' in '/Users/marouane/Desktop/test-ios/app' @ ./main.aot.ts 2:0-60

So when I remove the styleUrls entry in my component all works fine. I think webpack cannot find my stylesheets (*.css). I tried a lot of variations, but I cannot compile.

Can you help me please... thx

[hdeshev]

Oh, this is bad. :( I reproduced it, and it starts complaining with that ngfactory error after I add the styleUrls option as you described. I suspect this is either caused by a bug in the @ngtools/webpack loader, or it is just a feature unsupported by the angular tools, but we can't see the real error message.

I found an ugly way to make it work though. You could add an npm script for the Angular ngc tool in your package.json like this:

"ngc": "ngc"

and invoke it on the command line with:

$ npm run ngc -- -p tsconfig.aot.json

That will generate the factories, and fail with an error since our loader that fixes import paths hasn't been applied. Anyway, just having the *.ngfactory.ts files lying around in your directory will make the next bundling invocation succeed:

$ npm run start-ios-bundle

I don't know what to think about this! :(

[jet-lee-m]

Thank you,

the suggested workaround works for me.

I tried and found another solution. I used the webpack.common.js from the nativescript-sdk-examples-ng.

But now, I have a further problem. With both solution I cannot use platform-dependent *.css files (template.android.css or template.ios.css)

@Component({
selector: "my-app",
templateUrl: "app.component.html",
styleUrls: ["template.css"]
})

I get the error:
Error: ENOENT: no such file or directory, open '/project/app/template.css'

I thought that the webpack extension support the platform-dependent *.css files. In webpack.common.js I found following lines:

resolve: {
//Resolve platform-specific modules like module.android.js
extensions: [
".aot.ts",
".ts",
".js",
".css",
"." + platform + ".ts",
"." + platform + ".js",
"." + platform + ".css",
],
//Resolve {N} system modules from tns-core-modules
modules: [
"node_modules/tns-core-modules",
"node_modules"
]
},

Have you any solutions? Thanks.

[hdeshev]

Unfortunately that feature isn't supported yet. I recommend that you use a single CSS file and use different selectors for the two platforms. For example:

.android .my-component {
...
}

.ios .my-component {
...
}

[jet-lee-m]

Ah okay, thanks for the fast answer.

But when I use only one Button-Element in my template.html

<Button text="TAP" class="my-component"></Button>

How can I distinguish between Android and iOS with two separate selector?
Thats not working?

[ignaciolarranaga]

So the workaround can be summarized as 2 scripts for package.json (because seems it needs to be reverted to run the normal tns run):

"w-36-apply": "ngc -- -p tsconfig.aot.json",
"w-36-revert": "find app -name *.ngfactory.ts -type f -delete -o -name *.shim.ts -type f -delete -o -name *.metadata.json -type f -delete",

[bnussey]

Hi @sis0k0 does this fix for styleUrls also work with templateUrls? For example in our project there is specific templates for Android and iOS. So welcome.ios.html and welcome.android.html
Seems at the moment I am getting a ERROR in ENOENT: no such file or directory on these.

[Habeeb-mohamed]

@bnussey Did you found any solution for the issue, i am also getting the same error

[jogboms]

Any solution to this yet?

[bnussey]

I believe they rolled this out in one of the recent versions.

[jogboms]

@bnussey How about platform-specific templates within node_modules??

[rahadur]

Still facing this problem. :(

Code

@Component({
    selector: 'TopBar',
    moduleId: module.id,
    templateUrl: './topbar.component.html',
    styleUrls: ['./topbar.component.css']
})
export class TopbarComponent implements OnInit {}

Compile Error

ERROR Error: Uncaught (in promise): Error: Could not resolve /data/data/org.nativescript.Newzzz/files/app/app/shared/topbar/topbar.component.css. Looked for: /data/data/org.nativescript.Newzzz/files/app/app/shared/topbar/topbar.component.css.
JS: Error: Could not resolve /data/data/org.nativescript.Newzzz/files/app/app/shared/topbar/topbar.component.css. Looked for: /data/data/org.nativescript.Newzzz/files/app/app/shared/topbar/topbar.component.css.
JS:     at FileSystemResourceLoader.resolve (file:///data/data/org.nativescript.Newzzz/files/app/tns_modules/nativescript-angular/resource-loader.js:33:19) [angular]
JS:     at FileSystemResourceLoader.get (file:///data/data/org.nativescript.Newzzz/files/app/tns_modules/nativescript-angular/resource-loader.js:19:33) [angular]
JS:     at DirectiveNormalizer._fetch (file:///data/data/org.nativescript.Newzzz/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js:16229:47) [angular]
JS:     at file:///data/data/org.nativescript.Newzzz/files/app/tns_modules/@angular/compiler/bund...

[NickIliev]

@rahadur share a sample app or Playground that reproduces the issue. All of our templates are using styleUrls with Webpack and the issue is not present.