Help to setup: system.js seed

[valor-software]

Help to setup: system.js seed

[meksikann]

I found an issue: I've moved 'moment' and 'ng2-bootstrap/components" folders and ng2-bootstrap.js into build/lib folder. So now at least I don't get errors ans see datepicker.

[valorkin]

It seems that this 5 min start are simply not ready for using ng2 modules

[valorkin]

https://github.com/pkozlowski-opensource/ng2-play/pull/34/files
this could be helpful

[ziaukhan]

I have used this https://github.com/pkozlowski-opensource/ng2-play/pull/34/files and quick start to build this repo https://github.com/panacloud/learn-angular2/tree/master/step03_twitter_bootstrap but it is not working :(

[valorkin]

I have renamed an issue, system js is not a the standard way
I will try to get to this today, but most probably I will get to this tomorrow

[ziaukhan]

Thanks

[basvandenheuvel]

@ziaukhan I got the beta.0 working with System.js. I show you what i do.

System.JS config:

System.config({
    packages: {
        "app": {
            "defaultExtension": "js"
        },
        "lib/ng2-bootstrap": {
            "defaultExtension": "js"
        }
    },
    paths: {
        "ng2-bootstrap/ng2-bootstrap":   "lib/ng2-bootstrap/ng2-bootstrap"
    }
});

As you can see i refer to lib/ instead of node_modules/, this is because i use gulp to copy the needed files from node_modules to lib. In your case that might be node_modules....
(in case you wonder, the files i copy from node_modules/ng2-bootstrap to my lib/ng2-bootstrap are the ng2-bootstrap.js and the components folder)

After that you can simply use it in a component like:

import { Progressbar } from "ng2-bootstrap/ng2-bootstrap";
@Component({
    selector: "my-app",
    directives: [
        Progressbar
    ],
    template: "<progressbar></progressbar>" 
})

Thats all i do, and it works like a charm 👍

[valorkin]

@basvandenheuvel thanks for helping

[ziaukhan]

@basvandenheuvel Yes it worked, Thank you so very much.
The complete updated code is available at:
https://github.com/panacloud/learn-angular2/tree/master/step03_twitter_bootstrap

[basvandenheuvel]

@ziaukhan You're welcome ;) SystemJS can be a b*tch if you don't fully understand it. ( i still don't )

[valorkin]

@basvandenheuvel thanks! :)

[valorkin]

I tried to explain how to solve this issue here angular/angular.io#681

[fegu]

@basvandenheuvel After hours of trying to figure this out, your suggestion put me on the right track. I do not use gulp, but still had to add this one line.

[valorkin]

Check readme quick start part, I have added system.js bundles

Hi, so I managed to get by the first issue being:

Error: XHR error (404 Not Found) loading http://localhost:3000/ng2-bootstrap/ng2-bootstrap(…)

Got by this by implementing the changes you guys recommended to the systemjs.config.js file as below:

`(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// 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' },
"node_modules/ng2-bootstrap": { defaultExtension: 'js' }

};
var paths = {
    'ng2-bootstrap/ng2-bootstrap':   "node_modules/ng2-bootstrap/ng2-bootstrap"
};
var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
    map: map,
    packages: packages,
    paths: paths
}
System.config(config);

})(this);
`

My issue is now that it is giving me the following error:

Error: XHR error (404 Not Found) loading http://localhost:3000/moment(…)

I am not sure what I need to implement further as moment is not one of the packages i have installed.

[valorkin]

check this out it should help
https://github.com/valor-software/angular2-quickstart

[meksikann]

Guys. still have a problem:
error appears:

zone.js:101 GET http://localhost:8080/ng2-bootstrap/ng2-bootstrap 404 (Not Found)
zone.js:323 Error: Error: XHR error (404 Not Found) loading http://localhost:8080/ng2-bootstrap/ng2-bootstrap(…)

My index.html:

<html>
<head>
<title>Angular 2 TypeScript Gulp QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Polyfill(s) for older browsers -->
<script src="lib/es6-shim/es6-shim.min.js"></script>
<script src="lib/zone.js/dist/zone.js"></script>
<script src="lib/reflect-metadata/Reflect.js"></script>
<script src="lib/systemjs/dist/system.src.js"></script>
<!--ng2-bootstrap-->
<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<!--ng-bootstrap-->
<!--<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>-->
<script>
    System.import('app')
            .then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

part of app.component.ts:

import {Component} from '@angular/core';
/datepicker
import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'my-app',
styleUrls: ['app/app_component.css'],
templateUrl: './app/main_app_template.html',
directives: [ ROUTER_DIRECTIVES, DATEPICKER_DIRECTIVES],
providers: [ SendLoginService, AuthenticationService, ConfigurationService, SetupIntervalService]

})

systemjs.config.js:

(function (global) {

// map tells the System loader where to look for things
var map = {
    'app': 'app', // 'dist',
    'rxjs': 'lib/rxjs',
    '@angular': 'lib/@angular',
     moment: 'node_modules/moment/moment.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 packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade'
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
    packages[pkgName] = {main: 'index.js', defaultExtension: 'js'};
});

var config = {
    map: map,
    packages: packages
};

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) {
    global.filterSystemConfig(config);
}

System.config(config);

})(this);

package.json:
...
"ng2-bootstrap": "1.0.17",
...
Would be very appreciative if some one could help.

[Dinistro]

@meksikann You did not map ng2-bootrsap in your systemJS configuration. Try to add

'ng2-bootstrap': 'node_modules/ng2-bootstrap',

or

'*': 'node_modules',

Note

I think, you don't need to import the bundle file.

[meksikann]

I have changed to:

    var map = {
    'app': 'app', // 'dist',
    'rxjs': 'lib/rxjs',
    '@angular': 'lib/@angular',
    'ng2-bootstrap': 'node_modules/ng2-bootstrap',
     moment: 'node_modules/moment/moment.js'
};

But still have:

zone.js:323 Error: Error: XHR error (404 Not Found) loading http://localhost:8080/node_modules/ng2-bootstrap/ng2-bootstrap(…)

[Dinistro]

@meksikann Have you added the defaultJSExtensions: true, in your config?

This will tell systemJS to add .js behind his imports.

[meksikann]

I've added:

var packages = {
    'app': {main: 'main.js', defaultExtension: 'js'},
    'rxjs': {defaultExtension: 'js'},
    'ng2-bootstrap': {defaultJSExtensions: true}
};

Have almost the same error . but with js in the end:

 Error: XHR error (404 Not Found) loading http://localhost:8080/node_modules/ng2-bootstrap/ng2-bootstrap.js(…)

[Dinistro]

@meksikann It seems like your node_modules is either not present or broken. Can you tell me, why @angular is under lib and not under the node_modules?

How do you serve your application?

[valorkin]

@meksikann can you create a sample repo with your config and share link here?
it will be much faster

[meksikann]

I've uploaded system config.js in some old existing repo.

here is config https://github.com/meksikann/Makrame/blob/master/systemjs.config.js

Iuse gulp. so i have src and build folders. I cannot tell why @angular is under lib and not under the node_modules? I am new in A2 so did as said in A2 documentstion.

[Dinistro]

@meksikann I would suggest that you do your stuff with a startet like https://github.com/mgechev/angular2-seed