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

[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 https://github.com/hypery2k/nativescript-ngx-fonticon/pull/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 nativescript-ngx-fonticon@2.1.2-PR-26-16

[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