Develop Reference

What does system.import do?

I have the below code in my index.html, basically what does the app represents? Does it map it to folder?
System.import('app').catch(function(err) {
console.error(err);
});
Does the app has any relation to the map or packages object?
var map = {
'app': 'dist', // 'dist',
'#angular': 'node_modules/#angular',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': {
main: 'main.js',
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
}
};

How to include zone.js, reflect-metadata etc. in Systemjs builder task?

I'm using system.js and systemjs builder to create a dist folder with all the packed javascript files of my angular2 application.
It works pretty nicely, except that it does not include the following files, which are currently statically included in the index.html:
node_modules/zone.js/dist/zone.js
node_modules/reflect-metadata/Reflect.js
node_modules/systemjs/dist/system.src.js
node_modules/esri-system-js/dist/esriSystem.js
How can I force systemjs builder to include these dependencies?
libs-bundle.js:
var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();
builder.loadConfig('./systemjs.config.js').then(function() {
return builder.bundle(
'app - [app/**/*]', // build app and remove the app code - this leaves only 3rd party dependencies
'dist/libs-bundle.js'
);
}).then(function() {
console.log('library bundles built successfully!');
});
app-bundle.js
var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();
builder.loadConfig('./systemjs.config.js').then(function() {
return builder.bundle(
'app - dist/libs-bundle.js', // build the app only, exclude everything already included in dependencies
'dist/app-bundle.js'
);
}).then(function() {
console.log('Application bundles built successfully!');
});
systemjs.config.js:
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'dist',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'ng2-slim-loading-bar': 'npm:/ng2-slim-loading-bar',
'ng2-toasty': 'npm:/ng2-toasty',
'primeng': 'npm:/primeng',
'#angular2-material/core': 'npm:/#angular2-material/core',
'#angular2-material/grid-list': 'npm:/#angular2-material/grid-list'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'esri-mods': {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-slim-loading-bar': {
main: 'index.js',
defaultExtension: 'js'
},
'ng2-toasty': {
main: 'index.js',
defaultExtension: 'js'
},
'primeng': {
defaultExtension: 'js'
},
'#angular2-material/core': {
main: './core.umd.js',
defaultExtension: 'js'
},
'#angular2-material/grid-list': {
main: './grid-list.umd.js',
defaultExtension: 'js'
}
},
meta: {
'esri/*': {
build: false
},
'esri-mods': {
build: false
},
'dojo/*': {
build: false
},
}
});
})(this);

I would try doing an npm install in your app directory for each of the missing packages
npm i zone.js
npm i reflect-js
npm i systemjs
npm i esri-system-js

There are a few thing you should do:
set the saveDependenciesAsComponents in your bit.json file. Look here.
When you do bit import, to bring your components, do bit import --skip-npm-install in order to avoid the component package dependencies. This will fallback to the project dependencies due to node module resolution.

I'm not familiar with the library, but if you're in a node runtime, then would something like this work?
const fs = require('fs');
// File destination.txt will be created or overwritten by default.
fs.copyFile('source.txt', 'destination.txt', (err) => {
if (err) throw err;
console.log('source.txt was copied to destination.txt');
});
source
P.S. I recommend fs-jetpack or some other third party wrapper around fs, but this is the simplest snippet to copy a file from one location to another.

Angular2 Material Design alpha.9-3 has '404 not found' for #angular/material

I have followed the instructions at angular material2 Getting Started to install #angular/material. Via Atom, I updated package.json, app.module, and beyond the Getting Started instructions, I updated systemjs.config, as follows: '#angular/material':'node_modules/#angular/material',
I get these errors: zone.js:1274 GET http://localhost:3000/node_modules/#angular/material/ 404 (Not Found)
(SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/#angular/material(…)
I believe I have tracked the problem to the fact that many #angular folders have a bundle sub-folder containing the umd file, but the #angular/material folder does not have a bundle sub-folder. Hence, the 'unpacking' function can't find #angular/material/material.umd.js
systemjs is outside my comfort zone so I'm not sure of the above, but I am not able to solve the 404 problem with the new file structure of alpha.9-3 Here is relevant code (other components are not shown).
package.json
"#angular/material": "2.0.0-alpha.9-3",
app.module
import { MaterialModule } from '#angular/material';
#NgModule({
imports: MaterialModule.forRoot(),
systemjs.config
(function(global) {
var map = {
'app': 'app',
// angular bundles
'#angular': 'node_modules/#angular',
// other libraries
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'#angular/material': 'node_modules/#angular/material',
};
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs':{ defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'platform-server',
'router',
'upgrade',
]; //adding 'material' to the array causes a different 404 error
function packIndex(pkgName) {
packages['#angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
function packUmd(pkgName) {
packages['#angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this); //end of function(global)
I have checked my folder/file structure and #angular/material/material.umd.js is definitely there. How do I get rid of the 404 not found?

Remove the following from map
'#angular/material': 'node_modules/#angular/material',
Add material to ngPackageNames array:
var ngPackageNames = [
...
'material'
];
And then replace your packUmd function with
function packUmd(pkgName) {
packages['#angular/'+pkgName] = {
main: (pkgName !== 'material' ? 'bundles/' : '') + pkgName + '.umd.js',
defaultExtension: 'js'
};
}
After that it should work
Or use this config like in angular2 quick start:
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'#angular/animations': 'npm:#angular/animations/bundles/animations.umd.js',
'#angular/animations/browser': 'npm:#angular/animations/bundles/animations-browser.umd.js',
'#angular/platform-browser/animations': 'npm:#angular/platform-browser/bundles/platform-browser-animations.umd.js',
'#angular/material': 'npm:#angular/material/bundles/material.umd.js'
// other libraries
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);

How do I include a javascript library with angular 2?

How do I use a javascript library with angular 2? I always get an error saying it's not a module.
If I add a script tag to my index.html file pointing to the javascript file, then add it under paths under System.config, then import it, I get an error stating that it's not a module.
I've already tried this and I've also tried this. Neither of them work despite the fact they seem to like to point out that it's easy, and that you can use any of hundreds of libraries.
Here is a javascript library: sheetjs
How do I make this work in angular 2?
index.html
<script src="../node_modules/xlsx/xlsx.js" type="text/javascript"></script>
system-config.ts
System.config({
...
path: {
xlsx: '../node_modules/xlsx/xlsx.js'
}
});
something.ts
import * as xlsx from 'xlsx';
Error message:
Error: Typescript found the following errors:
C:/___/tmp/broccoli_type_script_compiler-input_base_path-o4TZ9PSC.tmp/0/src/app/something/something.component.ts (9, 23): Cannot find module 'xlsx'.

my systemjs.config.js
(function(global) {
// map tells the System loader where to look for things
var map = {
'src': 'src', // 'dist',
'bin': 'bin',
'#angular': '/node_modules/#angular',
'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api',
'rxjs': '/node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'src': { defaultExtension: 'js' },
'bin': { defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['#angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['#angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
};
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);
include it in the map variable in this.
add 'xlsx': { defaultExtension: 'js' }, to packages variable. then in your index.html add after the

Maybe this helps:
I noticed, that you are trying to implement the sheetjs/xlsx library. There is a working XLSX library for typescript available here, which works with angular2!
If you are looking for a working demo, have a look here.

You dont included your index.html content, but I assume that the
<script src="../node_modules/xlsx/xlsx.js" type="text/javascript"></script> tag is imported before your base component . If that is true then try to import the script after the base component and on typescript use: declare var xlsx:any;

AngularJS 2 seed + System.JS - New .ts file doesn't compile

I pulled the latest angularjs2 seed application from github (https://github.com/angular/angular2-seed) and got it running in webstorm.
Now I wanted to add a simple load.ts file which preloads some components:
declare var System: any;
declare var esriSystem: any;
esriSystem.register([
'esri/geometry/Point',
'esri/geometry/geometryEngineAsync',
'esri/Map'
], function() {
// bootstrap the app
System.import('../app')
.then(null, console.error.bind(console));
}, {
outModuleName: 'esri-mods'
});
I would like to use this module inside a new map.service.ts: import { Map } from 'esri-mods'; it tells me that it cannot resolve file 'esri-mods'
The overall structure looks like this:
And the system.config.js as follows:
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: {
app: 'src',
typescript: 'node_modules/typescript/lib/typescript.js',
angular2: 'node_modules/angular2',
rxjs: 'node_modules/rxjs'
},
packages: {
app: {
defaultExtension: 'ts',
main: 'app.ts'
},
angular2: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
What is missing for the module to be usable within the application?