By Naveen Kumar and Tom Cui 16 March 2020 Techies
SpringBot uses Angular as its client-side framework, which in turn makes use of NodeJS and NPM. Dependencies can be added to Angular project via
package.json, which is a configuration file that informs NPM what and how to install packages from the NPM registry.
File name: package.json
Relative Path: clientside/package.json
Purpose: This file holds various metadata relevant to the project and dependency handling.
Task: Add ThreeJS as a new custom package into your Angular project.
You will be required to interact with the following files to complete this task.
|package.json||Where we will install our new library|
- Locate the following code block:
"//": [ " protected region % [Add custom development dependencies here] off begin " ],
- Turn on the protected region by replacing
- Add these lines below the code block:
"@minininja/threejs": "^1.0.5", "three.js": "^0.77.1",
These version numbers are the latest at the time of writing. Your versions may vary.
package.jsonshould now look like this:
... "//": [ " protected region % [Add custom development dependencies here] off begin " ], "@minininja/threejs": "^1.0.5", "three.js": "^0.77.1", ...
- Open a new terminal and navigate to
npm install --no-save.
- You are now able to use ThreeJS in your application code.
There are a few things to be careful of when adding a new custom package:
npm install <package name>can cause unexpected behaviour with protected regions, such as clearing them. Instead, add the package manually via the steps outlined in this article. This also applies to
npm install --save-dev <package name>.
- Package versions as outlined in the
package.jsonfile are officially supported. Thus any modification to these versions may cause unexpected bugs or errors due to version or dependency conflicts. Instead, try updating your bot version to get the latest versions.
- Due to some limitations of the bot, protected regions in JSON files come in blocks instead of lines like other file types. As such, any modification must be made below the block as outlined in Step 4 of this article.