Encountering a compilation error in a simple component due to a typing issue.
Component
import { Component, Input } from '@angular/core';
import { DriveItem } from '@microsoft/microsoft-graph-types';
import { getType, DriveItemType } from '../../helpers/graphItem.helper';
@Component({
selector: 'app-selected-item',
templateUrl: './selected-item.component.html',
styleUrls: ['./selected-item.component.scss']
})
export class SelectedItemComponent {
@Input() selectedItem: DriveItem;
@Input() deselectItem: Function;
constructor() { }
itemType(item: DriveItem): DriveItemType {
return getType(item);
}
}
The issue is specifically with the DriveItem type. While it works fine in other parts of the project, it fails to resolve correctly in this particular component.
Error
ERROR in ./src/app/components/selected-item/selected-item.component.ts Module not found: Error: Can't resolve '@microsoft/microsoft-graph-types' in '/Users/jack/repos/project/src/app/components/selected-item' resolve '@microsoft/microsoft-graph-types' in '/Users/jack/repos/project/src/app/components/selected-item' ... ... <p>Suspecting that adding a new directory called <code>componentsmight be causing the issue, but not entirely sure.Folder Structure
/src /app /components /selected-item - selected-item.component.ts <-- Facing resolution problem with DriveItem type here /helpers - graphItem.helper.ts <-- DriveItem type functioning properly here /pages /home - home.component.ts <-- DriveItem type also working fine here.Tried fixing the issue by:
- Upgrading to the latest Angular CLI version
- Deleting node modules, clearing cache, and reinstalling
- Experimenting with different import variations such as
* as MicrosoftGraphversus using{ DriveItem } - Temporarily removing types and utilizing
any, as a workaround to the compilation failure when trying to useDriveItem.