Angular CLI Demo
This demo shows the integration of yFiles for HTML with
Angular CLI
.
How this demo was created
The structure of this demo was created using Angular CLI with the
--minimal
option, which skips scaffolding testing and git integration. Afterwards, the two
TypeScript configuration files
./tsconfig.json
and
./src/tsconfig.app.json
were merged into a single file:
./src/tsconfig.json
. This is so that IDEs like WebStorm and Visual Studio Code can provide better code
completion and error messages, as they only recognize TypeScript configuration files if
their name is exactly
tsconfig.json
(
WebStorm issue
,
VSCode issue
).
Then, two Angular components were created:
ng generate component graph-component
ng generate component properties-view
Integrating yFiles
To include the library css file, it was added to the
styles
array in
angular.json
. The license files can be imported in the
main.ts
file.
The build process uses a custom webpack configuration file with the help of the
@angular-builders/custom-webpack:browser
builder. This allows the use of the
@yworks/optimizer
package in production, and a separate yFiles chunk.
To run and build the app, you can use the regular
ng serve
and
ng build
commands.
App Generator
Use the
App Generator
to create visualization prototypes – quickly and easily.