typescript - 使用 systemjs 在 typescript 中的 Angular 2 应用程序中导入位于应用程序文件夹之外的共享服务

标签 typescript angular systemjs

我有两个具有以下结构的 Angular 2 应用程序:

/应用程序
/app1
/app2
/共享

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

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

我可以使用 defaultJSExtensions 设置为 true,这将解决问题。但我想知道如何正确配置 systemjs 来处理这种情况。

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

最佳答案

包括 map 对象的文件夹路径。

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

在包中添加

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

关于typescript - 使用 systemjs 在 typescript 中的 Angular 2 应用程序中导入位于应用程序文件夹之外的共享服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38538205/

相关文章:

css - 如何在加载时在第一个元素上设置动画?

javascript - 带有 d3 的 Angular 项目符号图

Angular 2 Http 删除在正文中发送 json

angular - 我可以跨应用重用组件吗?

angular - 在我的 tfs 构建中运行 `npm test` 时如何防止 ENOENT 错误?

javascript - 绑定(bind)到 angular2 中的组件属性

javascript - 将 TypeScript 编译为 bundle ..现在怎么办?

javascript - 如何有条件地在 Angular Reactive Form 中设置 [disabled] 属性值?

typescript - TS4.1 : Is there a way to define this property path type that isn't excessively deep?

javascript - 如何在大量的nodeJS代码基础上逐步引入typescript?