Develop Reference

Import library using npm angular2

I'm not able to setup this library using npm.
Commands done :
npm install ng2-charts --save
npm install chart.js --save
index.html
I added this line
<script src="node_modules/chart.js/src/chart.js"></script>
app.module
import { ChartsModule } from 'ng2-charts/ng2-charts';
#NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(router),
HttpModule,
ChartsModule,
],
systemjs.config.js
(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',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'chartJS': 'npm:ng2-charts'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
chartJS:{
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
My console
The content of this localhost:3005/ng2-charts/ng2-charts is in fact an HTML file - it refers to my index.html.
I'm not able to understand how it's working for hours now.

Your system.js config should be,
map: {
'chart.js': 'npm:chart.js/dist/Chart.bundle.min.js',
'ng2-charts': 'npm:ng2-charts'
}
and in packages,
'ng2-charts': {
main: 'ng2-charts.js',
defaultExtension: 'js'
}

Decoding System.config.js from Angular2

H All,
Below is a snippet of system.config.js file used in Angular2.
I can see a lot of options in the config file, some I can understand some I cant. Nowhere I can find reference which explains all options in simple language
Below I have mentioned what options I understood, request you all to please confirm if I understood them correctly or not ?
Please share the meaning of the unknown ones mentioned below in capitals.
(function (global) {
System.config({
transpiler: 'ts', --> Transpiler to be used as browser can't understand typescript.
String 'ts' is the reference to the plugin added in maps
typescriptOptions: { --> When using type typescript, whether to add
some configuration. File name can only be tsconfig.json
tsconfig: true
},
meta: { --> DON'T KNOW WHAT IS THE USE OF THIS ?
'typescript': {
"exports": "ts"
}
},
paths: { --> DON'T KNOW WHAT IS THE USE OF THIS ? CAN THIS BE PLACED IN MAP ?
Looks like a key-value pair
'npm:': 'https://unpkg.com/'
},
map: { --> Basically a Key-value pair. When called 'main', 'main.js' is loaded
app: 'app',
'main': 'main.js',
'#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/upgrade': 'npm:#angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript#4.0.10/lib/plugin.js',
'typescript': 'npm:typescript#2.0.3/lib/typescript.js',
},
packages: { --> Again a key-value pair with default loading file.
Means when ONLY 'app/core' is called,url becomes '/app/core/main.js'
'app/core': { main: 'index' },
'app/models': { main: 'index' },
'api': { defaultExtension: 'js' },
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
Are their any other important options that I missed out ?
If yes please share them as well with their significance.

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 Heroes app throwing random error - traceur 404

I'm running into the 404 traceur error when starting up my Angular2 app.
It seems a lot of people solved it by removing multiline comments.
Others updated their systemjs.config.js.
I've tried both of these and neither work.
I made a plunkr with all my typescript and config files.
My systemjs.config.js:
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
'#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',
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);

Try adding 'use strict'; to the top of your systemjs config file. This happened to me a while back and if I recall, that solved it.

SystemJS, Angular2: switching between min/dev bundle

I want to use Angular2 along with SystemJS, in such way so I can easily switch between production and development. In development I prefer to use class per file, rather than in production I'd like to use single minimized angular2 bundle.
Currently I have the following index.html and config.js:
indexl.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.css"/>
<script type="text/javascript" src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script type="text/javascript" src="/node_modules/systemjs/dist/system.js"></script>
<script type="text/javascript" src="/js/config.js"></script>
<script>
System.import('ts/main.ts').catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
config.js:
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: {
'angular2': '/node_modules/angular2',
'rxjs': '/node_modules/rxjs'
},
paths: {
'typescript': 'node_modules/typescript/lib/typescript.js',
'http': 'node_modules/angular2/bundles/http.dev.js'
},
packages: {
angular2: {
defaultExtension: 'js'
},
rxjs: { defaultExtension: 'js' },
}
});
Question:
The above code works good for development. Please suggest, how to change System.config in order to use angular2 from a single /node_modules/angular2/bundles/angular2.min.js. Adding angular2.min.js to <script ...></script> is not an option, because in this case I will not be able to switch between dev and min bundles dynamically (assume that index.html is a static page)

In fact, there is nothing to configure in SystemJs if you want to use /node_modules/angular2/bundles/angular2.min.js since modules are explicitly registered into this file using System.register.
So you can remove angular2 from the map block of your SystemJS configuration.

In development, you can use their UMD bundle, here is the systemjs config file from official guide
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'#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 = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
packages['#angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);
In production, you can use the same setting, but this time you use SystemJS Bundler or Webpack.
Also you must not use *.min.js anymore since it doesn't support tree-shaking optimization like rollup
For setup example, refer here