Nativescript-angular: Webpack bundle error

[tsonevn]

_From @tsebvaan on May 15, 2017 19:58_

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes

Tell us about the problem

Confused about main.aot.ts and "app.module.ngfactory" is missing or is it auto-generated?

Which platform(s) does your issue occur on?

Android

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

• CLI: 2.5.4
• Cross-platform modules: 2.5.2
• Runtime(s): 2.5.0
• Plugin(s):

"dependencies": {
    "@angular/animations": "~4.0.0",
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "email-validator": "^1.0.7",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "nativescript-advanced-webview": "^1.1.3",
    "nativescript-angular": "~1.5.1",
    "nativescript-angular-snapshot": "1.5.2-5.5.372.32",
    "nativescript-camera": "0.0.8",
    "nativescript-cardview": "^1.3.2",
    "nativescript-clipboard": "^1.1.6",
    "nativescript-downloadmanager": "^0.1.0",
    "nativescript-drop-down": "^1.5.5",
    "nativescript-file-picker": "0.0.2",
    "nativescript-floatingactionbutton": "^2.2.7",
    "nativescript-fresco": "^1.0.3",
    "nativescript-imagepicker": "^2.5.1",
    "nativescript-performance-monitor": "^1.0.0",
    "nativescript-plugin-firebase": "^3.10.1",
    "nativescript-pulltorefresh": "^1.1.10",
    "nativescript-ripple": "^1.1.0",
    "nativescript-sqlite": "^1.1.3",
    "nativescript-statusbar": "^1.0.0",
    "nativescript-telerik-ui": "^1.6.1",
    "nativescript-theme-core": "~1.0.2",
    "nativescript-toast": "^1.4.5",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.0.1",
    "tns-core-modules": "2.5.2",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.0.0",
    "@ngtools/webpack": "1.2.13",
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "copy-webpack-plugin": "~4.0.1",
    "extract-text-webpack-plugin": "~2.1.0",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "~0.3.5",
    "nativescript-dev-webpack": "^0.5.0",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.0.2",
    "typescript": "2.1.6",
    "webpack": "~2.5.1",
    "webpack-sources": "~0.2.3"
  },
  "scripts": {
    "ns-bundle": "ns-bundle",
    "start-android-bundle": "npm run ns-bundle --android --start-app",
    "start-ios-bundle": "npm run ns-bundle --ios --start-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  }

Should the code in the main.aot.ts looks likes this?

`import { platformNativeScript } from "nativescript-angular/platform-static";
import { AppModuleNgFactory } from "./app.module.ngfactory";

platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);`

I have inputted some logic code in the main.ts like registering elements and initializing firebase. Should I also do it in main.aot.ts? When bundle it, it gives error:

main.aot.ts
ERROR in ./pages/message/conversation/conversation.component.ts Module not found: Error: Can't resolve 'nativescript-file-picker' in 'C:\Users\pc\ACLC-Group-Portal\app\pages\message\conversation' @ ./pages/message/conversation/conversation.component.ts 13:33-68 @ ./app.module.ngfactory.ts @ ./main.aot.ts

I have imported nativescript-file-picker in the conversation.component.ts but still gives me error. Then If I removed the codes from the main.aot.ts, it bundled successfully and installed but when I open the app:

https://cloud.githubusercontent.com/assets/23137338/26076599/d9d14fb0-39eb-11e7-8c7e-cafad5577c7c.jpg

_Copied from original issue: NativeScript/NativeScript#4197_

[sis0k0]

Hey @tsebvaan,

First of all, yes yo do need the code in the main.aot.ts file. It is used when you are compiling your app with the Ahead-of-time compiler (that's what happens when you use nativescript-dev-webpack plugin). Similarly, the main.ts file is used when you build your app in debug - then it uses the Just-in-time compiler. When you use webpack to bundle your app, the Angular compiler (ngc) compiles your app and generates ngfactory files (including app.module.ngfactory) in-memory (that's why you don't see them in your project dir).

Now, about the error that you see here:

Can't resolve 'nativescript-file-picker'

I couldn't find the nativescript-file-picker published on npm, but the problem most probably is that there is some code that cannot be webpacked within the plugin. If you send a copy of it, we can debug it and find the problem.

[mayoljonathan]

Oh I see. Thanks. It's not yet published but here is the link
https://www.npmjs.com/package/nativescript-file-picker

Sample code given by @tsonevn
https://github.com/NativeScript/NativeScript/files/947016/Archive.zip

[sis0k0]

@tsebvaan,

The fix is pretty simple. In the package.json of the plugin, the main property should be file-picker instead of file-picker.js. Otherwise, webpack won't be able to resolve the file-picker.android.js or file-picker.ios.js files. The plugin's github repo is private, so I can't make a PR there. However, you can fix it in your project and contact the author of the plugin. I'll close this issue now, but please reopen if you have any other problems. :)

Here's the fixed plugin:
filepicker.tar.gz

[mayoljonathan]

Alright. Works perfectly. Thanks for the help.