Webpack support

[lukashlobil]

Hi, is it possible to enable Webpack (AOT) support for this plugin? I cannot use .forRoot in my main ngModule. Thank you

[NathanWalker]

Hi @lukashlobil please remove your previous install of this plugin and install the new 2.0.0 version, also note the new name:

npm i nativescript-ngx-fonticon --save

Lemme know.

[zoeitsolutions]

Hi @NathanWalker I used it in my main module and then had to use it in my LoginModule as well in order for it to work in my LoginModule's components. Is that correct?

[NathanWalker]

@zoeitsolutions Yes that is correct, however just make sure you only call TNSFontIconModule.forRoot in your root module.

@lukashlobil curious if 2.0.0 was any better for you with webpack? If not can you provide a stacktrace and project setup?

[hypery2k]

@NathanWalker I'm getting a wired error:

Error: Error encountered resolving symbol values statically. Calling function 'TNSFontIconModule',

I'm using a shared module:

export function icons(): Object {
  return {
    'fa': 'fonts/font-awesome.css',
    'ion': 'fonts/ionicons.css'
  };
}

@NgModule({
  declarations: [
    CheckboxComponent,
    RadioButtonGroupComponent,
    RadioButtonComponent,
    MapComponent,
    LocalTimePipe,
    LocalDateTimePipe,
    SelectOneDialog,
    SimpleDialog
  ],
  imports: [
    CommonModule,
    NativeScriptModule,
    NativeScriptFormsModule,
    TNSFontIconModule.forRoot((icons)),

Any guess?

[hypery2k]

I cannot find .metadata.json files in the plugin..

[patrickpereira]

Hi @NathanWalker

I'm getting the same error as @hypery2k

ERROR in Error encountered resolving symbol values statically. Calling function 'TNSFontIconModule'

[hypery2k]

@NathanWalker any ideas? Even if I move the Module to the root Module I'm getting the error:

ERROR in Error encountered resolving symbol values statically. Calling function 'TNSFontIconModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /tmp/myapp/app/app.module.ts, resolving symbol AppModule in /tmp/myapp/app/app.module.ts

[hypery2k]

BTW: I'm using Angular 2.4.3

[v-fedorov]

Im having the same issue, @hypery2k were you able to resolve this?

[hypery2k]

@NathanWalker Any solutions for this? This doesn't work

  imports: [
    CommonModule,
    NativeScriptModule,
    NativeScriptFormsModule,
    TNSFontIconModule.forRoot({
      fa: 'fonts/font-awesome.css',
      ion: 'fonts/ionicons.css'
    }),

[v-fedorov]

@hypery2k as a temp workaround I managed to get it working by creating and importing this file

https://gist.github.com/v-fedorov/945e33ffec6c7ad74133436aa23dd56c

[dgomezs]

@NathanWalker having the same issue as reported here. Could you incorporte @v-fedorov solution or similar one? Thank you very much in advanced. Getting closer to have my app full webpack

[NathanWalker]

Hey absolutely, trying to get to this, sry for delay - next week should be better for me.

[hypery2k]

@NathanWalker Maybe you could take a look at my fork. I think it should work, but currently getting errors during tsc The repo itself seems to have same setup issues.

[NathanWalker]

Thanks @hypery2k does using the opaquetoken sol e the error for you?

[hypery2k]

Can't say as I'm having issues with compiling all the stuff. I'll take a look later or at the beginning of the week. If it's working I'll come back and update the PR

[patrickpereira]

@hypery2k Any news on this one?

[hiddencaliber]

Hi @NathanWalker / @hypery2k I am also facing the same problem. Is there any update on this fix ? Thanks,

[hypery2k]

@NathanWalker: With my latest changes AoT build is working fine for me

[patrickpereira]

Wicked!!! Let's get it merged @NathanWalker !!!

[dgomezs]

hey @hypery2k how are you building the module from your fork? Looks like the file references.d.ts and if I remove it from compilation It cannot find 'file-system' module. Thank you in advanced

[dgomezs]

hey @hypery2k or @NathanWalker I installed the latest version of the plugin with the latest changes but Aot is still not working on my side. I still don't see the metadata for the plugin. I tried to generate it myself with the npm script without luck. Any thoughts?

[hypery2k]

@NathanWalker: My fork as I pushed worked, the metadata is missing, see https://github.com/hypery2k/nativescript-ngx-fonticon/blob/master/package.json#L47

[lukashlobil]

@hypery2k I will have to do a AOT build at the end of the week, this is the last plugin hindering from doing that. Is there a way I can use your repo? (wanted to post this in your repo, but issues forum is not there since it is a fork).

[YvesCandel]

Would love to see this merged/fixed soon. This is the only plugin stopping us from using webpack.

[hypery2k]

everyone can give my PR a try:

npm install nativescript-ngx-fonticon@next

[YvesCandel]

Still not working with aot...

ERROR in Error encountered resolving symbol values statically. Calling function 'TNSFontIconModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /Users/etc/app/app.module.ts, resolving symbol AppModule in /Users/etc/app/app.module.ts

Using it like this in my app.module.ts:

TNSFontIconModule.forRoot({ 'fa': 'font-awesome.css' })

[hypery2k]

With the help of an sample app I've added I'm able to reproduce the error. Looking at this later the week

[hypery2k]

@NathanWalker I've added a npm run script npm run e2e which tests the plugin in an AoT sample App

[hypery2k]

@all can give my PR a try:

npm install nativescript-ngx-fonticon@next

[cjdreiss]

@v-fedorov 's solution helped my app AoT compile and get me to be able to launch the app. Not sure if it works or not in terms of displaying icons because I had so many other runtime issues with AoT that I ended up giving up after nearly a day of changing things.

[MartoYankov]

@hypery2k I was able to test this and now it works for Android builds. It fails on iOS with the same error: ERROR in Error encountered resolving symbol values statically. Calling function 'TNSFontIconModule', function calls are not supported.

[ADjenkov]

@hypery2k same problem here with the iOS as MIYankov said (the above comment)

[hypery2k]

did you completely removed the platform and hooks?

[ADjenkov]

Yes, I've just tried that (removing platforms, node_modules and hooks folders). No result

"ERROR in Error encountered resolving symbol values statically. Calling function 'TNSFontIconModule', function calls are not supported."

[hypery2k]

did you tried npm run ns-bundle ios -- --clean? Which exact version of the module you're using?

[ADjenkov]

Yes it works with npm run ns-bundle ios --start-app --clean Using next version of the module (^2.1.2-PR-26-3). Thanks!

[hypery2k]

@NathanWalker Should we release a patch version with this PR and afterwards cleanup the code, regarding the sample apps vs. end2end test ?

[YvesCandel]

If I add it as ^2.1.2-PR-26-3 to package.json and npm install, it doesn't seem to work.

But if i, afterwards, do an "npm install nativescript-ngx-fonticon@next --save", it works fine.

Looking forward to having you publish the new version!

[hypery2k]

you normally have to clean everything out, with --clean

[lukashlobil]

@hypery2k Even with

"nativescript-ngx-fonticon": "^2.1.2-PR-26-3"

I still get:

ERROR in Error encountered resolving symbol values statically. Calling function 'TNSFontIconModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in .../app.module.ts, resolving symbol AppModule in .../app.module.ts

any thoughts please?

[Yamilquery]

@lukashlobil In my case, using version 2.1.2-PR-26-3. What I did was delete the / platforms folder and use the following command:

npm run build-ios-bundle -- --release --for-device --teamId <your_teamId>

But...

CONSOLE LOG file:///app/bundle.js:4571:24: Collections to load: fa
CONSOLE LOG file:///app/bundle.js:4595:24: ----------
CONSOLE LOG file:///app/bundle.js:4596:24: Loading collection 'fa' from file: ./assets/font-awesome.css
CONSOLE ERROR file:///app/vendor.js:59780:26: Unhandled Promise rejection: Animation cancelled. ;

And my icons show "undefined"...

In dev mode: tns run ios --emulator

I'm getting this:

1   0x1039e733c -[TNSRuntime executeModule:referredBy:]
2   0x103501389 main
3   0x1089ee65d start
file:///app/shared/menu/menu.component.ts:10:39: JS ERROR SyntaxError: Importing binding name 'TNSFontIconPurePipe' is not found.

[lukashlobil]

Here is my package,json and app.module: https://gist.github.com/lukashlobil/e7e81852cdc9e746fa7e79ac03cc6545

[lukashlobil]

So, I got it working with AOT, but now it won't work without AOT :-( anyone experiencing the same?

[hypery2k]

could you try with nativescript-ngx-fonticon@2.1.2-PR-26-12

[ErikGrijzen]

I have the same issue. AOT compilation works fine with "2.1.2-PR-26-12".

But now DEV mode is broken and shows:

JS ERROR SyntaxError: Importing binding name 'TNSFontIconPurePipe' is not found.

[hypery2k]

so you're justing doing a tns run ios --emulator?

[YvesCandel]

My build now throws the following error using your PR:

ERROR in ../~/nativescript-ngx-fonticon/nativescript-ngx-fonticon.js Module not found: Error: Can't resolve 'tslib' in '..users..etc.../node_modules/nativescript-ngx-fonticon'

[YvesCandel]

FYI: My build uses webpack to bundle the app.

I've found this comment:

https://github.com/s-panferov/awesome-typescript-loader/issues/250#issuecomment-279325365

Your tslib dependency is a dev dependency rather than a direct dependency. That could be the issue no?

[hypery2k]

you can test the latest snapshot when CI build finishes: