Webpack not transpiling *.debug.* or *.release.* files

[jevenson]

nativescript-dev-webpack@0.8.0
nativescript-worker-loader@0.8.1
webpack@3.2.0

In my application I have an environments folder with the following files:

environment.d.ts
environment.debug.ts
environment.release.ts

The environment file is referenced from other files in the application like this, and the d.ts file resolves the module import errors during development.

import { environment } from './../../environments/environment';

When doing a regular build with tns run <platform>, the environment.debug.ts file is renamed to environment.ts when it is copied to the platform folder. It will copy the release version if I provide the --release flag.

This does not work for webpack though. I get the following error:

Module not found: Error: Can't resolve './../../environments/environment'

It appears that the webpack plugin isn't taking these files into account. Is this a bug, or am I missing a Webpack loader?

[jogboms]

@jevenson, any luck with this?

[jogboms]

@sis0k0 can we get a little help here?

[sean-perkins]

Can you verify if the environments file is being copied over into the build? If not, try updating the glob patterns in the webpack.config.js to specify that directory during the build process.

EDIT: See my comments below. This is not helpful for you!

[jogboms]

Yeah. Exactly what i ended up doing.. Thanks...

…

On Nov 18, 2017 6:39 PM, "Sean Perkins" ***@***.***> wrote: Can you verify if the environments file is being copied over into the build? If not, try updating the glob patterns in the webpack.config.js to specify that directory during the build process. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#304 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AF675rfD3k0NVaaCnD0hPTJdsy2NaIxPks5s3xZTgaJpZM4QJY8A> .

[NickIliev]

@jevenson follow the workflow provided by @sean-perkins here and let us know if you have managed to resolve your issue.

[jevenson]

@sean-perkins @NickIliev so I'm not sure if its being copied into the bundle or not. The output from webpack doesn't individual TS files that are copied into the bundle. I would assume its not considering that when the environment file is used in a different TS file, the import statement does not specify .debug. or .release., so webpack wouldn't know that those files are referenced.

I would think what would need to happen is a loader would change those import statements to use the .debug. or .release. versions, similar to how a loader changes template and style references to use .ios. or .android. files.

[jevenson]

Right now to get around this, I wrote a node script that copies the contents of the debug or release file into a file with the same file name, just without the environment. Then I just run that node script before I run webpack.

[sean-perkins]

IF YOU ARE USING 0.9.0 and NS 3.4 SEE MY COMMENT AFTER THIS

I would like to redact my original comment as it was completely not applicable to what you are experiencing and not useful.

The problem faced is that the build process for NativeScript Angular (specifically webpack) does not re-write the environment config files.

Since we never explicitly import environment.{debug/release} into our app's eco-system, it's not even included into the bundle either, just the root environment.ts.

Like you, I created a workaround for this. I'm not pleased with the hackery, but may be helpful for others until it's resolved.

1. Update your package.json and add custom scripts for the different deploy targets you want to support (default is dev).

"build-ios-bundle": "npm run ns-bundle --ios --build-app", 
"build-ios-bundle.prod": "npm run ns-bundle --ios --build-app --env.deployment=prod",
"start-ios-bundle": "npm run ns-bundle --ios --run-app",
"start-ios-bundle.prod": "npm run ns-bundle --ios --run-app --env.deployment=prod",

The key piece here is --env.deployment=foo which will be accessible in our webpack config to handle custom logic with.

2. Update the webpack.config.js to write-out our deployment target as a global variable using the DefinePlugin.

new webpack.DefinePlugin({
    "global.TNS_WEBPACK": "true",
    "global.DEPLOYMENT": JSON.stringify(env.deployment || 'dev')
}),

We stringify the value for a very specific reason, which is how we leverage the actual constant in our app.

3. Update the environment.ts file to support custom deployment targets.

This is the piece I am least pleased about, but whatever, it works.

import { environment as prod } from './environment.prod';

const dev = {
    production: false,
    environment: 'dev',
    logger: false
};

const environments = {
    prod,
    dev
};

let currentEnvironment = dev;

if (global['TNS_WEBPACK']) {
    const _env = environments[global['DEPLOYMENT']];
    if (_env) {
        currentEnvironment = _env;
    }
}

export let environment = currentEnvironment;

The important details here are that the const environments = keys match the deployment target as specified in your package.json script. By importing the environment.prod file and applying it to the file, it will now be a part of the bundle.

I came up with this solution after 4 hours of digging through all the available NS repositories and plugin repositories to see how they hook the Angular CLI build process to no avail.

[sean-perkins]

With the changes in webpack with 0.9.0, my previous solution no longer works.

Here's the updated strategy:

In your webpack.config.js

1. Change the deconstruction of the env variable from this:

const { snapshot, uglify, report, aot } = env;

to:

const { snapshot, uglify, report, aot, prod } = env;

2. Add this below that line

const deployment = prod ? 'prod ': 'dev';

3. Update the DefinePlugin

// Define useful constants like TNS_WEBPACK
new webpack.DefinePlugin({
    "global.TNS_WEBPACK": "true",
    "global.DEPLOYMENT": JSON.stringify(deployment || 'dev')
}),

4. Update the package.json

Here's what a build prod script may look like:

"build-ios-bundle.prod": "tns build ios --bundle --env.aot --env.prod",

Remember to use the same environment modifications I mentioned above for environment.ts.

[manojdcoder]

@sean-perkins The documentation says using $ tns build android --bundle --env.development --env.property=value will parse property as string.

// webpack.config.js
module.exports = env => {
    console.dir(env); // { development: true, property: 'value' }
}

But any variable being passed returns only boolean value. Is there a workaround to get the string value passed in arguments?

[manojdcoder]

@tjvantoll @jlooper @sean-perkins @sis0k0 Hope one of you may have the answer here / get the right person to answer, for the problem I mentioned above - all environment variables are parsed as boolean.