Geek Answers Handbook

Import a shared service that lives outside the application folder in the angular 2 application in typescript using systemjs

I have two angular 2 applications in the following structure:

/Appendix
/ app1
/ app2
/ Shared

Inside my angular 2 components (written in typescript) I import several modules (which are in the same folder) without any problems: import {TestService1} from './test1.service';

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

I can use defaultJSExtensions set to true and this will fix the problem. But I would like to know how to properly configure systemjs to deal with 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);
+5
source share
2 answers

Include the path to your map object.

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

Add to packages add

 var packages = { 'rxjs': { defaultExtension: 'js' }, 'shared': { defaultExtension: 'js' } };
+4
source 
 **User "defaultJSExtensions": true in system.config.js** (function (global) { System.config({ paths: { 'npm:': 'node_modules/' }, "defaultJSExtensions": true, map: {
-1
source

More articles:


All Articles