Angular

Simple Angular typescript project. It demonstrates how to add Viewer module to angular project. Also added simple functionality.

This project was generated with Angular CLI version 13.2.0

• Components

  • Viewer - represents 3d Viewer with simple controls (src/app/viewer);
  • Gallery - represents gallery with several models which can be loaded by the Viewer (src/app/gallery).

• Services:

  • Viewer - creates a singleton instance of service which responses for creating 3d Viewer and canvas element. This approach allows to create Viewer only once (src/app/viewer/viewer.service.ts).

• Data:

  • src/app/viewer/viewer.canvas.ts - contains settings of canvas container.

• Assets:

  • Contains static files used by application (src/assets).

Configure custom Angular application to use Viewer

• Add alias for occviewer path to tsconfig.json ("compilerOptions.paths["occviewer/*"]").
  If you have another location of Viewer package (e.g. path to package.json) please provide that location instead of compilerOptions.paths["occviewer/*"] value.

• Add assets paths to angular.json to copy Viewer source directories to build directory. For Example:
  assets: [ ..., {"glob": "**/*","input": "../../../work/install/viewer-wasm","ignore": ["**/3rdparty/**",**/3rdparty_cpp/**","**/samples/**","**/scripts/**"],"output": "/viewer/"}]

• Add "Cross-Origin-Embedder-Policy": "require-corp", "Cross-Origin-Opener-Policy": "same-origin" headers to the dev server config.
  They are necessary for Viewer working in multithreading mode. For production mode also necessary https connection. In other case Viewer will work in single threading mode.
  You can add these headers to angular application using custom-webpack.config.js file and install @angular-devkit/build-angular dev dependency; also modify angular.json to use @angular-builders/custom-webpack builder.

Project setup

Be sure that you have Viewer package data and please check path (compilerOptions.paths["occviewer/*"]) in tsconfig.json, also assets section in angular.json.

Development server

You can install angular/cli (command ng below) using NPM:

npm install -g @angular/cli
npm i -D @angular-builders/custom-webpack
Copy

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.