We Keep Coding

How do I include a JSON file to my javascript that's generated at compile time with a webpack plugin?

Following up from my previous question, which I was able to solve:
Is there any way to get a list of files in a directory into a variable when using webpack?
I am trying to figure out how I can do something like
import important_files from 'important_files.json' in my javascript, so that I can utilize the JSON data without having to read it in with File.
Currently, my generated file goes to the dist directory, and I technically can include it from there, but that seems wrong to me. Is there a way to make the file able to be included by including it in the build assets at compile time?
Is there a totally different approach that's superior?
Thank you.

My solution was to generate the file in the src directory, where it gets included -- then use the copy-webpack-plugin to copy it over to the dist directory

Webpack directives

I am building a typescript/javascript package that will contain several JSON files. I do not want those JSON files included in the bundle that webpack outputs. I do want those files included in the output folder of the bundled javascript (copied from the node_module directory). This would be similar to including images.
I would like to create directives that explain to webpack what to do vs writing documentation in hopes that somebody reads it and does it correctly.
I know that copy-webpack-plugin will do what I need to do, but not sure how to set up this directive.
Is it even possible?
So
MyPackage has JSON files
Another developer uses my npm-package
Developer uses web pack in their project
Developers webpack bundles the javascript, excludes my JSON files from the bundle, but copies them to the output directory.

Figured it out within the package.json
Create a folder called bin (whatever) on the same level as src.
Copy the contents that need to be included in the package but not compiled or bundled into javascript, such as json files.
Update package.json add the following entry
"files": [
"bin"
],
Now when publishing, the npm package will contain the bin directory. When building within your project using webpack it will recognize this and include those files in the webpack build and deploy as part of the deployment but not in the javascript bundle.
Then from there, your javascript should reference the files similar to reading a file whether it be on the server or client sie.

Is there any way to export the current rendered angular page to static HTML along with all the JS functionalities?

I want to export the rendered HTML files with its resources to a zip file in order to share it via mail but i could not find any solution for this usecase. Could you please guide me how to proceed?
The web application is developed using Angular8.

Sure. I guess you had a code test or something: just build your project for development, compress the /dist folder and send it as a compressed file of your choice. Type and execute:
ng build
In the project main folder. Notice that --watch doesn’t help here, since you don’t need a CI/CD. Check the official documentation for more details.

How to make my angular app use edited config file after 'ng build --prod'

I'm deploying an angular app using ng build --prod. All I want is to let the user using the dist folder can simply change in config.json file in the asset folder so that he can set his settings and my app will use that modified config.json file.
Is it possible after I run ng build --prod to have a config.json file in the build folder that the user can go and directly modify?
If not, is there any better way to accomplish that using another strategy?

I understand that you want to load configuration similar to environment.ts file. Advantage of environment.*.ts file is, it is embedded into product during compile time. So, you won't be able to make changes runtime. For that you have create separate configuration json file that can be loaded as soon as the app starts using "APP_INITIALIZER".
I think this stackblitz example will help.
https://stackblitz.com/edit/angular-load-config-on-init

Yes that is very much possible. The best solution i would suggest is
keep your config.json in assets folder. As the assets folder is always copied to the dist folder. So every time you create a build the config.json will be available inside that assets folder under dist.
You can go and edit it as much as you want.
One more approach that you can follow is keep your config.json inside src folder and in your angular-cli.json or angular.json based on the version of cli include it in the assets array. like below
angular-cli.json
"assets": [
"assets",
"favicon.ico",
"config.json"
],
angular.json
"assets": [
"src/favicon.ico",
"src/assets",
"src/.htaccess",
"src/config.json"
],
See for more
Hope this helps :)

If I have understood correctly, there are few configuration parameters that you wish to change based on environment. There are two approaches
Create the config.json file as you described and it should be fetched using HttpClientModule.
You can create a script to hold environment variables. Inside the same script you can build Angular project using custom webpack configuration. You can find detailed explaination at https://www.youtube.com/watch?v=BU5G_i1J5CA
Disclaimer: The video was created by me.

Using cordova, can I use resolveLocalFileSystemURL to access a file that was in my build?

I'm building an app where I need to copy some pdfs that were inside my www folder to the shared device folder (FileEntry.toURL) but I'm not sure where to access these pdfs after my app is on the device.
If I use resolveLocalFileSystemURL, I can specify a file path and then copy that found file to the FileEntry.toURL() folder... but I'm not sure what that file path would be.
My file is located www/media/pdf/TestDocument.pdf - how do I access this file after I have done a build?

Use 1.2.0 of the file plugin. Then you should be able to use cordova.file.applicationDirectory to get at your bundle.