Dynamics Community Forum Thread Details

How to build angular (v2.0 and above) project containing "Xrm"

While building an angular project containing xrm object I'm getting an error stating xrm is undefined. Is there a way to include xrm in angular versions 2.0 and above? Currently I'm using version 7. I saw a workaround for doing this at https://github.com/kip-dk/angular-xrm-webresource#start-of-content

import { Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatTableDataSource, MatPaginator} from '@angular/material';


interface XrmContext { getClientUrl(): string; }


@Component({ selector: 'app-table-sorting-example', templateUrl: './table-sorting-example.component.html', styleUrls: ['./table-sorting-example.component.css'] })

export class TableSortingExampleComponent implements OnInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
  ngOnInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
    alert("test");
    alert("url: "+this.getClientUrl()+"\nwindow location href: "+window.location.href);
    debugger;
    console.log(window.location.host);
    Xrm.Page.context.getClientUrl();
  }
  getClientUrl() {
    if (window.parent != null && window.parent['Xrm'] != null) {
        var x = window.parent["Xrm"]["Page"]["context"] as XrmContext;
        if (x != null) {
            return x.getClientUrl();
        }
    }
    // fallback for development environment
    return "http://localhost:4200";
  } 
}

07218.error.png