Webpack - registering modules


#1

Hi, I’m a newbie moving from Ionic to NS.

So far I’ve been doing well with transferring my Angular2 logic into NS ecosystem.
However now I’m stuck with Webpack. I’ve installed webpack and all dependencies and the next step in the docs is to register pages as dynamic modules with webpack:

global.registerModule(“main-page”, () => require("./main-page"));

But it doesn’t say where to add the line.

Latar the docs say that for non-ng versions you should create bundle-config.js|ts file in app folder. But my version is ng, so I understand creating the file manually is not my case…

Any tip?

ps. When I skipped the above, webpack finished fine but after deploying to device, the smartphon showed me a trillion-line error rooting from missing module metadata (if I remember correctly)


#3

Does the webpack build terminate with success?
npm run build-android-bundle
npm run build-ios-bundle


#4

First off, congratulations on migrating from Ionic over to NS. You made the right choice.

When registering modules, you are essentially pushing that module’s code into a separate bundle/file. This process is neccessary when trying to speed-up bootstrap time and minimize the size of your application.

For vanilla NS projects you do not need to do this step, as the default build process already is optimized.

For Angular, after installing the webpack plugin, you should have a vendors file (one for each platform and a shared one) inside your app directory. You simply require out separate modules in this file.

Example here: https://github.com/sean-perkins/nativescript-healthcare-app/blob/master/app/vendor.ts

I can’t speak for doing this for each page in your app. I’ve only done it for large vendor dependencies that I wanted isolated out in it’s own bundle, so it would load once and be used everywhere else (benefit of webpack).


#5

Hi guys, sorry for tardy reply.

@iguissouma - both npm run build-android-bundle and npm run start-android-bundle finish with the same error shown in screenshot.

@sean-perkins - yes, I have the files as you mentioned. Everything looks properly, I guess. There are imports for android version as well as common.

Trying to eliminate potential bugs on my side, I’ve done a small experiment - downloaded template https://github.com/NativeScript/template-drawer-navigation-ng, installed webpack and still new errors occurred. No idea what is wrong. Can you have a look at the screenshots? There are bugs and my system specs.



#6

I tried to reproduce same problem:
I created an app with the following command:
tns create my-app-name --template https://github.com/NativeScript/template-drawer-navigation-ng

cd my-app-name

npm install --save-dev nativescript-dev-webpack

npm install

npm run build-ios-bundle

I got the following error:

So I modified the webpackconfig.js like below to correctly initialize mainSheet base on the target platform :

let mainSheet;

module.exports = env => {
    const platform = getPlatform(env);

    mainSheet = `app.${platform}.css`;

Then the build was successful on android and ios.

You can always proceed to remove your node_modules, platforms directories and run npm install and run the build webpack.

Below is my configuration:
mac OS High Sierra
NativeScript v3.3.0
Node v6.10.1
npm 3.10.10


#7

Thanks, your solution worked with the above error, but another one popped up - ‘Error encountered resolving symbol values statically’

I managed to solve it with this fix https://github.com/NativeScript/nativescript-dev-webpack/issues/274
modifying path in tsconfig.aot.json.

Thanks for help!

ps. my app went down from 89mb to 33mb and 30 after --uglify. I hoped to apply --snapshot flag but read in the docs it doesn’t work on Windows. I’ll try Linux then.