Est-il possible d'importer une classe commune en dehors du dossier dans TypeScript?

Question

J'ai du mal à comprendre comment les instructions d'importation résolvent les chemins et je suis incapable de déterminer pourquoi cela échoue. Ce que j'ai est un composant Angular qui importe une classe dans un dossier différent. Il ressemble à ceci:

Mes références de composants qui classe commune comme ceci:

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

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

Je peux obtenir mon module, les composants et les classes liées aux charges. Cependant, cette classe commune ne chargera tout simplement pas. Je reçois cette erreur de la console dev 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 

Est-il possible de charger à partir d'un répertoire extérieur par un chemin relatif? J'ai joué avec systemjs.config.js pour aller aussi loin, mais j'ai l'impression qu'il y a quelque chose qui me manque pour expliquer pourquoi cette importation ne marche pas.

Notez que je tsconfig.json en utilisant ces paramètres:

{ 
    "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 
} 

et system.config.js ajoute des packages supplémentaires via ces moyens:

/** 
* 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); 

Nous séparons modules par page, donc ils sont configurés via un apartment.config.js qui ressemble à ceci:

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

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

Answer 1

Etes-vous Avez-vous exporté votre classe State au state.ts? Comme ceci:

export class State { 

} 

Vos importations semblent bien, c'est la première erreur que j'ai pensé. Un autre est que vous n'avez pas compilé certains de vos fichiers, y compris state.ts à .js. Vérifiez s'il y a des fichiers correspondants state.js et state.js.map dans votre dossier ~/common/models.