Please explain this SystemJs config

Question

I am trying to learn angular2 however I am stuck with the SystemJS configuration.

<!DOCTYPE html>
<html>
<head>
    <title>Reloyalty Administration Dashboard</title>

    <!-- Viewport mobile tag for sensible mobile support -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="/favicon.ico">

    <!-- For Angular2 Routing -->
    <base href="/">


    <!-- Common Scripts-->
    <script src="/common/js/jquery-1.11.3.min.js"></script>

    <!--SCRIPTS-->
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <script src="/dashboard/js/bootstrap-switch.js"></script>
    <script src="/dashboard/js/calendar-conf-events.js"></script>
    <script src="/dashboard/js/chartjs-conf.js"></script>
    <script src="/dashboard/js/common-scripts.js"></script>
    <script src="/dashboard/js/easy-pie-chart.js"></script>
    <script src="/dashboard/js/form-component.js"></script>
    <script src="/dashboard/js/gritter-conf.js"></script>
    <script src="/dashboard/js/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="/dashboard/js/jquery.backstretch.min.js"></script>
    <script src="/dashboard/js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="/dashboard/js/jquery.nicescroll.js"></script>
    <script src="/dashboard/js/jquery.scrollTo.min.js"></script>
    <script src="/dashboard/js/jquery.sparkline.js"></script>
    <script src="/dashboard/js/jquery.tagsinput.js"></script>
    <script src="/dashboard/js/jquery.ui.touch-punch.min.js"></script>
    <script src="/dashboard/js/sparkline-chart.js"></script>
    <script src="/dashboard/js/tasks.js"></script>
    <script src="/dashboard/js/zabuto_calendar.js"></script>
    <script src="/dashboard/js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
    <script src="/dashboard/js/chart-master/Chart.js"></script>
    <script src="/dashboard/js/fancybox/jquery.fancybox.js"></script>
    <script src="/dashboard/js/fullcalendar/fullcalendar.min.js"></script>
    <script src="/dashboard/js/gritter/js/jquery.gritter.js"></script>
    <script src="/dashboard/js/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
    <script src="/js/node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="/js/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="/js/node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="/js/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/js/node_modules/zone.js/dist/zone.js"></script>
    <script src="/js/node_modules/rxjs/bundles/Rx.js"></script>
    <!--SCRIPTS END-->

    <script>


        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js',
                    main: 'main.js'
                },
                '@angular/core': {
                    main: 'bundles/core.umd.js',
                    defaultExtension: 'js'
                },
                '@angular/compiler': {
                    main: 'bundles/compiler.umd.js',
                    defaultExtension: 'js'
                },
                '@angular/common': {
                    main: 'bundles/common.umd.js',
                    defaultExtension: 'js'
                },
                '@angular/platform-browser-dynamic': {
                    main: 'bundles/platform-browser-dynamic.umd.js',
                    defaultExtension: 'js'
                },
                '@angular/platform-browser': {
                    main: 'bundles/platform-browser.umd.js',
                    defaultExtension: 'js'
                },
                rxjs: {
                    main: 'bundles/Rx.umd.min.js',
                    defaultExtension: 'js'
                }
            },
            map: {
                'app': '.', // where my app is. '.' means relative
                '@angular': '/js/node_modules/@angular',
                'rxjs': '/js/node_modules/rxjs'
            }
        });
        System.import('management/main')
                .then(null, console.error.bind(console));
    </script>

    <!-- end AngularJS 2-->
</head>

<body>

<my-app>Loading...</my-app>

</body>
</html>

My file structure is :

management/
├── app/
│   ├── app.component.ts
|   ├── root.module.ts
├──main.ts

main.ts :

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {RootModule} from "./app/root.module";

platformBrowserDynamic().bootstrapModule(RootModule);

root.module.ts:

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';


@NgModule({
    imports:      [BrowserModule], // what my Angular Application needs
    declarations: [AppComponent], // the view classes that belong to this module.
    bootstrap:    [AppComponent], // which class to boostrap
})
export class RootModule {}

app.component.ts:

import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>BLAAH is best !!! OMGOMGOMG blagh assdsdasd</h1>'
})
export class AppComponent { }

I have read all the documentation systemjs provides but can't seem to comprehend what is going on in the configuration.

For example if I write:

System.import('main')
                .then(null, console.error.bind(console));

I get those errors in the console ?

GET http://merchant.localhost:1337/main.js 404 (Not Found)
Error: (SystemJS) XHR error (404 Not Found) loading http://merchant.localhost:1337/main.js(…)

=========================================================================

------------------------------------EDIT 1-------------------------------

=========================================================================

I changed:

System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js',
                main: 'main.js'
            },
            '@angular/core': {
                main: 'bundles/core.umd.js',
                defaultExtension: 'js'
            },
            '@angular/compiler': {
                main: 'bundles/compiler.umd.js',
                defaultExtension: 'js'
            },
            '@angular/common': {
                main: 'bundles/common.umd.js',
                defaultExtension: 'js'
            },
            '@angular/platform-browser-dynamic': {
                main: 'bundles/platform-browser-dynamic.umd.js',
                defaultExtension: 'js'
            },
            '@angular/platform-browser': {
                main: 'bundles/platform-browser.umd.js',
                defaultExtension: 'js'
            },
            rxjs: {
                main: 'bundles/Rx.umd.min.js',
                defaultExtension: 'js'
            }
        },
        map: {
            'app': 'management', // where my app is. '.' means relative
            '@angular': '/js/node_modules/@angular',
            'rxjs': '/js/node_modules/rxjs'
        }
    });
    System.import('app')
            .then(null, console.error.bind(console));

So now my app is located in the management folder and I start it with "app" which knows that it has to run main.js and so on. This works. Great. So I proceeded and created a root.component.html which does not get loaded now. Here is the code :

root.component.ts:

import {Component} from '@angular/core';
@Component({
    selector: 'root-component',
    templateUrl: 'root.component.html'
})
export class RootComponent { }

And the error:

GET http://merchant.localhost:1337/root.component.html 404 (Not Found)

Ilya Chernomordik · Answer 1 · 2016-11-07T11:25:30.590

0

It seems that you really need to map the app to management folder instead of .. You have renamed your root and that's why you are having these troubles it seems.

You will also need to fix main: './main.js' in packages and use app as a module name.

So what happens is that you tell System.Js that there is a package which name is app and that you can find it under ./management/main.js.

P.S. I am not a super big expert on System.Js, so I might be wrong, but I managed to run it with Angular2 tutorial :)

edited Nov 07 '16 at 11:25

answered Nov 07 '16 at 11:13

Ilya Chernomordik

27,817
27
121
207

renaming app:'.' to app:'management' and then System.import('main') gives me "GET http://merchant.localhost:1337/main 404 (Not Found)" – mp3por Nov 07 '16 at 11:19
1

You should import `app` instead of `main`. System.js has no idea what 'main' is. – Ilya Chernomordik Nov 07 '16 at 11:21
I think you also need to fix the package to be `main: './main.js'` – Ilya Chernomordik Nov 07 '16 at 11:22
I will post an EDIT with changes and current error :) – mp3por Nov 07 '16 at 11:34
You need to use module.id in there: moduleId: module.id. Not sure about all the details, but long story short it allows relative references to the file instead of from the root. See here: http://stackoverflow.com/questions/37178192/angular2-what-is-the-meanings-of-module-id-in-component – Ilya Chernomordik Nov 07 '16 at 11:48
assets/management/app/root/root.component.ts(3,15): error TS2304: Cannot find name 'module'. – mp3por Nov 07 '16 at 11:49
You need to tell typescript where to look for it. npm install @types/node --global --save. More info here: http://stackoverflow.com/questions/36700693/typescript-error-in-angular2-code-cannot-find-name-module – Ilya Chernomordik Nov 07 '16 at 11:51
Same :((((((((( – mp3por Nov 07 '16 at 11:52
I had to isntall it via npm install @types/node – mp3por Nov 07 '16 at 11:53
just verify that your package json have this in dev dependencies "@types/node": "6.0.42", this should be enough to find module. Sometimes VS has some cache or something, so you might need to restart it. At least I experienced it did not figure out this on the fly as it should. – Ilya Chernomordik Nov 07 '16 at 11:53
after installing this and restarting the server I get "zone.js:232 Error: (SystemJS) module is not defined(…)" ??? I have it included in my index.html and it has been loaded into the browser . – mp3por Nov 07 '16 at 12:06
You should probably expand the error in console and check what's wrong. Most likely you have to add something to your system.js since it's not under the same `management` folder or something... – Ilya Chernomordik Nov 07 '16 at 12:08
http://stackoverflow.com/questions/40465367/systemjs-module-is-not-defined – mp3por Nov 07 '16 at 13:04
I have only these scripts:` ` – Ilya Chernomordik Nov 07 '16 at 13:57

Please explain this SystemJs config

1 Answers1