systemjs

I have been trying to dynamically load an external angular module (AppA) into another angular application (AppB) at runtime. AppA is created with angular-cli, compiled with ngc and packaged with rollupjs. Perfect. I have two cases: AppB completely configured with SystemJS. It can load AppA using System.import instruction without problems. AppB created with angular-cli. There has not been a way to make it work. In the second case, I have two subcases: I tried to import on this way but it does not let compile because it does not find the module in its own application. declare var System; System

I've compiled several js files into one SFX as described in https://github.com/systemjs/builder#example---common-bundles (although using '+' instead of '&', but this part seems to be working): gulp.task('systemjs', ['copy-assets'], function(done){ return new Builder({ baseURL: '.', // opt in to Babel for transpiling over Traceur transpiler: 'traceur' // etc. any SystemJS config }).buildSFX('src/elements/my-test.js + src/elements/my-test2.js + src/elements/model/user.js', 'dist/elements.js') .then(function() { console.log('Build complete'); }).catch(function(err) { console.log('Build error');

I have a solution built with Angular + Typescript + Webpack2 and I want to load dynamically some external modules that are known only at runtime. Since I can't use webpack to accomplish this task I'm exploring SystemJs. I was trying to require SystemJS but this causes the application to fail, as the execution flow hit let System = require('systemjs'); I get this error Cannot find module "." at webpackMissingModule (system.src.js:3893) [angular] at new SystemJSLoader$1 (system.src.js:3893) [angular] at index.js:23199:14 [angular] at Object.<anonymous> (system.src.js:4022) [angular] at Object

I've got the following code: index.html <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script> <script src="node_modules/angular2/bundles/http.dev.js"></script>

I have went through couple of module loaders for JavaScript & Angular JS 1 AMD, requireJS, Browserify, JSPM, Webpack, SystemJS, CommonJS. Which one is the best module loader to use with angular 2 ? Just like in angularJs, it doesn't really matter which loader you want to use for angular2. Whatever worked fine for you in angularJs, will just work as fine in angular2. The same rules apply to all loaders considering speed and flexibility. There is no need to be inclined to use SystemJs, just because angular2 uses it as an example in their quickstart. ES6 module syntax support with systemjs and

My bundle out.js file concatenates a main.js and an app.component.js module. Now I want to import this out.js file in my index.html with SystemJS. Actually I want to "call" the main(.js)-module in it. I am now wondering how to import the inner module of my bundle file. Is it the right way to nest a System.import (of inner module) in an outer System.import (of bundle)? Actually it is working but I'm not sure if this is fine. index.html <script type="text/javascript" src="lib/out.js"></script> <script> System.config({ packages: { lib: { format: 'register', defaultExtension: 'js' } } }); System

I just wondered if it is possible to make systemjs use require("remote").require("nodemodule"), if system js can't find the module in its own registry? I think something like this mechanism is already working when using electron with typescript and commonjs modules... Has someone already solved that struggle? Finally after some time I found a working solution: var node_modules = ["child_process","fs"]; var fetch = System.fetch; window.remote=require("remote"); System.fetch = function () { var promise= fetch.apply(System,arguments); return promise.then(function (js) { for(var m of node_modules)

I have the following error when trying to start my Angular2 application: Failed to load resource: the server responded with a status of 404 (Not Found) angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:55707/rxjs(…) Here is my index.html: <!DOCTYPE html> <html> <head> <base href="/"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Streak Maker</title> <link rel="icon" type="image/png" href="/images/favicon.png" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css

UPDATE: This question was specifically talking about Angular 2 , and is now out of date . At the time of posting, there was not a way to detect whether it was loaded on the page. I have not tested other version, but Angular 8 now has an easy way to detect this and has been pointed out in the answer below. I'm trying to figure out a good (preferably the best) way to detect whether or not Angular is loaded on the page. I took a look at this question: Ways to Detect whether AngularJS is loaded in the current page or not , but the answer simply states to use window.angular , which is the first

I have two angular 2 apps in the following structure: /app /app1 /app2 /shared 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'; 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). I can use the defaultJSExtensions set to true and that will