Autodesk Forge serves as a hub for hosting dependencies on a nearby server

Our company has implemented an Angular/TypeScript version of the Forge Viewer, currently loading dependencies from Autodesk's server. To ensure these files are always accessible to our customers, we want to host them on our own servers. However, attempting to host a package extracted using the Autodesk Forge Extractor tool locally revealed it only functions with version 2.10, causing some functionality issues as we require version 2.13.

Moreover, each extracted package contains models and textures, but since we load our models from our servers, we prefer hosting packages containing only specific files, without creating references to the full model or utilizing the extract tool for all our models.

Is there a reliable method to host the dependencies listed below without storing the complete model or mentioning the exact model?

<link rel="stylesheet" type="text/css" href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.css" />
<script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/three.min.js?v=2.13.*"></script>
<script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js?v=2.13.*"></script>
angulartypescriptautodesk-forgeautodesk-viewer

Answer №1

The latest version of the Forge Viewer is 3.1.1 and I recommend using it as there have been significant changes since Version 2.13 and even more from 2.10.

Always make sure to check the Changelogs on the Viewer Developer page here

For a detailed overview of the changes, check out these blog posts:

  • Viewer Release Notes V2.15

  • Viewer Release Notes V2.16

  • Viewer Release Notes V2.17

  • Viewer Release Notes V3.11

Another option would be to download and host the JS and CSS files locally on your server. This way, you can reference them in your project easily.

Copy the source code from the following links and name them appropriately for future reference:

CSS

CSS Stylesheet

JS

Three.js Library Viewer3D.js Library

If needed, you can also retrieve minified versions of the js files by adding "min" before the .js extension. Keep in mind that these files will not update automatically, so manual updating will be required.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to line up a Material icon and header text side by side?

Currently, I am developing a web-page using Angular Material. In my <mat-table>, I decided to include a <mat-icon> next to the header text. However, upon adding the mat-icon, I noticed that the icon and text were not perfectly aligned. The icon ...

htmlcssangulartypescriptangular-material

Ways to address the Generic Object Injection Sink eslint error (security/detect-object-injection)

I am seeking a solution to resolve this issue without needing to deactivate eslint. Moreover, I am eager to comprehend the cause of the error. const getMappedCard = (cardName: CardName) => { const mappedCards = { Mastercard: <Mastercard /> ...

reactjstypescriptnext.jstypescript-eslint

What steps can I take to address the problem in iOS 17 where sound is coming from the earpiece instead of the speaker during camera activation?

I have a Progressive Web App where I use the getUserMedia() API to access the camera and HTML audio tags for handling media content. However, ever since updating to iOS 17, I've faced an issue where audio plays through the earpiece instead of the medi ...

javascripthtmlangularionic-frameworkprogressive-web-apps

Allusion to a intricate data component

In my code, I have a model that is being represented by a class. For example, let's consider the model of a car: export class Car { public name : string; public color: string; public power : number; public service : boolean; } All c ...

javascriptangulartypescript

Setting up the Font Awesome Pro version in Angular using the Font-Awesome package

The process of installing the pro version of Angular Font-awesome began with setting up my registry using these commands: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \ npm config set "//npm.fontawesome.com/:_authTo ...

angularnpmfont-awesome

What is the best way to ensure that the base class Resolver finishes before allowing the derived class Resolver to execute?

I have a situation where many of my resolvers (@angular/router Resolve) need to query the same data before executing their route-specific queries. To streamline this process, I want to create a resolver base class that resolves the initial data before the ...

angulartypescript

Accurately locate all ChildComponents throughout the entire Component hierarchy

I am facing a challenge in Angular where I need to retrieve all the ChildComponents from my ParentComponent. The issue is that the ChildComponents are not directly nested within the ParentComponent, but instead they are children of other components which a ...

angulartypescriptcomponents

What is the best way to generate an object in TypeScript with a variety of fields as well as specific fields and methods?

In JavaScript, I can achieve this using the following code: var obj = { get(k) { return this[k] || ''; }, set(k, v) { this[k] = v; return this; } }; obj.set('a', 'A'); obj.get('a'); // returns &ap ...

typescript

Angular 2 doesn't reflect changes in component variables in the view until mouseover happens

Since updating from angular2-alpha to the latest version, I've noticed that when a boolean value changes in my *ngIf directive, it doesn't reflect in the view until certain actions are taken. Here is the specific component code: declare var CKE ...

javascriptangularckeditor

Responsive Container MUI containing a grid

I am attempting to replicate the functionality seen on YouTube's website, where they dynamically adjust the grid layout based on the container size when a Drawer is opened or closed. Essentially, it seems that YT adjusts the grid count based on the c ...

reactjstypescriptnext.jsmaterial-uiflexbox

Differences between Object and Typecasted Literal Object in TypeScript

I'm currently grappling with the decision of whether to use an interface or a class in my TypeScript code. Coming from a background in C#, I find the strictness of classes appealing, but there is also a certain allure to the flexibility offered by int ...

typescript

Tricks for simulating e.preventDefault in Angular

Creating Test Cases for a Method <input type="number" min="10" max="100" (keydown)="checkLength1($event,inputNumber)"#inputNumber/> ts file checkLength1(e: { key: string | number; keyCode: number; preventDef ...

angularunit-testing

Is it possible to efficiently structure intricate JSON data onto interfaces in TypeScript with the incorporation of observables?

I am currently working on creating a simple web news reader that relies heavily on the Google News API (). I have set up all the necessary services, models, etc. However, I am having difficulty mapping the data onto specific interfaces. The Google API retu ...

angulartypescriptrestgoogle-news

Utilizing Angular's directive-based *ngIf syntax instead of passing a string parameter

Currently, I'm studying the article on reactive forms by PluralSight to brush up on my knowledge and I'm having trouble understanding the syntax provided below. <div *ngIf courseForm.get('courseName').valid && courseForm.get ...

htmlangularformsdirectiveangular-ng-if

Gatsby website failing to create slugs as anticipated

While trying to follow the Gatsby tutorial, I ran into an issue with generating slugs for MDX files in a subdirectory of src/pages. For instance, if I have a file like src/pages/projects/devmarks/index.md, the expected slug according to the tutorial should ...

typescriptgatsbysluggatsby-plugin-mdx

Combining Posts and Redirects in Angular 2

Is it possible to post data and redirect to a page simultaneously? I can successfully post the data, but I am unable to redirect to the desired page without redirection in the success of the post. return this._http.post('/Tickets/Search', &apos ...

angularangular2-routingangular-cli

Block-level declarations are commonly used in TypeScript and Asp.net MVC 5

In my asp.net mvc5 project, I decided to incorporate TypeScript. I created an app.ts file and installed the nuget-package jquery.TypeScript.DefinitelyTyped. Here is a snippet of the app.ts code: /// <reference path="typings/jquery/jquery.d.ts"/> cl ...

javascriptc#asp.net-mvc-5typescript

TypeScript does not raise errors for ANY variables that are initialized later

In my code, there is a function that accepts only numeric variables. function add(n1: number) { return n1 + n1; } However, I mistakenly initialized a variable with type "any" and assigned it a string value of '5'. let number1; number1 = &apo ...

javascripttypescript

find the element in cypress with multiple child elements

Looking for a way to target the first HTML element that contains more than 2 children. Another option is to access the children elements of the first parent element. <div class="market-template-2-columns"> <button type="button&q ...

typescriptcypress

Receive regular updates every week for an entire month using Javascript

How can I calculate the number of check-ins per week in a month using Javascript? I have been unable to find relevant code for this task. Specifically, I am interested in determining the total count of user check-ins on a weekly basis. For example, if a u ...

javascriptnode.jstypescript