This example shows how to incorporate the Web Document Viewer into a client-side app built with Angular. The example consists of two parts:
-
A server-side (back-end) ASP.NET Core project that enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements a custom web report storage.
-
An Angular front-end client application.
Perform the following steps to run this example:
-
Open the back-end project solution (ServerSideApp\ServerSideApp.sln) in Visual Studio and run the project.
-
Navigate to the angular-document-viewer folder that is the client part's root folder.
-
Open the console and run the following command to download packages:
npm install -
Run the command to compile and start the client part:
npm start -
Point your browser to http://localhost:4200/ to see the result.
Tip
Make sure that the backend application runs on the port specified in the host setting of the Document Viewer component. For more information, refer to the following help topic: Determine the Host URL.
Before you run the project, verify the DevExpress version. If necessary, upgrade it to the DevExpress version you're currently using. Make sure to use the same version of DevExpress components for both front-end and Back-end applications.
Follow these steps to update the project:
Use the DevExpress Project Converter to upgrade assembly references for the back-end project solution. You can open the project in Visual Studio and navigate to the Menu: Extensions -> DevExpress -> Project Converter. Select the required version and upgrade the project.
Navigate to the package.json file in the angular-document-viewer folder and change all DevExpress script versions to the version you're using on the server side. For instance, if you're using v23.2.3, modify the package.json file as follows:
{
...
"dependencies": {
...
"devexpress-reporting-angular": "23.2-stable",
"@devexpress/analytics-core": "23.2-stable",
"devextreme": "23.2-stable",
"devextreme-angular": "23.2-stable"
},
...
}
Open the angular-document-viewer folder in the console and run the command to download updated packages:
npm install