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.

[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 [email protected]

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

s-panferov/awesome-typescript-loader#250 (comment)

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:

[YvesCandel]

@hypery2k Thanks! It's working now :)

[hypery2k]

thanks for testing ;)

[YvesCandel]

No problem. The bad news is that the regular "tns run ios --emulator" (so, no webpack) still throws the following error:

"file:///app/app.module.js:9:42: JS ERROR SyntaxError: Importing binding name 'TNSFontIconPurePipe' is not found."

I'm not even using it anywhere in my solution... just the regular TNSFontIconPipe.

[hypery2k]

can you post your tsconfig?

[YvesCandel]

tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noEmitHelpers": true,
        "noEmitOnError": true,
        "skipLibCheck": true,
        "lib": [
            "es2016"
        ]
    },
    "exclude": [
        "node_modules",
        "platforms",
        "**/*.aot.ts"
    ]
}

tsconfig.aot.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "types": [],
    "baseUrl": ".",
    "paths": {
      "ui/*": ["node_modules/tns-core-modules/ui/*"],
      "platform": ["node_modules/tns-core-modules/platform"],
      "image-source": ["node_modules/tns-core-modules/image-source"],
      "xml": ["node_modules/tns-core-modules/xml"],
      "xhr": ["node_modules/tns-core-modules/xhr"],
      "text": ["node_modules/tns-core-modules/text"],
      "data": ["node_modules/tns-core-modules/data"],
      "fetch": ["node_modules/tns-core-modules/fetch"],
      "trace": ["node_modules/tns-core-modules/trace"],
      "fps-meter": ["node_modules/tns-core-modules/fps-meter"],
      "color": ["node_modules/tns-core-modules/color"],
      "application-settings": ["node_modules/tns-core-modules/application-settings"],
      "http": ["node_modules/tns-core-modules/http"],
      "camera": ["node_modules/tns-core-modules/camera"],
      "console": ["node_modules/tns-core-modules/console"],
      "timer": ["node_modules/tns-core-modules/timer"],
      "utils": ["node_modules/tns-core-modules/utils"],
      "location": ["node_modules/tns-core-modules/location"],
      "file-system": ["node_modules/tns-core-modules/file-system"],
      "application": ["node_modules/tns-core-modules/application"],
      "image-asset": ["node_modules/tns-core-modules/image-asset"],
      "connectivity": ["node_modules/tns-core-modules/connectivity"],
      "globals": ["node_modules/tns-core-modules/globals"]

    }
   },
  "exclude": [
      "node_modules",
      "platforms"
  ],
  "angularCompilerOptions": {
    "skipMetadataEmit": true,
    "genDir": "./"
  }
}

[hypery2k]

could try this tsconfig?

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "removeComments": true,
        "experimentalDecorators": true,
        "noEmitHelpers": true,
        "noEmitOnError": true,
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "importHelpers": true,
        "types": [
            "jasmine"
        ],
        "lib": [
            "es2015",
            "es2015.iterable"
        ],
        "baseUrl": ".",
        "paths": {
            "*": [
                "./node_modules/tns-core-modules/*",
                "./node_modules/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "platforms",
        "**/*.aot.ts"
    ]
}

[YvesCandel]

Same result...

[buuhuu]

The problem seems to be that nativescript-ngx-fonticon is an es2015 module and the actual issue is caused by

import * as tslib from 'tslib'

Webpack seems to be able to build that without any problems, but on the other hand the runtime cannot handle that. (Just a guess ;) )

[buuhuu]

I made another fix hypery2k#2 that resolves the crash on android:

"Trying to link invalid 'this' to Java object".

For me this is now working for android and ios, both webpack and tns build. @hypery2k can you publish a new tag for the PR?

[hypery2k]

you could try with [email protected]

[YvesCandel]

I can confirm that 2.1.2-PR-26-16 works both with and without webpack for our app!

[hypery2k]

Version 2.2.0 is published now