首先，在Angular项目中安装Highcharts和Highcharts-angular模块，然后创建Highcharts图表组件并在模板中使用它。接下来，通过调用Highcharts.chart()方法来创建图表实例，并在图表配置对象中定义X-Range系列类型和配置。示例代码如下：

在app.module.ts中导入Highcharts和Highcharts-angular模块：

import * as Highcharts from 'highcharts';
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  imports: [
    HighchartsChartModule // 导入Highcharts-angular模块
  ],
  ...
})
export class AppModule { }

在组件中创建Highcharts图表，并在模板中使用它：

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'my-app',
  template: `
    
  `
})
export class MyComponent {
  Highcharts = Highcharts; // 定义Highcharts对象

  chartOptions = {
    chart: {
      type: 'xrange' // 定义X-Range系列类型
    },
    title: {
      text: 'X-Range series example'
    },
    xAxis: {
      type: 'datetime'
    },
    yAxis: {
      title: ''
    },
    tooltip: {
      pointFormat: '{point.title}
{point.x:%e %b %Y} - {point.x2:%e %b %Y}'
    },
    series: [{ // 定义X-Range系列数据
      name: 'X-Range data',
      data: [{
        x: Date.UTC(2018, 1, 1),
        x2: Date.UTC(2018, 2, 15),
        title: 'Task 1'
      }, {
        x: Date.UTC(2018, 2, 5),
        x2: Date.UTC(2018, 3, 15),
        title: 'Task 2'
      }]