Angular 4组件不会导入键入

时间：2017-10-29 13:37:39

标签： angular typescript

我有一个因打字问题而无法编译的简单组件。

组件 

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

错误发生在DriveItem类型上。我在我的项目的其他地方使用过这个没有问题，但由于某种原因它在这个组件中无法正确解析。

错误 

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.

我认为可能是因为我添加了一个名为components的新目录，而且这个文件存在于那里，但我无法知道这是否是问题。

文件夹结构 

/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.

到目前为止，我已经尝试了以下内容：

  • 安装最新版本的Angular CLI
  • 删除节点模块，清理缓存，重新安装。
  • 尝试了导入* as MicrosoftGraph与{ DriveItem } from
    • 的不同变体形式
  • 删除了类型，然后使用any。值得注意的是，我可以导入DriveItem类型，但只有在我尝试使用它时编译才会失败。

1 个答案:

答案 0 :(得分：0)

您是否导入了自己的应用模块？

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
相关问题
最新问题