Angular 4 Component wird keine Eingabe importieren

Question

Ich habe eine einfache Komponente, die wegen eines Tippfehlers nicht kompiliert wird.

Komponente

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); 
    } 
} 

Der Fehler passiert mit dem DriveItem Typ. Ich habe das an anderer Stelle in meinem Projekt ohne Probleme verwendet, aber aus irgendeinem Grund wird es in dieser Komponente nicht korrekt aufgelöst.

Fehler

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' 
Parsed request is a module 
using description file: /Users/jack/repos/project/package.json (relative path: ./src/app/components/selected-item) 
    Field 'browser' doesn't contain a valid alias configuration 
after using description file: /Users/jack/repos/project/package.json (relative path: ./src/app/components/selected-item) 
    resolve as module 
    /Users/jack/repos/project/src/app/components/selected-item/node_modules doesn't exist or is not a directory 
    /Users/jack/repos/project/src/app/components/node_modules doesn't exist or is not a directory 
    /Users/jack/repos/project/src/app/node_modules doesn't exist or is not a directory 
    /Users/jack/repos/project/src/node_modules doesn't exist or is not a directory 
    /Users/jack/repos/node_modules doesn't exist or is not a directory 
    /Users/jack/node_modules doesn't exist or is not a directory 
    /Users/node_modules doesn't exist or is not a directory 
    /node_modules doesn't exist or is not a directory 
    looking for modules in /Users/jack/repos/project/node_modules 
     using description file: /Users/jack/repos/project/package.json (relative path: ./node_modules) 
     Field 'browser' doesn't contain a valid alias configuration 
     after using description file: /Users/jack/repos/project/package.json (relative path: ./node_modules) 
     using description file: /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/package.json (relative path: .) 
      no extension 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types is not a file 
      .ts 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types.ts doesn't exist 
      .js 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types.js doesn't exist 
      as directory 
      existing directory 
       using path: /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index 
       using description file: /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/package.json (relative path: ./index) 
        no extension 
        Field 'browser' doesn't contain a valid alias configuration 
        /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index doesn't exist 
        .ts 
        Field 'browser' doesn't contain a valid alias configuration 
        /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index.ts doesn't exist 
        .js 
        Field 'browser' doesn't contain a valid alias configuration 
        /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index.js doesn't exist 
    looking for modules in /Users/jack/repos/project/node_modules 
     using description file: /Users/jack/repos/project/package.json (relative path: ./node_modules) 
     Field 'browser' doesn't contain a valid alias configuration 
     after using description file: /Users/jack/repos/project/package.json (relative path: ./node_modules) 
     using description file: /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/package.json (relative path: .) 
      no extension 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types is not a file 
      .ts 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types.ts doesn't exist 
      .js 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types.js doesn't exist 
      as directory 
      existing directory 
       using path: /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index 
       using description file: /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/package.json (relative path: ./index) 
        no extension 
        Field 'browser' doesn't contain a valid alias configuration 
        /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index doesn't exist 
        .ts 
        Field 'browser' doesn't contain a valid alias configuration 
        /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index.ts doesn't exist 
        .js 
        Field 'browser' doesn't contain a valid alias configuration 
        /Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index.js doesn't exist 
    looking for modules in /Users/jack/repos/project/src 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     Field 'browser' doesn't contain a valid alias configuration 
     after using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src/@microsoft/microsoft-graph-types) 
      no extension 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
      .ts 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts doesn't exist 
      .js 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js doesn't exist 
      as directory 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
    looking for modules in /Users/jack/repos/project/src 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     Field 'browser' doesn't contain a valid alias configuration 
     after using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src/@microsoft/microsoft-graph-types) 
      no extension 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
      .ts 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts doesn't exist 
      .js 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js doesn't exist 
      as directory 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
    looking for modules in /Users/jack/repos/project/src 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     Field 'browser' doesn't contain a valid alias configuration 
     after using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src/@microsoft/microsoft-graph-types) 
      no extension 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
      .ts 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts doesn't exist 
      .js 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js doesn't exist 
      as directory 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
    looking for modules in /Users/jack/repos/project/src 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     Field 'browser' doesn't contain a valid alias configuration 
     after using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src/@microsoft/microsoft-graph-types) 
      no extension 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
      .ts 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts doesn't exist 
      .js 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js doesn't exist 
      as directory 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
    looking for modules in /Users/jack/repos/project/src 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     Field 'browser' doesn't contain a valid alias configuration 
     after using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src/@microsoft/microsoft-graph-types) 
      no extension 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
      .ts 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts doesn't exist 
      .js 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js doesn't exist 
      as directory 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
    looking for modules in /Users/jack/repos/project/src 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     Field 'browser' doesn't contain a valid alias configuration 
     after using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src/@microsoft/microsoft-graph-types) 
      no extension 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
      .ts 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts doesn't exist 
      .js 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js doesn't exist 
      as directory 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
    looking for modules in /Users/jack/repos/project/src 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     Field 'browser' doesn't contain a valid alias configuration 
     after using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src/@microsoft/microsoft-graph-types) 
      no extension 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
      .ts 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts doesn't exist 
      .js 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js doesn't exist 
      as directory 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
    looking for modules in /Users/jack/repos/project/src 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     Field 'browser' doesn't contain a valid alias configuration 
     after using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src/@microsoft/microsoft-graph-types) 
      no extension 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
      .ts 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts doesn't exist 
      .js 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js doesn't exist 
      as directory 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
    looking for modules in /Users/jack/repos/project/src 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     Field 'browser' doesn't contain a valid alias configuration 
     after using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src/@microsoft/microsoft-graph-types) 
      no extension 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
      .ts 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts doesn't exist 
      .js 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js doesn't exist 
      as directory 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
    looking for modules in /Users/jack/repos/project/src 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     Field 'browser' doesn't contain a valid alias configuration 
     after using description file: /Users/jack/repos/project/package.json (relative path: ./src) 
     using description file: /Users/jack/repos/project/package.json (relative path: ./src/@microsoft/microsoft-graph-types) 
      no extension 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
      .ts 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts doesn't exist 
      .js 
      Field 'browser' doesn't contain a valid alias configuration 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js doesn't exist 
      as directory 
      /Users/jack/repos/project/src/@microsoft/microsoft-graph-types doesn't exist 
[/Users/jack/repos/project/src/app/components/selected-item/node_modules] 
[/Users/jack/repos/project/src/app/components/node_modules] 
[/Users/jack/repos/project/src/app/node_modules] 
[/Users/jack/repos/project/src/node_modules] 
[/Users/jack/repos/node_modules] 
[/Users/jack/node_modules] 
[/Users/node_modules] 
[/node_modules] 
[/Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types.ts] 
[/Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types.js] 
[/Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index] 
[/Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index.ts] 
[/Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index.js] 
[/Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types.ts] 
[/Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types.js] 
[/Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index] 
[/Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index.ts] 
[/Users/jack/repos/project/node_modules/@microsoft/microsoft-graph-types/index.js] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.ts] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types.js] 
[/Users/jack/repos/project/src/@microsoft/microsoft-graph-types] 
@ ./src/app/components/selected-item/selected-item.component.ts 11:0-61 
@ ./src/app/app.module.ts 
@ ./src/main.ts 
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts 

webpack: Failed to compile. 

Ich dachte, dass es sein könnte, weil ich ein neues Verzeichnis components und diese Datei dort lebt, aber ich habe keine Möglichkeit zu wissen, wenn das das Problem genannt worden.

Ordnerstruktur

/src 
    /app 
     /components 
      /selected-item 
       - selected-item.component.ts <-- This file will not resolve DriveItem type 
     /helpers 
      - graphItem.helper.ts <-- DriveItem type works fine here 
     /pages 
      /home 
       - home.component.ts <-- DriveItem type also works fine here. 

Bisher habe ich versucht habe folgendes:

• Installieren Sie die neueste Version von Angular CLI
• Entfernte Knotenmodule, gereinigt Cache, neu installiert .
• Versuchte verschiedene Varianten des Import * as MicrosoftGraph gegen { DriveItem } from
• die Typen entfernt und any nur verwenden. Es ist erwähnenswert, dass ich den DriveItem-Typ importieren kann, aber die Kompilierung schlägt nur fehl, wenn ich versuche, sie zu verwenden.

Answer 1

Haben Sie in Ihrem App-Modul importieren?

import { DriveItem } from '@microsoft/microsoft-graph-types'; 

// other imports 
@NgModule({ 
imports: [DriveItem], 
... 
})