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>
I have been working on updating an old React app from JavaScript to Typescript gradually. I started by migrating the configuration file, but encountered an error when renaming it to .TS. Here is the error message: /Users/xx/yy/lulo/src/adalConfig.ts (13, ...
One of my functions involves taking a map and generating the bijection of that map: export function createBijection(map) { const bijection = {}; Object.keys(map).forEach(key => { bijection[key] = map[key]; bijection[map[key]] = key; }); ...
Currently, I am facing a situation where there are three docker containers involved in my project: - An angular frontend - A Django backend - A Python processing API The scenario is such that a user uploads a file to the backend volume through the fronten ...
I've created a function in my service that looks like this: /** * Retrieve all data * @param sendSelectedValues string */ getAllActPlanBalanceYearData(sendSelectedValues: any): Observable<any> { const url = `/yearlyvalues/act-and ...
In my React application, I have a method that accepts a parameter for displaying a modal. const displayModal = (p:Result) => { setConfirm(true); if(p) { //check variable for truthy setSelectedRow(p); } ...
The process of installing a dependency from the source code on Github instead of using the npm registry is outlined in the npm install docs. This method works smoothly for projects that are not scoped. For example, to install express, you can simply run: ...
Hello everyone, I am a newcomer to GitHub and have some basic questions to ask. Recently, I downloaded the package from https://github.com/jspreadsheet/ce in .zip format for using in my asp.net web application. However, I am not sure how to incorporate the ...
Whenever I try to execute the ionic build android command, it keeps showing me an error message: WARNING: ionic.project has been updated to ionic.config.json, so you need to rename it. Oops! It seems like there's a missing module in your gulpfile: Mo ...
I've been exploring the functionality of Angular Services, and I'm encountering an issue with the heroCounter (number) not updating correctly while the hero array does. When I add a new dummy hero, I expect the heroCounter to increment accordingl ...
Greetings to all TypeScript enthusiasts! Here's a challenge I want to tackle: I aim to establish an interface -- let's name it IShape -- and define several classes (Rectangle, Circle, Triangle) that adhere to the IShape interface. Let's sa ...
I'm developing a front-end application using Angular 5, and I am facing the challenge of implementing a hidden search box that should be displayed and focused when a button is clicked. Although I have explored various solutions from StackOverflow inv ...
Creating d3.axis() or any other d3 object in typescript for a Power BI custom visual and ensuring it displays on the screen - how can this be achieved? ...
I'm currently working on an angular project and facing a challenge in adding multiple children with their age and gender dynamically using reactive forms. Although I can add the form, I am having trouble with the delete functionality as it keeps throw ...
I am currently enrolled in a TypeScript course on Udemy. If you're interested, you can check it out here. import { connect } from 'react-redux'; import { Todo, fetchTodos } from '../actions'; import { StoreState } from '../red ...
Just a typical query appears as follows: this.people = http.get('http://localhost:3000/users') .map(response => response.json()); Is there a method to delay or timeout this? ...
I'm facing an issue with my application: It often occurs that the code is not synchronized with the API call: Service Method Initialize(_idUser: number,_BusinessName: string, _VAT: string, _FiscalCode: string): Customer { var req: ReqCustomerIni ...
As a beginner in Node.js with Angular, I have been working on a simple CRUD application. Adding, deleting, and viewing records works fine for me. However, I am facing issues with updating records. Whenever I make changes on the form and click the submit bu ...
I am looking to develop an NPM package that organizes imports into modules for better organization. Currently, when I integrate my NPM package into other projects, the import statement looks like this: import { myFunction1, myFunction2 } from 'my-pac ...
Issue Description: I encountered an issue while working with typescript and emotion/styled libraries. When attempting to specify the type of the parent component that wraps a styled component, I faced difficulties. The scenario involves a parent componen ...
Experimenting with reactQuery in a demo app showcased in this repository. The app interacts with a mock API found here. Encountering an issue using the useQuery hook to call the following function in the product API file: export const getAllProducts = asy ...