SystemJs compatibility and bundle distribution about core

[ocombe]

You can check the 2 examples starters that updated with ng2-translate, maybe that will help you since they both use SystemJS: https://github.com/ocombe/ng2-play/tree/ng2-translate & https://github.com/ocombe/angular2-seed/tree/ng2-translate

[ignaciolarranaga]

I think this might be a solution:

System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        },
        'ng2-translate': {'defaultExtension': 'js'},
        'rxjs': {'defaultExtension': 'js'}
    },
    map: {
        ng2-translate': 'node_modules/ng2-translate',
        'rxjs': 'node_modules/rxjs'
    }
});

[ocombe]

Hello,

what is your building system: gulp, webpack, ... ?
Do you use SystemJS ? If so can you give me your config for SystemJS ?

[meriturva]

Actually the config is quite simple:

<script>
        System.config({
            packages: {
                'app': { defaultExtension: 'js' }
            }
      });
      System.import('app/app');
    </script>

What about have a single bundle?

[ocombe]

Yes I will have to do that eventually, it would help people setup their projects :)

[wokeGit]

Hello,
I have similar issue. I'm using SystemJS and gulp to build app:

<script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/boot').then(null, console.error.bind(console));
</script>

I have this error:

Uncaught ReferenceError: require is not defined
GET http://localhost:4000/ng2-translate/ng2-translate 404 (Not Found)
Error: XHR error (404 Not Found) loading http://localhost:4000/ng2-translate/ng2-translate(…)
GET http://localhost:4000/ng2-translate/ng2-translate 404 (Not Found)

What do you think?

[ocombe]

That you need to define the default extension for ng2 translate as well: https://github.com/ocombe/ng2-translate#installation

System.config({
    packages: {
        "/ng2-translate": {"defaultExtension": "js"}
    }
});

[wokeGit]

Thank you for fast respond.

Unfortunately this not fixed my problem, SystemJS doesn't recognize ng2-translate package when I'm concatenating all libraries to common file. I tried to copy ng2-translate folder to my build version and now not recognize rxjs. So I'm also copying rxjs folder to build version and now works fine. I need to find reason this situation.

I have one more question, do you base on any other library to translation from angular1 like: angular-translate or something?

[ocombe]

No other library, just Angular 2 & RxJS (which is required by angular 2 anyway)

[wokeGit]

Yes I know rxjs is required, I'm using it in other components but ng2-translate doesn't recognize it and I have no idea why. Probably there is something wrong with my SystemJS config.

[wokeGit]

Yes I based on them, but you're using node_modules libraries directly and in System.config you are maping ng2-translate and rxjs. I use different approach, I'm concatenate all node_module libraries to one file and load them in one request. And then ng2-translate is not loaded by SystemJS.
Btw thank you for your help :)

[ocombe]

Ok so that is the problem, you cannot concatenate libraries manually because of the interdependence between modules, you need to use SystemJS builder to do that for you, it will make sure that your references go to the right bundled module.

[camwallin]

I may be seeing a similar issue with my deployment of the module, although I am able to reference the ng2-translate files correctly. The issue arises after the package is deployed and referenced correctly, but the following errors are observed:

GET http://localhost:7000/Application_1/dist/dev/rxjs/add/observable/fromArray.js 404 (Not Found)
GET http://localhost:7000/Application_1/dist/dev/rxjs/add/operator/share.js 404 (Not Found)
Error: XHR error (404 Not Found) loading http://localhost:7000/Application_1/dist/dev/rxjs/add/observable/fromArray.js(…) -> SystemJS module load failure

I have a bit of a strange outlier case where my project looks like this:

Root/
---Application_1/
------dist/
---------dev/
------------app/
------------boot.js
------------Index.html
------app/
---------Index.html
---------boot.ts
node_modules/

Node is hosting from the root directory, so the URL to browse my dist is http://localhost:7000/Application_1/dist/dev. Angular 2 is loading perfectly, as is Polymer, but for some reason as soon as I add ng2-translate, it can find the root files but won't load those components of RXJS.

Sorry for the bother, i18n is a major aspect of our software so we need to find a viable solution in Angular 2.

[ocombe]

No problem. Are you using beta3? (I haven't tested it yet).
What version of RxJS do you use?
Can you load RxJS components from within your application?

[camwallin]

My packages are as follows:

"angular2": "2.0.0-beta.2"
"rxjs": "5.0.0-beta.0"

I (believe) I can load RxJS components from within the application, I have the angular2-seed working correctly, and have my own custom components all being loaded properly.

[camwallin]

Works perfectly! Much obliged, we're still getting used to SystemJS

[ocombe]

Ok nice!
If necessary you can now find a bundle file in the bundles folder.