Importera en delad tjänst som finns utanför app-mappen i en Angular 2-app i TypeScript med SystemJS

Jag har två Angular 2-appar i följande struktur:

/app
     /app1
     /app2
     /shared

Inuti mina Angular 2-komponenter (skrivna i TypeScript) importerar jag flera moduler (som finns i samma mapp) utan några problem: import { TestService1 } från './test1.service';

Men när jag försökte importera något från den delade mappen kunde det inte ladda den nödvändiga modulen vid körning (webbläsare). import { TestService2 } från '../shared/test2.service'; Webbläsaren säger: http://something.something.darkside/app/test2.service 404 (Inte hittad).

Jag kan använda defaultJSExtensions inställt på true och det kommer att lösa problemet. Men jag skulle vilja veta hur man konfigurerar systemjs korrekt för att hantera denna situation.

systemjs.config.js

(function (global) {

    var ngPackageNames = [ bla, ng2packages... ];

    //ng2 apps
    var ngApps = [
        '/app/app1',
        '/app/app2'
    ];

    var map = {
        '@angular': '/node_modules/@angular',
        'rxjs': '/node_modules/rxjs'
    };

    var packages = {
        'rxjs': { defaultExtension: 'js' }
    };

    //adds package entries for each of the needed ng2 packages
    ngPackageNames.forEach(function (pkgName) {
        packages['@angular/' + pkgName] = System.packageWithIndex
            ? { main: 'index.js', defaultExtension: 'js' }
            : { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    });

    //adds map entries and package entries for the apps
    ngApps.forEach(function (app) {
        var appName = app.substring(app.lastIndexOf('/') + 1);
        map[appName] = app;
        packages[appName] = { main: appName + '.main.js', defaultExtension: 'js' };
    });

    System.config({ map: map, packages: packages });

})(this);

Svar #1

Inkludera mappens sökväg till ditt kartobjekt.

var map = {
    'shared' : 'app/shared',
    '@angular': '/node_modules/@angular',
    'rxjs': '/node_modules/rxjs'
};

Lägg till i paket lägg

var packages = {
    'rxjs': { defaultExtension: 'js' },
    'shared': { defaultExtension: 'js' }
};

Svar #2

**User "defaultJSExtensions": true in system.config.js**


    (function (global) {
       System.config({
        paths: {
            'npm:': 'node_modules/'
           },
        "defaultJSExtensions": true,
         map: {

Relaterade artiklar