Currently in the process of migrating an app from Angular 2 to Angular CLI
Now facing the challenge of importing 3rd party libraries like orbitcontrols.js that are not available on npm or bower.
After researching on https://github.com/angular/angular-cli/wiki/3rd-party-libs, it seems straightforward to import libraries supported by npm.
How can other libraries be imported?
Is it even possible?
Versions:
angular-cli 1.0.0-beta.9
Indeed, the answer is mostly yes, with a caveat depending on the use of libraries. Angular-cli may encounter some difficulties when integrating third-party libraries. While awaiting a proper fix, I can provide a workaround. Suppose you wish to utilize _ from lodash in your code. Here is a working example:
In order to install lodash:
npm install lodash --save
typings install lodash --ambient --save
Prior to that, ensure typings are installed globally:
npm install typings -g
Next, in your angular-cli-build.json file, maintain the following structure:
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
...
'lodash/**/*.js'
]
});
};
Furthermore, in your system-config.ts file:
/** Map relative paths to URLs. */
const map: any = {
'lodash': 'vendor/lodash/lodash.js'
};
/** User packages configuration. */
const packages: any = {
'lodash': {
format: 'cjs'
}
};
In your src/index.html, add this line (a peculiar fix):
<script src="/vendor/lodash/lodash.js" type="text/javascript"></script>
Now, in the component where you intend to use lodash, follow this approach:
declare var _:any;
@Component({
})
export class YourComponent {
ngOnInit() {
console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
}
}
This method has proven successful for me :). I have incorporated numerous third-party libraries into my angular2 project using angular-cli. Hopefully, it will also benefit you.
Edit:
If npm is unavailable for your third-party libraries, create an assets folder within your src directory. Inside, include separate folders for js, css, and images. Place your third-party js files in the js folder. Then reference the js file in your index.html as follows:
<script src="assets/js/your_js.js"></script>
Upon running ng build or ng serve, the public folder will be automatically updated with your assets/js. I hope this clarifies the entire process :)
I have limited knowledge of orbitcontrols.js, but I assume it functions as a global object.
It is recommended to store the file in the public directory that is automatically generated by the CLI. To keep things organized, consider placing it in public/js/orbitcontrols.js.
You can then link this js file in your index.html file like so:
<script src="js/orbitcontrols.js"></script>
Encountering a puzzling issue with System JS while experimenting with Angular 2. Initially, everything runs smoothly, but at random times, System JS struggles to locate modules... An error message pops up: GET http://localhost:9000/angular2/platform/bro ...
Problem Description: I am utilizing Artifactory for my NPM packages. When attempting to install them on "Windows - 7", everything is functioning correctly. However, on "Windows - 10" an error is being displayed and the packages are not installing. Error M ...
In my React project created using Create-React-App, I have included the following packages (relevant to the issue at hand): "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "typescript": "^3.9.2", "@typ ...
Currently, I am using lerna to develop multiple UI packages. In my project, I am enhancing @material-ui/styles within package a by incorporating additional palette and typography definitions. Although I have successfully integrated the new types in packag ...
I am currently experiencing an issue within my project. When assigning an object to ngStyle in a div, the problem arises where ngStyle does not clear the style properties from the previous object when there is a change in the object. It should ideally rem ...
In order to access the instance of AsyncLocalStorage globally across different modules in my Express application, I have implemented a Singleton class to hold the instance of ALS. However, I am wondering if there might be a more efficient way to achieve th ...
I am looking to upgrade the outdated dependencies in my Angular 2 project. Upon running npm outdated, I identified several dependencies that need updating. However, when I attempt to update them using the npm update command, it does not seem to work as exp ...
After creating a brand new vite project by running npm install vite@latest, selecting React and Javascript + SWC as options, then executing npm install, I encountered an issue while trying to run the command npm run dev. npm does not support Node.js v15.5. ...
Looking for help with aligning elements in this code snippet: <TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" /> <IconButton aria-label="delete&q ...
I'm currently working on Git Bash on my Windows 10 machine. The command I used was: npm install --save @angular/cli@latest Here is the result: + @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad9d6d3fa8b899488 ...
Is there a way to dynamically convert object1 into object2, considering that the keys like 'apple' and 'water' inside the objects are not static? const object1 = { apple:[ {a:''}, {b:'&apos ...
I encountered a problem while using Laravel and Vue. After attempting to compile everything with npm run watch, I started receiving the following error messages: It seems that additional dependencies need to be installed. Please wait a moment. Running: y ...
I am attempting to improve performance by using cdkVirtualScroll with mat-select. <mat-select formControlName="name"> <cdk-virtual-scroll-viewport itemSize="42" [style.height.px]="5*42"> <mat-option ...
With Testcafe, I have the capability to simulate the response of a request successfully. I am interested in setting up a caching system for all GET/Ajax requests. The current setup functions properly when the URL is already cached, but it fails to prov ...
Recently, while working on a project I inherited, I encountered an issue with the build command. Specifically, I was trying to compile a version other than 'Production' without success. I tried adjusting the alias in the script section of the pa ...
There are some issues with installing certain packages that rely on https://www.npmjs.com/package/fibers, such as iron-meteor. The homepage of fibers advises meteor users to take a specific action, but it may not be very helpful. One suggestion provided ...
I am currently utilizing Spring Boot in combination with Angular 4. The issue I am facing involves uploading an image to the project location. However, upon attempting to view the uploaded image, it does not display correctly and instead throws an error. H ...
I need help formatting the date below to MM-DD-YYYY format in my Angular 6 project. I've checked out various solutions on SO and other websites, but so far, none have worked for me. Currently, I am using Material's Angular DatePicker component. ...
Currently, I am working with Angular 8 and facing an issue while trying to iterate data using *ngFor. It seems like the values are not being displayed in the view. Below is the code snippet that I'm working with: HTML <div *ngFor='let data ...
I need to retrieve an array of user objects from a non-observable array of usernames (string[]). I am looking for a method that can fetch each user object through getUser(username) (HTTP GET request from Angular in-memory web API) for each provided usernam ...