Question

我有一个带有多个延迟加载模块的Angular 2 CLI应用程序。作为后端，我使用的是通过TypeLite导出模型的.NET API。我遇到的问题是，在一个模块中，类型定义工作正常但在另一个模块中，当我浏览模块时，我得到一个引用错误。

引用的类型在媒体模块内完美运行，但不在位置模块内部。我不知道为什么也找不到任何关于在哪里搜索错误的提示。

使用angular-cli时，应用程序编译时没有错误。但是一旦我浏览或引用位置模块，我就会收到以下错误：

error_handler.js:60 Error: Uncaught (in promise): ReferenceError: TapeManager is not defined
ReferenceError: TapeManager is not defined
    at Object.1477 (location-details.component.ts:2)
    at __webpack_require__ (bootstrap 3623bc1…:52)
    at Object.1452 (2.chunk.js:15)
    at __webpack_require__ (bootstrap 3623bc1…:52)
    at . async:27
    at ZoneDelegate.invoke (zone.js:242)
    at Object.onInvoke (ng_zone.js:271)
    at ZoneDelegate.invoke (zone.js:241)
    at Zone.run (zone.js:113)
    at zone.js:535
    at ZoneDelegate.invokeTask (zone.js:275)
    at Object.onInvokeTask (ng_zone.js:262)
    at ZoneDelegate.invokeTask (zone.js:274)
    at Zone.runTask (zone.js:151)
    at drainMicroTaskQueue (zone.js:433)
    at resolvePromise (zone.js:501) [angular]
    at resolvePromise (zone.js:486) [angular]
    at vendor.bundle.js:174453:17 [angular]
    at Object.onInvokeTask (ng_zone.js:262) [angular]
    at ZoneDelegate.invokeTask (zone.js:274) [angular]
    at Zone.runTask (zone.js:151) [<root> => angular]
    at drainMicroTaskQueue (zone.js:433) [<root>]

这是失败组件的样子：

import {Component, OnInit, Input} from "@angular/core";
import Location = TapeManager.Models.Locations.Location;

@Component({
  selector: 'tm-location-details',
  templateUrl: './location-details.component.html',
  styleUrls: ['./location-details.component.scss']
})
export class LocationDetailsComponent implements OnInit {

  @Input()
  location: Location;

  constructor() { }

  ngOnInit() {
  }

}

我在媒体模块中有一个其他组件，它与Location模型具有完全相同的引用，但不会引发错误：

import {Component, OnInit} from "@angular/core";
import {MediaService} from "./media.service";
import {Observable} from "rxjs";
import {MdSnackBar} from "@angular/material";
import Media = TapeManager.Models.Mediae.Media;
import Location = TapeManager.Models.Locations.Location;

@Component({
    selector: 'app-media',
    templateUrl: './media.component.html',
    styleUrls: ['./media.component.scss'],
    providers: [MdSnackBar]
})
export class MediaComponent implements OnInit {

    public mediae: Observable<Media[]>;
    public location: Location;

    constructor(public mediaService: MediaService) {

    }

    ngOnInit(): void {

        this.mediae = this.mediaService.getEntities();
    }
}

app-routing.module如下所示：

  {
    path: 'location',
    loadChildren: 'src/app/+location/location.module#LocationModule'
  },
  {
    path: 'media',
    loadChildren: 'src/app/+media/media.module#MediaModule'
  },

引用的类型看起来像这样，位于src/typings内，在tsconfig类型为root的情况下引用。

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es7", "dom" ],
    "mapRoot": "./src/",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types",
      "src/typings"
    ]
  },
  "exclude": [
    "dist",
    "node_modules"
  ]
}

以下是TypeLite生成的类型定义示例：

/// <reference path="Enums.ts" />
...
declare module TapeManager.Models.Locations {
    interface Address extends TapeManager.Models.Common.Entity {
        additionalInformation: string;
        city: string;
        country: TapeManager.Models.Locations.Country;
        formattedAddress: string;
        postalCode: string;
        state: string;
        street: string;
        streetNumber: string;
    }
    interface Coordinate {
        latitude: number;
        longitude: number;
    }
    interface Country extends TapeManager.Models.Common.Entity {
        active: boolean;
        alphaCode: string;
        name: string;
        numericCode: number;
    }
    interface Location extends TapeManager.Models.Common.Entity {
        address: TapeManager.Models.Locations.Address;
        coordinates: TapeManager.Models.Locations.Coordinate;
        name: string;
    }
    interface LocationHistory extends TapeManager.Models.Common.Entity {
        checkedIn: Date;
        checkedInBy: TapeManager.Models.Users.Principal;
        checkedInById: string;
        checkedOut: Date;
        checkedOutBy: TapeManager.Models.Users.Principal;
        checkOutById: string;
        location: TapeManager.Models.Locations.Location;
        media: TapeManager.Models.Mediae.Media;
    }
}
...

我做错了什么？负责该错误的是什么以及如何解决？

Angular 2 - ReferenceError：未定义'CustomType' - 仅在一个模块中出错

0 个答案: