Question

我很难理解import语句如何解析路径，并且无法确定导致失败的原因。我有一个Angular组件，它导入一个不同的文件夹中的类。它看起来像这样：

我的组件引用了这样的公共类：

import { Component } from '@angular/core';
import { State } from '../common/models/state';

@Component({
    selector: 'apartment'
})
export class ApartmentComponent {
    states: State[];
}

我可以加载我的模块，组件和相关类。但是这个普通类只是不会加载。我在Chrome开发者控制台中收到此错误：

Apartments:260 Error: Error: XHR error (404 Not Found) loading http://localhost/DemoApp/scripts/components/common/models/state
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost/DemoApp/node_modules/zone.js/dist/zone.js:647:29)
        at ZoneDelegate.invokeTask (http://localhost/DemoApp/node_modules/zone.js/dist/zone.js:236:37)
        at Zone.runTask (http://localhost/DemoApp/node_modules/zone.js/dist/zone.js:136:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost/DemoApp/node_modules/zone.js/dist/zone.js:304:33)
Error loading http://localhost/DemoApp/scripts/components/common/models/state as "../common/models/state" from http://localhost/DemoApp/scripts/components/apartment/apartment.component.js

是否可以通过相对路径从外部目录加载？我使用systemjs.config.js来解决这个问题，但我觉得我必须要找到的东西为什么这个导入无效。

请注意，我使用以下设置使用tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "noEmitOnError": false
  },
  "exclude": [
    "node_modules",
    "node_modules_dep",
    "wwwroot"
  ],
  "compileOnSave": true
}

和system.config.js通过以下方式添加额外的包：

/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global, window) {
    // map tells the System loader where to look for things
    var map = {
        'rxjs': 'npm:rxjs/'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
    };

    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'forms'
    ];

    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = {
            main: 'index.js',
            defaultExtension: 'js'
        };
    }

    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = {
            main: 'bundles/' + pkgName + '.umd.js',
            defaultExtension: 'js'
        };

        map['@angular/' + pkgName] = 'npm:@angular/' + pkgName + '/';
    }

    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);

    //Adding Additional Packages
    $.each(commonPackageNames, function (index, pkgName) {
        console.log("Loading (" + pkgName.name + ") from '" + pkgName.path + "'");
        var sName = pkgName.name;

        packages[sName] = {
            main: pkgName.main,
            defaultExtension: pkgName.defaultExtension
        }

        map[sName] = pkgName.path;
    });

    var config = {
        paths: {
            // paths serve as alias
            'npm:': window.baseURL + '/node_modules/'
        },
        map: map,
        packages: packages
    };

    System.config(config);
})(this, window);

我们每页分隔模块，因此它们是通过如下所示的apartment.config.js配置的：

(map = map || {}).app = 'apartmentmodule';

commonPackageNames.push({
    name: 'apartmentmodule',
    main: 'main.js',
    defaultExtension: 'js',
    path: window.baseURL + 'scripts/components/apartmentmodule'
});

Answer 1

您确定在State导出了state.ts课程吗？像这样：

export class State {

}

你的进口似乎没问题，这是我想到的第一个错误。另一个原因是你没有编译你的一些文件，包括state.ts到.js。检查state.js文件夹中是否有相应的state.js.map和~/common/models文件。

Answer 2

使用“ ../../common/models/state”中的import {State};

是否可以在TypeScript中导入文件夹外的公共类？

2 个答案: