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
Related
How can I get a valid Angular 7 systemjs.config.js as detailed in the article: Setting Up Angular from Scratch and an updated systemjs.config.js version for Angular 6.
I need this to be able to integrate Angular 7 UI components within my Scala Play application as done in the seed play-angular-typescript.g8 for Angular 2. See the integration of Scala Play views with Angular 2 culprit in the index.scala.html
#()
<!doctype html>
<html lang="en" data-framework="angular2">
<head>
<base href="/" />
#* In this version of the application the typescript compilation is done by the play framework.
The browser downloads .js files. *#
<meta charset="utf-8">
<title>Angular Tour of Heroes</title>
<link rel="stylesheet" href="assets/stylesheets/styles.css">
<script type='text/javascript' src='#routes.Assets.versioned("lib/core-js/client/shim.min.js")'></script>
<script type='text/javascript' src='#routes.Assets.versioned("lib/zone.js/dist/zone.js")'></script>
<script type='text/javascript' src='#routes.Assets.versioned("lib/systemjs/dist/system.src.js")'></script>
<script type='text/javascript' src='#routes.Assets.versioned("systemjs.config.js")'></script>
#* our app is downloaded as individual javascript files by SystemJs after compilation by sbt-typescript*#
<script>
System.import('assets/app/main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-root>Loading...</my-root>
</body>
</html>
and this is the systemjs.config.js that allows loading the Angular 2 into a Scala view:
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'assets/lib/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'assets/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'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'assets/systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
I'd like to have my existing Scala Play App as main MVC and use Angular 7 components within certain Play views only.
Here is an example systemjs.config.js for Angular 7.
https://github.com/Longfld/ASPNETcoreAngularJWT/blob/master/wwwroot/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/common/http': 'npm:#angular/common/bundles/common-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',
//material
'#angular/material': 'npm:#angular/material/bundles/material.umd.js',
'#angular/cdk/a11y': 'npm:#angular/cdk/bundles/cdk-a11y.umd.js',
'#angular/cdk/bidi': 'npm:#angular/cdk/bundles/cdk-bidi.umd.js',
'#angular/cdk/coercion': 'npm:#angular/cdk/bundles/cdk-coercion.umd.js',
'#angular/cdk/collections': 'npm:#angular/cdk/bundles/cdk-collections.umd.js',
'#angular/cdk/keycodes': 'npm:#angular/cdk/bundles/cdk-keycodes.umd.js',
'#angular/cdk/observers': 'npm:#angular/cdk/bundles/cdk-observers.umd.js',
'#angular/cdk/overlay': 'npm:#angular/cdk/bundles/cdk-overlay.umd.js',
'#angular/cdk/platform': 'npm:#angular/cdk/bundles/cdk-platform.umd.js',
'#angular/cdk/portal': 'npm:#angular/cdk/bundles/cdk-portal.umd.js',
'#angular/cdk/accordion' : 'npm:#angular/cdk/bundles/cdk-accordion.umd.js',
'#angular/cdk/layout' : 'npm:#angular/cdk/bundles/cdk-layout.umd.js',
'#angular/cdk/scrolling': 'npm:#angular/cdk/bundles/cdk-scrolling.umd.js',
'#angular/cdk/table': 'npm:#angular/cdk/bundles/cdk-table.umd.js',
'#angular/cdk/text-field': 'npm:#angular/cdk/bundles/cdk-text-field.umd.js',
'#angular/cdk/tree': 'npm:#angular/cdk/bundles/cdk-tree.umd.js',
'#angular/cdk/stepper': 'npm:#angular/cdk/bundles/cdk-stepper.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'rxjs-compat': 'npm:rxjs-compat',
'rxjs-system-bundle': 'npm:rxjs-system-bundle',
'hammerjs': 'npm:hammerjs',
'tslib': 'npm:tslib/tslib.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {main: './main.js',defaultExtension: 'js'},
'rxjs': {main: 'index.js', defaultExtension: 'js'},
'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
hammerjs: { main: './hammer.js', defaultExtension: 'js'}
}
});
})(this);
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'm new to angular2, npm and systemjs and I can't figure out how to load and use downloaded node_modules. Let's say I want to load first jQuery and then bootstrap. I modified my systemjs but there are some errors...
Errors:
(index):21 Error: Error: Bootstrap's JavaScript requires
jQuery(…)(anonymous function) # (index):21ZoneDelegate.invoke #
zone.js:323Zone.run # zone.js:216(anonymous function) #
zone.js:571ZoneDelegate.invokeTask # zone.js:356Zone.runTask #
zone.js:256drainMicroTaskQueue # zone.js:474ZoneTask.invoke #
zone.js:426 (index):20 Error: ReferenceError: module is not defined(…)
index.html
<!doctype html>
<html>
<head>
<base href="/"/>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
System.import('jQuery').catch(function(err){ console.error(err); });
System.import('bootstrap').catch(function(err){ console.error(err); });
</script>
<!--<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
</head>
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
</body>
</html>
systemjs.config.js
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'#angular': 'node_modules/#angular',
'rxjs': 'node_modules/rxjs',
'jQuery': 'node_modules/jQuery/lib/node-jquery.js',
'bootstrap': 'node_modules/bootstrap/dist/js/bootstrap.min.js'
};
// 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' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'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: '/bundles/' + 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)
;
Here is how you can load jquery and bootstrap with systemjs
#
installation
npm install --save-dev bootstrap jquery
Adding main files in systemjs.config.js
'bootstrap': 'node_modules/bootstrap/dist/js/bootstrap.min.js',
'jquery': 'node_modules/jquery/dist/jquery.js'
Using it in your project in main.ts
import "jquery";
import "bootstrap";
That's it you have jquery and bootstrap in your build
Source code
I've installed ng2-translate to my proj and console error keep showing 404 of the bundle and xhr error. I've added ng2-translate to my system.config.js that comes with the standard angular2 quickstart but still showing 404 and xhr error.
It's either giving me 404 error or annotation of undefined error :/
github: thread regarding the issue using systemconfig.js
https://github.com/ocombe/ng2-translate/issues/167
var map = {
'app': 'app', // 'dist',
'#angular': 'node_modules/#angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'ng2-translate': 'node_modules/ng2-translate',
'rxjs': 'node_modules/rxjs'
};
Edit:
var packages = {
'ng2-translate': { main: 'ng2-translate.js', defaultExtension: 'js' },
};
I faced to the same issue today
solution is this:
put 'ng2-translate': 'node_modules/ng2-translate/bundles' in system.config.js in the map and 'ng2-translate' : { defaultExtension: 'js' } in packages
I had to map it like this, in the systemjs config to make it work:
'ng2-translate': 'npm:ng2-translate/bundles/ng2-translate.umd.js'
install the npm module:
npm install ng2-translate --save
update your config like this:
System.config({
packages: {
"ng2-translate": {main: 'ng2-translate.js', "defaultExtension": "js"}
},
map: {
'ng2-translate': 'node_modules/ng2-translate'
}
});
Use ng2-translate like this in .ts file-
import {TranslateService, TranslatePipe} from 'ng2-translate';
See if this helps.
Probably by doing:
'ng2-translate': 'node_modules/ng2-translate',
you are referring index.js
however you might need to point some else .js file such as
'ng2-translate': 'node_modules/ng2-translate/somefile.js',
for example you can do:
System.config({
//... some other stuff
map: {
'ng2-translate': 'node_modules/ng2-translate/ng2-translate.js',
},
packages: {
//... some other stuff, do not put your ng2-translate here
}
});
ng2-translate uses the CommonJS module format as configured in its tsconfig.json:
compilerOptions": {
...
"module": "commonjs",
"target": "es5",
...
}
I successfully added ng2-translate by explicitly specifying this format in the packages section of my SystemJS config.
System.config({
map: {
'ng2-translate': 'node_modules/ng2-translate'
// ... more mappings
},
packages: {
'ng2-bootstrap': {
defaultExtension: 'js',
format: 'cjs'
}
// ... more package definitions
}
});
Refer to the list of supported module formats in the SystemJS documentation for more details.
If like me, you've spent hours trying to fix the ng2-translate (404 not found) issue. Here's is a systemjs.config.js which worked for me. Compliment of Sam Verschueren #github
(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'
};
var paths = {
'underscore': 'node_modules/underscore/underscore.js',
'ng2-translate': 'node_modules/ng2-translate/bundles/ng2-translate.umd.js'
};
// 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': { main: 'index.js', defaultExtension: 'js' },
'ng2-translate': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'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: '/bundles/' + 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,
paths: paths
};
System.config(config);
})(this);
you need to have a i18n folder in your app with en.json (its the default setting) or whatever file you call from the constructor, looks like:
constructor(translate: TranslateService) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use('en');
}
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;