This project is using Ignite UI for Angular components to demonstrate different scenarios related to the usage of each component. The project is tightly related to Ignite UI DocFX Site Builder. All samples are part of the official component topics from our website.
The project is divided into two separate applications:
-
A
default application, which uses all the igniteui-angular components to demonstrate sample applications -
A
Line of Businessapplication, complemented with UI and functionality from the Ignite UI for Angular Charts and Ignite UI for Angular Excel library.
To setup the project run:
npm install
To build the application project run:
npm run build
To build the application project run:
npm run build:app-lob
These commands will produce an AOT build and live editing samples supporting both Sass and CSS.
To start the application dev server (including IE support) run:
npm run start
To start in modern browsers only, run:
npm run start:es6
To start the application dev server (including IE support) run:
npm run start:app-lob
Starting from Angular v8 the project will not be supported/start in IE due to the new default compilation target es2015.
To generate the live editing applications along with the dev server (including IE support) run:
npm run start:live-editing
To start in modern browsers only, run:
npm run start:live-editing:es6
To generate live editing applications, using only Sass for styling (excluding IE and Edge support) run:
npm run start:live-editing:noCss
To generate the live editing applications along with the dev server (including IE support) run:
npm run start:app-lob:live-editing
To omit CSS styling in the live editing applications:
npm run start:app-lob:live-editing:noCss
All live-editing capabilities are performed by the package, that was previously part of the project.
Live-editing documentation could be found here. If you are interested in how the engine works, read the following section.
One of the most important functionality is the Configurator Generator as each Ignite UI for Angular component has a separate configurations (config) generator - read the following section if you are interested in the actual structure and how to configure it.
Use this command to start the server with capability to regenerate live editing JSON files (e.g. "/src/assets/samples/avatar-sample-3.json") when a change related to the samples is made (including IE support):
npm run start:watch-live-editing
To start in modern browsers only, run:
npm run start:watch-live-editing:es6
To generate only the live editing samples files (e.g. "/src/assets/samples/avatar-sample-3.json") run:
With CSS styling generation
npm run generate-live-editing --css=true
Without CSS styling generation:
npm run generate-live-editing
With CSS styling generation
npm run generate-live-editing --css=true --appDv=true
Without CSS styling generation:
npm run generate-live-editing --appDv=true
In order to combine the execution of both DocFX and Ignite UI Angular Samples projects, use npm run start.
After starting both projects you will see the embed samples into the DocFX site builder, under localhost:port hostname.
Running with custom igniteui-angular build
In order to test a specific branch created in igniteui-angular project with igniteui-angular-samples you have to follow these steps:
In igniteui-angular :
- build the source code with the version/branch you want to test:
npm run build:lib
- copy the builded
igniteui-angularfolder, located in thedistdirectory
In igniteui-angular-samples:
- paste the copied
igniteui-angularfolder in the place of its corresponding folder innode_modulesdirectory