Nativescript: Bundling a NativeScript Anglular app with webpack breaks the nativescript-theme-core

[avatsaev]

Please, provide the details below:

When bundling an Angular app with webpack (http://docs.nativescript.org/angular/tooling/bundling-with-webpack.html#using-webpack-to-bundle-your-code)
the nativescript theme (from nativescript 2.4) breaks.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• CLI: 2.4.1
• Cross-platform modules: 2.4.0
• Runtime(s): 2.4.1
• Plugin(s): 2.4.0

Please tell us how to recreate the issue in as much detail as possible.

Create an app using nativescript-theme-core classes in the UI

bundle with with webpack reading this doc: http://docs.nativescript.org/angular/tooling/bundling-with-webpack.html#using-webpack-to-bundle-your-code

$ tns build ios --bundle --release

screenshots (without webpack on the left vs with webpack on the right):

http://i.imgur.com/4668f5k.png
http://i.imgur.com/DKsxG6i.png

[hdeshev]

Hi @avatsaev

The nativescript-theme-core package was developed after publishing the initial version of the nativescript-dev-webpack plugin, and until today it didn't support bundling the theme files out of the box.

I just published a new version of the plugin (Warning! Backwards incompatible!) and updated the documentation article. The good news is that the updated plugin creates a webpack config that will use the ExtractTextPlugin to create an app.css file containing theme styles too.

[avatsaev]

Hey,

Tried it, getting a looooots of compile errors, had to refactor all my components,

for example your can't export something with default:

export default class MyCompoenent{...

if for example you have a HomeComponent in the folder app/home/, with home.component.html template, you have to specify just the name of the template in the component decorator:

@Component({
  selector: "app-home",
  templateUrl: "home.component.html",
...

Instead of:

@Component({
  selector: "app-home",
  templateUrl: "home/home.component.html",
...

Same for style files.

But these are not biggest issues, after refactoring, i get these errors, and I have no clue what they mean:

'Image' is not a known element:
1. If 'Image' is an Angular component, then verify that it is part of this module.
2. If 'Image' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
<StackLayout orientation="vertical" horizontalAlignment="stretch" class="page">

  [ERROR ->]<Image stretch="aspectFit" width="200" marginBottom="40" marginTop="80"
         src="res://MainLogo""): HomeComponent@7:2
Can't bind to 'text' since it isn't a known property of 'Button'. ("#696969" color="#f0f8ff" height="50" class="appear-in-1 btn btn-rounded-lg fa " (tap)="showBooks()" [ERROR ->][text] = "'\uf03a Catalog'"></Button>

  <Button backgroundColor="#696969" color="#f0f8ff" height="50"): HomeComponent@13:127
Can't bind to 'text' since it isn't a known property of 'Button'. ("n backgroundColor="#696969" color="#f0f8ff" height="50" class="appear-in-2 btn btn-rounded-lg fa  " [ERROR ->][text] = "'\uf05a Help'"></Button>

  <Button backgroundColor="#696969" color="#f0f8ff"  height="50" "): HomeComponent@15:108
Can't bind to 'text' since it isn't a known property of 'Button'. ("backgroundColor="#696969" color="#f0f8ff"  height="50"  class=" appear-in-3 btn btn-rounded-lg fa " [ERROR ->][text] = "'\uf29c About'" ></Button>


"): HomeComponent@17:110
'StackLayout' is not a known element:
1. If 'StackLayout' is an Angular component, then verify that it is part of this module.
2. If 'StackLayout' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
</ActionBar>

[ERROR ->]<StackLayout orientation="vertical" horizontalAlignment="stretch" class="page">

  <Image stretch="as"): HomeComponent@5:0

[hdeshev]

Well, welcome to the wonderful world of webpack and Angular AoT compilation :)

The first issue could probably be resolved by setting your moduleId component property:
https://github.com/NativeScript/nativescript-sdk-examples-ng/blob/lazy-load-webpack-aot/app/examples-list.component.ts#L54

The second one is caused by the AoT compiler. Adding a NO_ERRORS_SCHEMA to your NgModule's should fix it:
https://github.com/NativeScript/nativescript-sdk-examples-ng/blob/lazy-load-webpack-aot/app/app.module.ts#L20

[lukashlobil]

Is there some way to have the nativescript-dev-webpack and lazy-load? It seem like a lot of the plugins, that many people are using (telerik-ui, theme, fonticons, maps...) are not ready for webpack AOT. Of course the plugins are out of scope of this issue, but it would be great to be able to use the webpack plugin out of the box and when the plugins are ready, just switch config to AOT.

[valentinstoychev]

@lukashlobil - with the latest releases it all should work as expected. We are aware that telerik-ui is still not compatible and we are working on resolving this. If you are using the latest bits and still have problems please report them here.

[lukashlobil]

I am getting this error:

Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NativeModule in native.module.ts, resolving symbol NativeModule in native.module.ts

It used to give me information on where the error is in the file - I refactored lambdas to functions. It can all be seen here, I simplified the module and created a gist. Do you mind checking it? I am using default webpack config that came with the plugin.

https://gist.github.com/lukashlobil/a46096353401ba1ec4108f8215a519d1

[sis0k0]

@lukashlobil - the problem seems to be the version of NativeScript Angular. Please try using the official release - 1.2.0, or some version after 1.3.0-2016-12-09-1152. You can also consider using the next tag.

[lukashlobil]

unfortunately, I am getting the same error either with 1.2.0 and with next (already tried this solution)

[sis0k0]

My bad, that was only a part of the problem. The other parts are:

• The telerik-ui plugin is not compatible with AoT compilation yet (as mentioned above).
• You correctly noticed that the nativescript-ng2-fonticon plugin also cannot be used with AoT. The reason is that the Angular compiler can't statically analyze TNSFontIconModule.forRoot().

If you notice a similar problem with other plugins, report them here or, even better, open an issue in the plugin's repository.

[lukashlobil]

Thank you for confirming my suspicion.
I will open tickets with the plugins.
In the meantime, can you please suggest how to use the nativescript-webpack plugin without AOT?

[patrickpereira]

+1 on how to use webpack without AOT

[JanarthananCodingmart]

I followed the installation guide of webpack...but i am getting the error below..Give me the solution for this error....
Error:
Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NativeModule in native.module.ts, resolving symbol NativeModule in native.module.ts

It used to give me information on where the error is in the file - I refactored lambdas to functions. It can all be seen here, I simplified the module and created a gist. Do you mind checking it? I am using default webpack config that came with the plugin.

[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.