Custom Map Data

import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxVectorMapModule } from 'devextreme-angular'; import { FeatureCollection, Service } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [ Service ], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { pangaeaBorders: FeatureCollection; pangaeaContinents: FeatureCollection; projection: any; constructor(service: Service) { this.pangaeaBorders = service.getPangaeaBorders(); this.pangaeaContinents = service.getPangaeaContinents(); this.projection = { to(coordinates) { return [coordinates[0] / 100, coordinates[1] / 100]; }, from(coordinates) { return [coordinates[0] * 100, coordinates[1] * 100]; } }; } customizeLayer(elements) { elements.forEach(function (element) { element.applySettings({ color: element.attribute("color") }); }); }; } @NgModule({ imports: [ BrowserModule, DxVectorMapModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);

::ng-deep #map-container { height: 570px; }

import { Injectable } from '@angular/core'; export class FeatureCollection { type: string; features: Feature[]; } export class Feature { type: string; properties: FeatureProperty; geometry: FeatureGeometry; } export class FeatureProperty { name: string; color?: string; } export class FeatureGeometry { type: string; coordinates: number[][][]; } let pangaeaBorders: FeatureCollection = { type: "FeatureCollection", features: [{ type: "Feature", properties: { name: "Pangaea" }, geometry: { type: "Polygon", coordinates: [ [ [-28,86.33],[-28,88],[-27.33,89.67],[-25.67,91.67],[-21.33,93.67],[-15,95.67],[-7.67,98.67],[-4.67,99.33],[-1,99.33],[4.67,99],[9.33,97.33],[13.33,96],[19,96],[25.33,95],[29.33,93],[34.67,91.67],[41.67,89.33],[45.33,88.67],[48.67,85.67],[52,82.33],[55.67,79.67],[60.67,75.67],[64,71.67],[64.67,70.67],[65.67,68.33],[66.33,67.33],[67,66.33],[69,65],[72,63.33],[75.33,61],[78.33,58.33],[80.33,56],[81.67,53],[84,50],[84.67,48],[84.67,46.67],[82.33,47.67],[81,48.33],[80.33,48.33],[79.67,47.67],[80.33,45],[82.33,43.33],[85,40.67],[87.33,38.67],[90,36.67],[92,35.67],[92,36.33],[91,38],[90,39.67],[93.33,40],[96.67,39.67],[97.67,39],[98.67,37.67],[99.33,36.33],[102,25],[101.67,23],[99.33,22],[96.33,22.67],[93.33,25],[92,27],[90.33,28],[89.33,30.33],[89.33,32],[90.33,32.67],[91.33,33.33],[89,35],[84.33,38],[81.67,40],[79.33,41.67],[77.67,43.33],[75.67,45],[74,46.67],[72.67,49],[70.67,50],[67.67,50.67],[64.67,50.67],[62,50.33],[59.67,49.33],[56.67,46.33],[54.33,44],[54.33,41.33],[51.67,38],[50,35.67],[48.33,33.67],[48.33,32.33],[42.33,31.33],[37.67,31.67],[35.67,32],[30.33,31],[26.33,30.33],[22,31.67],[17,33.33],[13,32.67],[11.67,32],[10,30],[8,26.67],[8,23],[8,20],[8.67,19.33],[9.33,18],[9.33,15.33],[11.33,12.67],[12.67,10.67],[15.33,8.67],[19,6],[24,4.67],[26,4.67],[37.67,4.33],[40.67,1.67],[40.67,0.33],[40.33,-1.33],[40.67,-3],[41.67,-4.33],[41.67,-5.33],[40.33,-6.67],[39,-9.33],[38,-10.67],[37.33,-14],[38.67,-17],[42.33,-18.67],[44.33,-19],[47,-19],[48.67,-18.67],[50.33,-19.67],[50.33,-21],[48,-21.33],[47,-22.67],[46,-24.33],[45,-26.33],[46.33,-26.67],[49,-27.67],[51,-28],[53.33,-30.33],[54.33,-33.67],[55,-34.67],[53.67,-36.33],[52,-40.33],[51.33,-42.33],[52,-43.67],[54,-45.33],[54.33,-46],[54.67,-47.33],[55,-48.67],[57.33,-50],[60,-51.33],[62,-52.33],[64.33,-53.67],[64.67,-54],[65.33,-55.67],[66.67,-57.33],[68,-58.33],[69.33,-58],[71,-57.67],[71.67,-59.67],[72.67,-62],[73,-64.33],[73,-66.33],[72.33,-68.67],[71.67,-70],[71,-71.33],[71.67,-73.67],[72.67,-75],[72.67,-77],[71.33,-80],[68.67,-81.67],[65.67,-84.67],[64.33,-85.67],[60.67,-88],[58,-89.67],[55.67,-91],[52.33,-92],[49,-92.67],[47.67,-93.67],[46,-94.67],[44,-96],[39,-96.67],[37.33,-96.67],[34.67,-97],[32,-97.67],[32.33,-98.67],[28.67,-99.67],[23.67,-99.33],[21.67,-99.33],[22.33,-97.33],[22,-96.33],[21,-95.67],[19.67,-95.33],[18.67,-94.67],[17.67,-94],[18.67,-92.67],[19.67,-91],[19.67,-89.67],[19.67,-87.67],[15,-89.33],[12.33,-89.33],[9,-88.67],[4.33,-86.67],[-0.67,-85],[-4,-83.67],[-3.67,-82],[-2,-78.33],[-4.33,-78.33],[-7.33,-75.33],[-8.67,-74],[-11,-73],[-13,-73.33],[-15,-73.33],[-17.33,-74.67],[-15.67,-76.67],[-14.67,-77.33],[-14.67,-78.33],[-16.33,-79],[-18.67,-80],[-20.33,-79.67],[-26,-73],[-33,-66.67],[-33.33,-61.67],[-33.33,-57.33],[-33.33,-55],[-33.67,-52.67],[-35,-50.67],[-37.33,-48.33],[-39.67,-46.67],[-42.33,-45],[-43,-44.67],[-45,-44],[-46.33,-42.33],[-46.67,-41.67],[-49,-41],[-50.33,-41],[-51.67,-40.67],[-52,-39],[-52.33,-38],[-52.67,-37.33],[-53.33,-36.67],[-54.67,-36],[-56.33,-36],[-57,-35.67],[-57.67,-34.67],[-57.67,-33.33],[-57,-31.67],[-56.67,-29.67],[-56.33,-29.33],[-56.67,-27.33],[-57.33,-25.67],[-57.67,-24.33],[-56.33,-23.67],[-55.33,-23],[-55,-21.67],[-55.67,-19.33],[-57,-18.33],[-60.33,-18.33],[-62.33,-17],[-63.33,-16.33],[-62,-15],[-58.67,-15.33],[-56.33,-15],[-53.33,-13.67],[-51.67,-11.33],[-51.33,-10.67],[-52,-8.33],[-53.33,-5.33],[-55.67,-3.67],[-58.33,-2.67],[-59.67,-2.67],[-60.67,-1.67],[-61,0],[-60.33,0.67],[-59.33,3],[-59.33,4.33],[-59.33,6.33],[-60.33,10],[-62,12],[-63.67,14],[-64,15],[-63,18.67],[-61.67,21.67],[-60,25.67],[-57.33,32],[-55.67,35.67],[-55,38.33],[-54,42],[-54.33,44],[-54.33,45],[-54,46.33],[-53.67,47.67],[-55,48.67],[-57,49.67],[-59.33,50],[-61.33,51],[-62.67,51.33],[-63.33,52.33],[-61.67,54],[-61.67,56.67],[-60,58],[-57.33,60],[-55.67,61.67],[-52,61.67],[-50.33,63.67],[-45.67,63],[-42.67,62.67],[-40.67,62.33],[-39.33,64],[-37.67,66],[-36.67,67],[-35,67.33],[-32,67],[-30.33,66],[-27.67,64],[-25.33,63.33],[-23.33,63.67],[-21.33,64],[-19.33,64.33],[-17,63.67],[-14.67,62.33],[-12.33,61],[-9.33,61],[-8.33,63.67],[-9,67],[-10.33,70.33],[-14,73],[-15.33,73],[-16.67,74],[-17,76],[-18.67,78.33],[-20.67,79],[-22.67,79],[-25.67,79],[-28.67,78],[-30.33,77],[-31.67,76],[-33.33,77],[-34.67,79.67],[-34,81],[-32.67,82],[-32,83.67],[-32.67,85.67],[-32.67,86.67],[-31,87],[-28.33,86.67] ] ] } }] }; let pangaeaContinents: FeatureCollection = { type: "FeatureCollection", "features": [{ type: "Feature", properties: { name: "Eurasia", color: "#70b3a1" }, geometry: { type: "Polygon", coordinates: [ [ [-28.33,86.67],[-27.33,85],[-26.33,84.33],[-24.33,83.67],[-22.67,84],[-21.33,85],[-20.33,86.33],[-18.33,86.33],[-15.67,86.33],[-13,86.67],[-10.33,86.67],[-7,86.33],[-3.67,86.67],[-2,87.67],[-0.67,88.67],[-2,88.67],[-3.33,89],[-5.67,90.33],[-7,91.33],[-5.67,92.33],[-2,93.33],[2,93.33],[7.67,92.67],[10.67,92.67],[16.33,92],[20.33,92],[24.67,92],[26.67,92],[27.67,91.33],[28,90.33],[27,89.33],[26.67,88],[27.33,86.67],[29,85.67],[37.33,85.67],[38.67,84.33],[41.33,83],[42,84.33],[43.33,84.33],[47.33,82],[50.67,80.33],[55.67,79.67],[60.67,75.67],[64,71.67],[64.67,70.67],[65.67,68.33],[66.33,67.33],[67,66.33],[69,65],[72,63.33],[75.33,61],[78.33,58.33],[80.33,56],[81.67,53],[84,50],[84.67,48],[84.67,46.67],[82.33,47.67],[81,48.33],[80.33,48.33],[79.67,47.67],[80.33,45],[82.33,43.33],[85,40.67],[87.33,38.67],[90,36.67],[92,35.67],[92,36.33],[91,38],[90,39.67],[93.33,40],[96.67,39.67],[97.67,39],[98.67,37.67],[99.33,36.33],[102,25],[101.67,23],[99.33,22],[96.33,22.67],[93.33,25],[92,27],[90.33,28],[89.33,30.33],[89.33,32],[90.33,32.67],[91.33,33.33],[89,35],[84.33,38],[81.67,40],[79.33,41.67],[77.67,43.33],[75.67,45],[74,46.67],[72.67,49],[70.67,50],[67.67,50.67],[64.67,50.67],[62,50.33],[59.67,49.33],[56.67,46.33],[54.33,44],[54.33,41.33],[51.67,38],[50,35.67],[48.33,33.67],[48.33,32.33],[42.33,31.33],[37.67,31.67],[35.67,32],[30.33,31],[26.33,30.33],[22,31.67],[17,33.33],[13,33],[13.67,34.67],[15,37.67],[15.33,40],[14.33,41.33],[11.67,41.67],[8.67,43.33],[8,45],[6,44.67],[6.67,41.67],[7.67,39.33],[8.33,35.67],[9,32.33],[9.33,29.67],[7.67,32.67],[6,34.67],[3.67,36],[2.33,36.33],[1.67,37.33],[1.67,39],[2.33,40.33],[2.33,42.67],[2,44.67],[2,46.33],[2,47.33],[3,48.33],[4,49.33],[6.33,49.33],[7.67,49.67],[9,50],[8.67,49],[8.67,47.67],[10.67,47.67],[13,47.67],[15.33,48.33],[17,49.33],[14,50.67],[12.33,51.67],[12,52.33],[12,54],[12,55.33],[9,55.33],[6.33,56],[4,56.67],[2.33,57.67],[3,58.67],[2.67,60.67],[4.67,59.33],[6,58.33],[7.67,57.33],[9.67,56.33],[11.67,56.33],[12,57.33],[11.67,58.67],[11.67,59.67],[12.67,60],[14.33,61],[13.33,62.67],[11.67,63.33],[10.33,63.33],[7.67,63.67],[7.67,65],[6,66],[3,67],[-0.33,67.67],[-2.33,67.67],[-5,68.67],[-3.67,69.67],[-0.67,71.33],[-0.67,73],[-2.33,74],[-4.67,75],[-5.33,75.33],[-5.67,77],[-6.33,78],[-8.67,78],[-11.33,77.33],[-17,76],[-18.67,78.33],[-20.67,79],[-22.67,79],[-25.67,79],[-28.67,78],[-30.33,77],[-31.67,76],[-33.33,77],[-34.67,79.67],[-34,81],[-32.67,82],[-32,83.67],[-32.67,85.67],[-32.67,86.67],[-31,87],[-28.33,86.67] ] ] } }, { type: "Feature", properties: { name: "Australia", color: "#bb626a" }, geometry: { type: "Polygon", coordinates: [ [ [64.67,-54],[65.33,-55.67],[66.67,-57.33],[68,-58.33],[69.33,-58],[71,-57.67],[71.67,-59.67],[72.67,-62],[73,-64.33],[73,-66.33],[72.33,-68.67],[71.67,-70],[71,-71.33],[72,-74],[70,-74.33],[67.33,-76],[64,-79.67],[61,-82.67],[64.67,-85.33],[64.67,-85.67],[60.67,-88],[58,-89.67],[55.67,-91],[52.33,-92],[49,-92.67],[47.67,-93.67],[46,-94.67],[44,-96],[39,-96.67],[37.33,-96.67],[34.67,-97],[32,-97.67],[31.33,-96],[31,-95],[31.33,-93.67],[32.33,-91.67],[33.33,-91],[33.33,-90],[36,-87.33],[39,-85],[42,-81.67],[45.33,-79.33],[47.67,-78],[49.67,-75],[50.33,-72.33],[50.33,-68.67],[50.33,-66],[51,-63.67],[55.33,-60.33],[58.67,-57.33],[61.33,-55] ] ] } }, { type: "Feature", properties: { name: "Antarctica", color: "#057d85" }, geometry: { type: "Polygon", coordinates: [ [ [50.33,-66],[50.33,-68.67],[50.33,-72.33],[49.67,-75],[47.67,-78],[45.33,-79.33],[42,-81.67],[39,-85],[36,-87.33],[33.33,-90],[32.67,-89.33],[30.33,-87.67],[28.67,-86.67],[27,-84.67],[23.67,-84.33],[19.33,-87.33],[19.67,-87.67],[15,-89.33],[12.33,-89.33],[9,-88.67],[4.33,-86.67],[-0.67,-85],[-4,-83.67],[-3.67,-82],[-2,-78.33],[-4.33,-78.33],[-7.33,-75.33],[-8.67,-74],[-10.33,-71.67],[-7.67,-71.67],[-4.33,-71.67],[-0.67,-72.33],[1.67,-73],[3.67,-73.33],[5.33,-73.33],[6.33,-72.67],[7,-70.33],[7.33,-66.67],[8,-63.33],[9,-61],[10.67,-58.67],[14.33,-57],[19.33,-54.67],[24.33,-53.67],[29.67,-52.33],[34.33,-51],[35.33,-51],[36.67,-51],[38,-51.67],[39.33,-53.67],[39.67,-55.33],[39.67,-56.67],[40.33,-58.33],[42,-58.33],[44.33,-58],[47,-58.33],[49.33,-59.33],[50.67,-61.33],[51,-62] ] ] } }, { type: "Feature", properties: { name: "Africa", color: "#ab394b" }, geometry: { type: "Polygon", coordinates: [ [ [7.67,-61.67],[3.33,-61.67],[0.67,-63.67],[-2,-65],[-5.33,-65.67],[-9.33,-66],[-12,-65.33],[-13.33,-64.33],[-13.67,-63.33],[-13.67,-62.33],[-12.33,-61.33],[-11,-58.67],[-10.33,-56.67],[-10,-54.67],[-10,-53],[-10.33,-50],[-11,-48],[-11.33,-47],[-11.33,-46.33],[-11.33,-45.33],[-9.33,-43.67],[-7,-41],[-5,-38.67],[-4.33,-37],[-3.67,-35.33],[-3.67,-33.33],[-4,-31.67],[-4.33,-30],[-3.67,-28.33],[-3.33,-26.33],[-3,-25.33],[-3.67,-23.67],[-5,-22.67],[-7,-21],[-8,-19.33],[-9.33,-17],[-9.67,-15.67],[-11,-14.33],[-14,-13.67],[-16.67,-14],[-20.33,-12.67],[-21.33,-11.33],[-22.33,-7.33],[-24.33,-3.33],[-24.67,-0.67],[-23.33,2],[-21,5.33],[-18.33,6.33],[-15.33,8],[-11.67,10.33],[-8.67,12.33],[-5.33,13],[-2,13],[0,12.67],[2.67,11.33],[5,10.33],[8,9.33],[9.67,8.67],[10.33,7.67],[10,6.67],[8.67,5.67],[9.67,4.33],[11.33,2.33],[13,0.67],[15.33,0],[16.67,0],[16.67,1.67],[17.67,1.33],[19,0.33],[21,-1],[23.33,-1.67],[25.67,-1.67],[28.33,-2],[27.67,-3.67],[27.33,-5.67],[27,-8.33],[28,-11],[29,-14.33],[30.67,-19],[33,-25.67],[33,-26.33],[33.67,-27.33],[34.67,-28.33],[35.67,-28.33],[36.67,-28.33],[38.67,-28],[40,-28],[41,-28.33],[40.67,-30],[39,-32.67],[36.67,-34.67],[34.67,-36],[31.67,-38],[27.67,-39.33],[24.67,-42],[23.33,-43.33],[22.33,-45.33],[21.67,-47.33],[22,-48.67],[21.67,-50.67],[19.33,-52.33],[16,-55],[14.33,-57],[10.67,-58.67],[9,-61],[8,-63.33] ] ] } }, { type: "Feature", properties: { name: "South America", color: "#dac599" }, geometry: { type: "Polygon", coordinates: [ [ [-51.33,-10.67],[-46.67,-10.67],[-43,-11.33],[-35.33,-12.67],[-35.33,-14.33],[-34.67,-15],[-32.67,-15],[-29,-15.67],[-27,-17.33],[-25.33,-19],[-24.33,-19.67],[-21.67,-20],[-17.67,-20.33],[-13.33,-20.33],[-11,-22],[-9.33,-24.33],[-8.67,-27],[-9,-29.33],[-10,-31.33],[-10.33,-33.67],[-10.33,-36.33],[-11,-39],[-13.33,-42.67],[-15.33,-45],[-16.33,-47.33],[-16.67,-50.33],[-17.33,-53],[-17,-54],[-17.67,-55],[-19.33,-56],[-20.33,-57],[-20.67,-57.67],[-20,-60],[-19,-61.33],[-20.33,-62.67],[-22,-64],[-22,-65.67],[-21.67,-67],[-21.33,-67.33],[-22.33,-68],[-22.67,-69],[-21.67,-70],[-20,-72],[-19.33,-74],[-17.33,-74.67],[-15.67,-76.67],[-14.67,-77.33],[-14.67,-78.33],[-16.33,-79],[-18.67,-80],[-20.33,-79.67],[-26,-73],[-33,-66.67],[-33.33,-61.67],[-33.33,-57.33],[-33.33,-55],[-33.67,-52.67],[-35,-50.67],[-37.33,-48.33],[-39.67,-46.67],[-42.33,-45],[-43,-44.67],[-45,-44],[-46.33,-42.33],[-46.67,-41.67],[-49,-41],[-50.33,-41],[-51.67,-40.67],[-52,-39],[-52.33,-38],[-52.67,-37.33],[-53.33,-36.67],[-54.67,-36],[-56.33,-36],[-57,-35.67],[-57.67,-34.67],[-57.67,-33.33],[-57,-31.67],[-56.67,-29.67],[-56.33,-29.33],[-56.67,-27.33],[-57.33,-25.67],[-57.67,-24.33],[-56.33,-23.67],[-55.33,-23],[-55,-21.67],[-55.67,-19.33],[-57,-18.33],[-60.33,-18.33],[-62.33,-17],[-63.33,-16.33],[-62,-15],[-58.67,-15.33],[-56.33,-15],[-53.33,-13.67],[-51.67,-11.33] ] ] } }, { type: "Feature", properties: { name: "North America", color: "#153459" }, geometry: { type: "Polygon", coordinates: [ [ [-57.67,50],[-57,52],[-56.67,53],[-57,54.67],[-56.67,55.33],[-55.33,55.67],[-53.67,56],[-52,56.33],[-50.67,57.33],[-49.67,58.67],[-48.33,59],[-46.67,59],[-45.33,59.67],[-43.67,60],[-42.33,59],[-41.67,57.33],[-42.33,55.33],[-43,53.67],[-41.33,52.67],[-42,51.67],[-41.33,50],[-40,48.67],[-39,48],[-37.33,47.67],[-35.33,50.33],[-34,47],[-32,45],[-32.67,43.33],[-32,42.67],[-28,41.67],[-25,38],[-30.67,34.33],[-31.67,33.33],[-32.33,32],[-32,30],[-31,27.67],[-29,25.67],[-27.67,24.33],[-26.67,22.67],[-25,22.67],[-23,23.67],[-22,25.33],[-21.67,27],[-21.67,28.67],[-21.33,30.33],[-20.33,31.33],[-19.33,31.67],[-17.33,31.67],[-15.67,31],[-14,29.67],[-12,27.67],[-10.33,25],[-9.67,22.67],[-12.33,22.33],[-13.33,21.67],[-14.33,20.33],[-14.67,19],[-14,17],[-17.33,15.33],[-19,13.67],[-20,11],[-22,10.33],[-24.67,7.33],[-26.33,5],[-29,2.33],[-30.33,1],[-31,0],[-29.33,-2],[-29,-3.67],[-31.67,-4],[-32.33,-2.33],[-33.33,-1],[-35,-0.33],[-36.33,-0.33],[-38.67,-3],[-40.67,-3.33],[-43,-3.33],[-44.67,-3.33],[-46,-4.67],[-46.33,-6.33],[-46.67,-8],[-46.33,-10],[-46.67,-10.67],[-51.33,-10.67],[-52,-8.33],[-53.33,-5.33],[-55.67,-3.67],[-58.33,-2.67],[-59.67,-2.67],[-60.67,-1.67],[-61,0],[-60.33,0.67],[-59.33,3],[-59.33,4.33],[-59.33,6.33],[-60.33,10],[-62,12],[-63.67,14],[-64,15],[-63,18.67],[-61.67,21.67],[-60,25.67],[-57.33,32],[-55.67,35.67],[-55,38.33],[-54,42],[-54.33,44],[-54.33,45],[-54,46.33],[-53.67,47.67],[-55,48.67],[-57,49.67] ] ] } }, { type: "Feature", properties: { name: "India", color: "#b1d2c6" }, geometry: { type: "Polygon", coordinates: [ [ [44.67,-26.33],[45,-26.33],[46.33,-26.67],[49,-27.67],[51,-28],[53.33,-30.33],[54.33,-33.67],[55,-34.67],[53.67,-36.33],[52,-40.33],[51.33,-42.33],[52,-43.67],[54,-45.33],[54.33,-46],[54.67,-47.33],[55,-48.67],[57.33,-50],[60,-51.33],[62,-52.33],[64,-53.33],[61.33,-55],[58.67,-57.33],[55.33,-60.33],[51,-63.67],[51.33,-62.33],[51,-62],[50.67,-61.33],[49.33,-59.33],[47,-58.33],[47.33,-57.67],[47.67,-57.33],[49,-56],[50.67,-55],[51.67,-54],[49,-53.33],[46.33,-52.67],[42.67,-52.33],[39.67,-53.33],[39.67,-53.67],[38,-51.67],[36.67,-51],[35.33,-51],[34.33,-51],[29.67,-52.33],[28.67,-52.33],[30,-51.33],[31.33,-49],[33.33,-46.33],[35,-43],[37.33,-41],[40,-39.67],[40.67,-39],[41,-38],[40.33,-36.33],[36.67,-34.67],[39,-32.67],[40.67,-30],[41,-28.33],[41.33,-28] ] ] } }] }; @Injectable() export class Service { getPangaeaBorders(): FeatureCollection { return pangaeaBorders; } getPangaeaContinents(): FeatureCollection { return pangaeaContinents; } }

// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.4.5/lib/typescript.js', '@angular/core': 'npm:@angular/core@8.0.0/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@8.0.0/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@8.0.0/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@8.0.0/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@8.0.0/bundles/platform-browser-dynamic.umd.js', '@angular/router': 'npm:@angular/router@8.0.0/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@8.0.0/bundles/forms.umd.js', '@angular/common/http': 'npm:@angular/common@8.0.0/bundles/common-http.umd.js', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs@6.3.3', 'rxjs/operators': 'npm:rxjs@6.3.3/operators', 'devextreme': 'npm:devextreme@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', 'devextreme-angular': 'npm:devextreme-angular@19.2' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'rxjs': { main: 'index.js', defaultExtension: 'js' }, 'rxjs/operators': { main: 'index.js', defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>