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'
}
Related
In system.config.js file, i used this rxjs link:
'rxjs': 'https://unpkg.com/rxjs#5.5.10/'
**it makes error bcz,it generate another one slash and add it to the end of link, bcz of this my source is not defind **
instead of above link, if i use this link, it will work. i want to know the reason?
'rxjs': 'https://unpkg.com/rxjs#5.5.10'
my system.config.js file
System.config({
transpiler: "typescript",
typescriptOptions: {
compilerOptions: {
target: "umd",
module: "commonjs",
moduleResolution: "node",
emitDecoratorMetadata: true,
experimentalDecorators: true
}
},
paths: {
"syncfusion:": "{{:CDN_LINK}}",
"angular:": "https://unpkg.com/#angular/"
},
map: {
app: 'app',
typescript: "https://unpkg.com/typescript#2.2.2/lib/typescript.js",
"#syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"#syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
"#syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"#syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
"#syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
"#syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"#syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"#syncfusion/ej2-ng-base": "syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js",
"#syncfusion/ej2-ng-popups": "syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js",
"#syncfusion/ej2-ng-buttons": "syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js",
"#syncfusion/ej2-ng-dropdowns": "syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js",
'#angular/core': 'angular:core#5.2.10/bundles/core.umd.js',
'#angular/common': 'angular:common#5.2.10/bundles/common.umd.js',
'#angular/compiler': 'angular:compiler#5.2.10/bundles/compiler.umd.js',
'#angular/http': 'angular:http#5.2.10/bundles/http.umd.js',
'#angular/forms': 'angular:forms#5.2.10/bundles/forms.umd.js',
'#angular/router': 'angular:router#5.2.10/bundles/router.umd.js',
'#angular/platform-browser': 'angular:platform-browser#5.2.10/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'angular:platform-browser-dynamic#5.2.10/bundles/platform-browser-dynamic.umd.js',
'#angular/material': 'angular:material#5.2.10/bundles/material.umd.js',
'rxjs': 'https://unpkg.com/rxjs#5.5.10'
},
packages: {
'app': { main: 'main', defaultExtension: 'ts' },
'rxjs': { main: 'index' },
}
});
System.import('app');
Because using :
'rxjs': 'https://unpkg.com/rxjs#5.5.10/'
you will get all the the rxjs JavaScript files not the script.
if you want to use rxjs library you should use :
'rxjs': 'https://unpkg.com/rxjs#5.5.10'
Try the following: Copy-paste the urls both with and without slash into your browser.
The one with the slash will point to the folder with all JS files, while the one without slash will actually transfer you to the file:
https://unpkg.com/rxjs#5.5.10/Rx.js
Which is your actual config file
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.
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.
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);
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.