├── LICENSE ├── README.md ├── _config.yml ├── app ├── alerts.service.ts ├── app.component.ts ├── authentication.service.ts ├── boot.ts ├── component.loader.ts ├── dynamic.component.ts ├── login.component.html ├── login.component.ts ├── results.component.html ├── results.component.ts ├── visualize.component.ts └── vjs.config.service.ts ├── index.html ├── package.json ├── styles.css ├── systemjs.config.js ├── tsconfig.json └── typings.json /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Business Learning Incorporated 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ng2-Bootstrap-Visualizejs 2 | A demonstration application that draws [Jaspersoft](http://www.jaspersoft.com/) report/dashboard resources with the [Visualize.js](http://community.jaspersoft.com/project/visualizejs) library using the [tabs](http://valor-software.com/ng2-bootstrap/#/tabs) and [alerts](http://valor-software.com/ng2-bootstrap/#/alerts) directives from the [ng2-bootstrap](https://github.com/valor-software/ng2-bootstrap) library. All implemented using the [Angular Framework](https://angular.io/) (Angular 2.0). 3 | 4 | > Interested in implementing a [Visualize.js](http://community.jaspersoft.com/project/visualizejs) solution without using the [ng2-bootstrap](https://github.com/valor-software/ng2-bootstrap) library? Check out [this related project](https://github.com/richbl/ng2-visualizejs) instead. 5 | 6 | ## User Login Screen 7 | ![enter image description here](https://cloud.githubusercontent.com/assets/10182110/16470095/16c8664a-3e09-11e6-95b5-93be3e0ccb0f.png) 8 | ## Tabbed Result Views 9 | ![enter image description here](https://cloud.githubusercontent.com/assets/10182110/16470115/2ad353a2-3e09-11e6-856b-6fee94ea7edf.png) 10 | 11 | ![enter image description here](https://cloud.githubusercontent.com/assets/10182110/16470519/7767b4ae-3e0b-11e6-867e-65aaf4aff737.png) 12 | 13 | ![enter image description here](https://cloud.githubusercontent.com/assets/10182110/16470559/be02fd6a-3e0b-11e6-8a50-85ec58fdc8b8.png) 14 | 15 | ## Based on Angular 2-Quickstart 16 | This repository is based on the [Angular 2-Quickstart](https://github.com/valor-software/angular2-quickstart), which is provided by Valor Software to demo a simple implementation of their [Native Angular 2 Directives for Bootstrap](http://valor-software.com/ng2-bootstrap/#/). 17 | 18 | > Note that this project has not been forked from the [Angular 2-Quickstart](https://github.com/valor-software/angular2-quickstart) project, so no updates made to that project will be reflected in this project. 19 | 20 | 21 | ## Prerequisites 22 | 23 | - [Jaspersoft](http://jaspersoft.com/quick-start) software and server resources (*i.e.* JasperReports Server) 24 | - [Angular Framework](https://angular.io/) (*aka*, Angular 2.0) library resources 25 | - [Ng2-Bootstrap](https://github.com/valor-software/ng2-bootstrap) library resources 26 | 27 | ### Jaspersoft JasperReports Server 28 | Required software and servers are well described on the [Jaspersoft website](http://jaspersoft.com/quick-start). 29 | 30 | ### Angular Framework 31 | Node.js and npm are essential to Angular 2 development. Get them now if they're not already installed on your machine. 32 | 33 | **Verify that you are running at least node `v5.x.x` and npm `3.x.x`** 34 | by running `node -v` and `npm -v` in a terminal/console window. 35 | Older versions produce errors. 36 | 37 | > This project was originally developed using Angular 2.0.0-RC3. 38 | 39 | ### Ng2-Bootstrap 40 | The [ng2-bootstrap](https://github.com/valor-software/ng2-bootstrap) library is available as an [npm package](https://www.npmjs.com/package/ng2-bootstrap), which makes it extremely easy to implement in this or any Angular Framework project. When first installing npm packages, project dependencies should install the latest package. 41 | 42 | ## Getting Started 43 | 44 | Clone this repo into new project folder (*e.g.*, `my-proj`). 45 | ```bash 46 | git clone https://github.com/richbl/ng2-bootstrap-visualizejs my-proj 47 | cd my-proj 48 | ``` 49 | 50 | ### Install npm Packages 51 | 52 | > See npm and nvm version notes above 53 | 54 | Install the npm packages described in the `package.json` and verify that it works: 55 | 56 | > Attention Windows developers: you must run all of these commands in administrator mode. 57 | 58 | ```bash 59 | npm install 60 | ``` 61 | 62 | ### Edit Visualize.js Configuration 63 | 64 | Configuration details for the Visualize.js library are currently managed in two files: 65 | 66 | -`index.html`: sets the library include for the Visualize.js library script (*e.g.*, `)` 67 | -`app/vjs.config.service.ts`: set user and resource details (*i.e.*, reports and dashboards) 68 | 69 | It's expected that future releases of this demonstration should permit for the dynamic loading of the Visualize.js library in the `vjs.config.service.ts` component. 70 | 71 | > Login credentials for this demo: **joeuser/joeuser**. 72 | 73 | ### Start the Server 74 | 75 | The `npm start` command first compiles the application, 76 | then simultaneously re-compiles and runs the `lite-server`. 77 | Both the compiler and the server watch for file changes. 78 | 79 | ```bash 80 | npm start 81 | ``` 82 | 83 | > By default, the server will be running on http://localhost:3000. Open a browser page on this URL and you should see the application running. 84 | 85 | Shut it down manually with Ctrl-C. 86 | 87 | **You're ready to go!** 88 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate -------------------------------------------------------------------------------- /app/alerts.service.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from '@angular/core'; 2 | import {AlertComponent} from 'ng2-bootstrap/ng2-bootstrap'; 3 | 4 | @Injectable() 5 | export class Alerts { 6 | 7 | public alerts: Array = []; 8 | 9 | public showAlert(msg:string): void { 10 | 11 | // ng2-bootstrap bug: will only display initial object, once dismissed will not display again 12 | // work-around: create array and continually push/splice to keep array.length==1 13 | this.alerts.push({ msg: msg, type: 'warning' }); 14 | this.alerts.splice(0, this.alerts.length - 1); 15 | } 16 | 17 | }; 18 | -------------------------------------------------------------------------------- /app/app.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {RouteConfig, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated'; 3 | 4 | import {Login} from './login.component'; 5 | import {Results} from './results.component'; 6 | import {VJSConfig} from './vjs.config.service'; 7 | import {Authentication} from './authentication.service'; 8 | import {Alerts} from './alerts.service'; 9 | 10 | @Component({ 11 | selector: 'my-app', 12 | directives: [Login, ROUTER_DIRECTIVES], 13 | providers: [ROUTER_PROVIDERS, VJSConfig, Alerts, Authentication], 14 | template: `` 15 | }) 16 | 17 | @RouteConfig([ 18 | { path: '/login', name: 'Login', component: Login, useAsDefault: true }, 19 | { path: '/results', name: 'Results', component: Results } 20 | ]) 21 | 22 | export class AppComponent { } 23 | -------------------------------------------------------------------------------- /app/authentication.service.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from '@angular/core'; 2 | import {Router} from '@angular/router-deprecated'; 3 | 4 | import {VJSConfig} from './vjs.config.service'; 5 | 6 | @Injectable() 7 | export class Authentication { 8 | 9 | constructor(private router: Router, private vjsConfig: VJSConfig) { }; 10 | 11 | public userLogin(userName: string, password: string, organization: string): Promise { 12 | 13 | return this.vjsConfig.validateUser(userName, password, organization) 14 | .then(success => { 15 | this.vjsConfig.setUser(userName, password, organization); 16 | this.router.navigate(['Results']); 17 | return true; 18 | }, error => { 19 | return false; 20 | }) 21 | 22 | }; 23 | 24 | public userLogout() { 25 | this.vjsConfig.resetUser(); 26 | } 27 | 28 | public userAuthorized(): boolean { 29 | 30 | if (this.vjsConfig.getUser().approved != true) { 31 | this.router.navigate(['Login']); 32 | return false; 33 | } else { 34 | return true; 35 | } 36 | 37 | }; 38 | }; 39 | -------------------------------------------------------------------------------- /app/boot.ts: -------------------------------------------------------------------------------- 1 | import {bootstrap} from '@angular/platform-browser-dynamic'; 2 | import {AppComponent} from './app.component'; 3 | import {enableProdMode} from '@angular/core'; 4 | 5 | // enableProdMode(); 6 | bootstrap(AppComponent); 7 | -------------------------------------------------------------------------------- /app/component.loader.ts: -------------------------------------------------------------------------------- 1 | import {Component, ComponentRef, ComponentFactory, Input, ViewContainerRef, ComponentResolver, ViewChild} from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'component-loader', 5 | template: `
` 6 | }) 7 | export class ComponentLoader { 8 | @ViewChild('target', { read: ViewContainerRef }) target; 9 | @Input() component: Function; 10 | @Input() id: string; 11 | cmpRef: ComponentRef; 12 | private isViewInitialized: boolean = false; 13 | 14 | constructor(private resolver: ComponentResolver) { } 15 | 16 | updateComponent() { 17 | if (!this.isViewInitialized) { 18 | return; 19 | } 20 | 21 | if (this.cmpRef) { 22 | this.cmpRef.destroy(); 23 | } 24 | 25 | this.resolver.resolveComponent(this.component).then((factory: ComponentFactory) => { 26 | this.cmpRef = this.target.createComponent(factory); 27 | this.cmpRef.instance.id = this.id; 28 | }); 29 | } 30 | 31 | ngOnChanges() { 32 | this.updateComponent(); 33 | } 34 | 35 | ngAfterViewInit() { 36 | this.isViewInitialized = true; 37 | this.updateComponent(); 38 | } 39 | 40 | ngOnDestroy() { 41 | if (this.cmpRef) { 42 | this.cmpRef.destroy(); 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /app/dynamic.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | import {VisualizeJS} from './visualize.component'; 4 | 5 | @Component({ 6 | 'selector': 'dynamic-component', 7 | directives: [VisualizeJS], 8 | 'template': '' 9 | }) 10 | 11 | export class DynamicComponent { } 12 | -------------------------------------------------------------------------------- /app/login.component.html: -------------------------------------------------------------------------------- 1 | 2 | {{ alert?.msg }} 3 | 4 | 5 |
6 | 14 |
15 | -------------------------------------------------------------------------------- /app/login.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {Router} from '@angular/router-deprecated'; 3 | import {AlertComponent} from 'ng2-bootstrap/ng2-bootstrap'; 4 | 5 | import {VJSConfig} from './vjs.config.service'; 6 | import {Authentication} from './authentication.service'; 7 | import {Alerts} from './alerts.service'; 8 | 9 | @Component({ 10 | selector: 'login', 11 | directives: [AlertComponent], 12 | templateUrl: 'app/login.component.html', 13 | }) 14 | 15 | export class Login { 16 | 17 | private user: any = null; 18 | 19 | constructor(private alerts: Alerts, private auth: Authentication, private vjsConfig: VJSConfig, private router: Router) { } 20 | 21 | ngOnInit() { 22 | this.auth.userLogout(); 23 | this.user = this.vjsConfig.getUser(); 24 | } 25 | 26 | onSubmit() { 27 | if (this.user.name && this.user.password) { 28 | this.auth.userLogin(this.user.name, this.user.password, this.user.organization) 29 | .then(success => { 30 | if (success != true) { 31 | this.alerts.showAlert('Authorization failed. Please try again.'); 32 | } 33 | }, error => { 34 | this.alerts.showAlert('The remote server returned an unexpected error. Please contact your adminstrator.'); 35 | }) 36 | }; 37 | 38 | }; 39 | 40 | } 41 | -------------------------------------------------------------------------------- /app/results.component.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/results.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {TAB_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; 3 | 4 | import {Authentication} from './authentication.service'; 5 | import {VJSConfig} from './vjs.config.service'; 6 | import {DynamicComponent} from './dynamic.component'; 7 | import {ComponentLoader} from './component.loader'; 8 | 9 | @Component({ 10 | selector: 'login', 11 | directives: [TAB_DIRECTIVES, ComponentLoader], 12 | templateUrl: 'app/results.component.html' 13 | }) 14 | 15 | export class Results { 16 | 17 | private resourceDetails: Array = []; 18 | private tabs: Array = []; 19 | private dynamicComponent: Function = null; 20 | private curTab: string = null; 21 | 22 | 23 | constructor(private auth: Authentication, private vjsConfig: VJSConfig) { 24 | this.resourceDetails = this.vjsConfig.getResourceDetails(); 25 | this.dynamicComponent = DynamicComponent; 26 | }; 27 | 28 | ngOnInit() { 29 | 30 | for (var elem in this.resourceDetails) { 31 | this.tabs[elem] = { title: this.resourceDetails[elem].title, id: this.resourceDetails[elem].id } 32 | } 33 | 34 | this.curTab = this.tabs[0].id; 35 | 36 | if (!this.auth.userAuthorized()) { 37 | // ng2-bootstrap bug (https://github.com/valor-software/ng2-bootstrap/issues/610) 38 | // work-around: must disable tabs before page routing, else onClick() fires 39 | for (var x in this.tabs) { this.tabs[x].disabled = true; } 40 | } 41 | 42 | } 43 | 44 | private onClick(index: string): void { 45 | this.curTab = index; 46 | }; 47 | 48 | } 49 | -------------------------------------------------------------------------------- /app/visualize.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, Attribute, Input} from '@angular/core'; 2 | 3 | import {VJSConfig} from './vjs.config.service'; 4 | import {Alerts} from './alerts.service'; 5 | 6 | declare var visualize: any; 7 | 8 | @Component({ 9 | selector: 'vjs-component', 10 | template: '
', 11 | }) 12 | 13 | export class VisualizeJS { 14 | @Input() id; 15 | resourceId: string; 16 | 17 | constructor(private alerts:Alerts, public vjsConfig: VJSConfig) { }; 18 | 19 | ngOnInit() { 20 | var resourceIndex: number = this.getObjectIndex(this.vjsConfig.getResourceDetails(), this.id); 21 | this.resourceId = this.vjsConfig.getResourceDetails()[resourceIndex].id; 22 | this.drawResource(this.vjsConfig, resourceIndex); 23 | } 24 | 25 | public drawResource(vjsConfig, resourceIndex) { 26 | 27 | visualize({ 28 | // already authenticated, so proceed with resource rendering 29 | }, function(v) { 30 | 31 | switch (vjsConfig.resourceDetails[resourceIndex].type) { 32 | 33 | case "report": { 34 | v("#" + vjsConfig.resourceDetails[resourceIndex].id).report({ 35 | resource: vjsConfig.resourceDetails[resourceIndex].uri, 36 | params: vjsConfig.resourceDetails[resourceIndex].params, 37 | success: function() { console.log("successful report draw") }, 38 | error: function(err) { console.log("report draw failed: " + err) } 39 | }); 40 | break; 41 | } 42 | 43 | case "dashboard": { 44 | v("#" + vjsConfig.resourceDetails[resourceIndex].id).dashboard({ 45 | resource: vjsConfig.resourceDetails[resourceIndex].uri, 46 | params: vjsConfig.resourceDetails[resourceIndex].params, 47 | success: function() { console.log("successful dashboard draw") }, 48 | error: function(err) { console.log("dashboard draw failed: " + err) } 49 | }); 50 | break; 51 | } 52 | 53 | default: { 54 | this.alerts.showAlert("Visualize.js resource type not found."); 55 | } 56 | 57 | }; 58 | }, 59 | function(err) { 60 | this.alerts.showAlert("Visualize.js was unable to draw the resource."); 61 | }); 62 | }; 63 | 64 | private getObjectIndex(object: any, id: any): number { 65 | return object.map(function(x) { return x.id; }).indexOf(id); 66 | }; 67 | 68 | } 69 | -------------------------------------------------------------------------------- /app/vjs.config.service.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from '@angular/core'; 2 | import {Router} from '@angular/router-deprecated'; 3 | 4 | declare var visualize: any; 5 | 6 | @Injectable() 7 | export class VJSConfig { 8 | 9 | constructor(private router: Router) { }; 10 | 11 | private user:any = { 12 | name: "", 13 | password: "", 14 | organization: "organization_1", 15 | approved: false 16 | }; 17 | 18 | private resourceDetails = [{ 19 | title: "Important Details", 20 | id: "dashboard_one", 21 | type: "dashboard", 22 | uri: "/public/Samples/Dashboards/1._Supermart_Dashboard", 23 | params: {} 24 | }, { 25 | title: "More Results", 26 | id: "dashboard_two", 27 | type: "dashboard", 28 | uri: "/public/Samples/Dashboards/2._Performance_Summary_Dashboard", 29 | params: {} 30 | }, { 31 | title: "A Final Look", 32 | id: "dashboard_three", 33 | type: "dashboard", 34 | uri: "/public/Samples/Dashboards/3.1_Sales_Metrics", 35 | params: {} 36 | }]; 37 | 38 | public validateUser(userName: string, password: string, organization: string): Promise { 39 | 40 | return new Promise(function(resolve, reject) { 41 | visualize({ 42 | auth: { 43 | name: userName, 44 | password: password, 45 | organization: organization 46 | } 47 | }, 48 | function() { resolve(); }, // successful validation 49 | function() { reject(); }); // unsuccessful validation 50 | }); 51 | 52 | }; 53 | 54 | public setUser(userName: string, password: string, organization: string) { 55 | this.user.name = userName; 56 | this.user.password = password; 57 | this.user.organization = organization; 58 | this.user.approved = true; 59 | }; 60 | 61 | public getUser() { 62 | return this.user; 63 | }; 64 | 65 | public resetUser() { 66 | this.user.approved = false; 67 | } 68 | 69 | public getResourceDetails() { 70 | return this.resourceDetails; 71 | }; 72 | 73 | }; 74 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ng2-Bootstrap-Visualizejs Demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 57 | 58 | 59 | 60 | 61 | Loading... 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng2-bootstrap-visualizejs", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 6 | "lite": "lite-server", 7 | "postinstall": "typings install", 8 | "tsc": "tsc", 9 | "tsc:w": "tsc -w", 10 | "typings": "typings" 11 | }, 12 | "license": "ISC", 13 | "dependencies": { 14 | "@angular/common": "2.0.0-rc.4", 15 | "@angular/compiler": "2.0.0-rc.4", 16 | "@angular/core": "10.2.5", 17 | "@angular/forms": "0.2.0", 18 | "@angular/http": "2.0.0-rc.4", 19 | "@angular/platform-browser": "2.0.0-rc.4", 20 | "@angular/platform-browser-dynamic": "2.0.0-rc.4", 21 | "@angular/router": "3.0.0-beta.1", 22 | "@angular/router-deprecated": "2.0.0-rc.2", 23 | "@angular/upgrade": "2.0.0-rc.4", 24 | 25 | "angular2-in-memory-web-api": "0.0.14", 26 | "bootstrap": "^3.3.6", 27 | "core-js": "^2.4.0", 28 | "ng2-bootstrap": "1.0.23", 29 | "reflect-metadata": "^0.1.3", 30 | "rxjs": "5.0.0-beta.6", 31 | "systemjs": "0.19.27", 32 | "zone.js": "^0.6.12" 33 | }, 34 | "devDependencies": { 35 | "concurrently": "^2.0.0", 36 | "lite-server": "^2.2.0", 37 | "typescript": "^1.8.10", 38 | "typings": "^1.0.4" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee !important; 3 | } 4 | .wrapper { 5 | margin-top: 80px; 6 | margin-bottom: 80px; 7 | } 8 | 9 | /*login styles*/ 10 | .form-signin { 11 | max-width: 380px; 12 | padding: 15px 35px 45px; 13 | margin: 0 auto; 14 | background-color: #fff; 15 | border: 1px solid rgba(0, 0, 0, 0.1); 16 | } 17 | .form-signin .form-signin-heading, .form-signin .checkbox { 18 | margin-bottom: 30px; 19 | } 20 | .form-signin .checkbox { 21 | font-weight: normal; 22 | } 23 | .form-signin .form-control { 24 | position: relative; 25 | font-size: 16px; 26 | height: auto; 27 | padding: 10px; 28 | -webkit-box-sizing: border-box; 29 | -moz-box-sizing: border-box; 30 | box-sizing: border-box; 31 | } 32 | .form-signin .form-control:focus { 33 | z-index: 2; 34 | } 35 | .form-signin input[type="text"] { 36 | margin-bottom: -1px; 37 | border-bottom-left-radius: 0; 38 | border-bottom-right-radius: 0; 39 | } 40 | .form-signin input[type="password"] { 41 | margin-bottom: 20px; 42 | border-top-left-radius: 0; 43 | border-top-right-radius: 0; 44 | } 45 | 46 | .reportCanvas { 47 | height: 85% !important; 48 | } 49 | 50 | .dashboardCanvas { 51 | height: 85% !important; 52 | } 53 | 54 | .nav-tabs { 55 | margin-top: 20px; 56 | } 57 | -------------------------------------------------------------------------------- /systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular 2 samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function(global) { 6 | // map tells the System loader where to look for things 7 | var map = { 8 | 'moment': 'node_modules/moment/moment.js', 9 | 'app': 'app', 10 | '@angular': 'node_modules/@angular', 11 | 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 12 | 'rxjs': 'node_modules/rxjs' 13 | }; 14 | // packages tells the System loader how to load when no filename and/or no extension 15 | var packages = { 16 | 'app': { main: 'boot.js', defaultExtension: 'js' }, 17 | 'rxjs': { defaultExtension: 'js' }, 18 | 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 19 | }; 20 | var ngPackageNames = [ 21 | 'common', 22 | 'compiler', 23 | 'core', 24 | 'forms', 25 | 'http', 26 | 'platform-browser', 27 | 'platform-browser-dynamic', 28 | 'router', 29 | 'router-deprecated', 30 | 'upgrade', 31 | ]; 32 | // Individual files (~300 requests): 33 | function packIndex(pkgName) { 34 | packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 35 | } 36 | // Bundled (~40 requests): 37 | function packUmd(pkgName) { 38 | packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 39 | } 40 | // Most environments should use UMD; some (Karma) need the individual index files 41 | var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 42 | // Add package entries for angular packages 43 | ngPackageNames.forEach(setPackageConfig); 44 | var config = { 45 | map: map, 46 | packages: packages 47 | }; 48 | System.config(config); 49 | })(this); 50 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": false 11 | }, 12 | "exclude": [ 13 | "node_modules", 14 | "typings/browser.d.ts" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "core-js": "registry:dt/core-js#0.0.0+20160602141332", 4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", 5 | "node": "registry:dt/node#6.0.0+20160621231320" 6 | } 7 | } 8 | --------------------------------------------------------------------------------