stackdave stackdave - 1 year ago 356
TypeScript Question

angular2 rc6 - systemjs.config.js using subfolder /src/app

On the angular2 quick start page:

with Angular2 rc6 , file systemjs.config.js has changed . I'm trying to change the folder /app/ accord to angular quick start by /src/app accord my app, so i'm not sure what i must to change in this file. I've tried some paths but it's not working, anyone can explain more about this file and how I use the paths. in this configuration i dont care about production or /dist , because i'm just testing angular.
I was working before with webpack starters or angular-cli but new versions angular broke those packages, so i want to stay simple.


* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
(function (global) {
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 testing umd bundles
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
// 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'
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'


import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { Configuration } from './app.constants';
import { routing } from './app.routing';
import { AccountListComponent } from './accounts/account-list/account-list.component';
import { AccountDetailComponent } from './accounts/account-detail/account-detail.component';
import { DashboardComponent } from './dashboard/';

declarations: [
imports: [
providers: [Configuration],
entryComponents: [AppComponent],
bootstrap: [AppComponent]
export class AppModule {



import { Component } from '@angular/core';

selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
export class AppComponent {
title = 'app works!';


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule, environment } from './index';

if (environment.production) {



<!doctype html>
<meta charset="utf-8">
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<base href="/">

Answer Source

I find the new systemjs.config from angular to be a bit more messy. This is what i use and it works great:

(function(global) {
    var map = {
            'app': 'src/app',
            '@angular': 'node_modules/@angular',
            'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
            'rxjs': 'node_modules/rxjs'
        packages = {
            'app': { main: 'main.js',  defaultExtension: 'js' },
            'angular2-in-memory-web-api': {main: './index.js',defaultExtension:'js'}
            'rxjs': { defaultExtension: 'js' }
        ngPackageNames = [

        tests = [

    function packUmd(pkgName) {packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' }}


    tests.forEach(function (test) {
        return packages['@angular/'+ test] = { main: '/bundles/' + test.replace(/\//, '-') + '.umd.min.js', defaultExtension: 'js' }

    var config = {
        map: map,
        packages: packages



I think this looks much cleaner and understandable. The only thing you need to change if your app folder changes is: 'app': 'path-to-app/app'

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download