使用System.js导入位于Typescript中的angular 2应用程序中的app文件夹之外的app文件夹中的共享服务 [英] Import a shared service that lives outside the app folder in an angular 2 app in typescript using systemjs

问题描述

我在以下结构中有两个angular 2应用程序:

I have two angular 2 apps in the following structure:

/app
    /app1
    /app2
    /shared

/app
     /app1
     /app2
     /shared

在我的angular 2组件(用打字稿编写)中，我正在导入几个模块(位于同一文件夹中)而没有任何问题: 从'./test1.service'导入{TestService1};

Inside my angular 2 components (written in typescript), I'm importing several modules (that reside in the same folder) without any issues: import { TestService1 } from './test1.service';

但是，当我尝试从共享文件夹中导入某些内容时，它无法在运行时(浏览器)加载所需的模块. 从"../shared/test2.service"导入{TestService2}； 浏览器说: http://something.something.darkside/app/test2.service 404(未找到).

However, when I tried to import something from the shared folder, it was unable to load the required module at runtime (browser). import { TestService2 } from '../shared/test2.service'; The browser says: http://something.something.darkside/app/test2.service 404 (Not Found).

我可以使用将defaultJSExtensions设置为true的方法，这将解决此问题.但是我想知道如何正确配置systemjs来处理这种情况.

I can use the defaultJSExtensions set to true and that will fix the issue. But I would like to know how to configure systemjs correctly to handle this 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);

推荐答案

包括地图对象的文件夹路径.

Include the folder path to your map object.

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

添加软件包中的添加

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

这篇关于使用System.js导入位于Typescript中的angular 2应用程序中的app文件夹之外的app文件夹中的共享服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！