KESO KESO - 4 months ago 133
Javascript Question

Angular2 - System is not defined when using out angular-cli

I have been working with angular-cli to create a sample project, understanding that this tool is just for compiling and generating an embebed server for test.
However when I open the files inside dist folder without any server but the browser, I got many problems because it can get the files, specially this message:


ReferenceError: System is not defined


If I try to open the project using tomcat for example I see this:



Then I tried to rewrite manually the directories to get these files and then I got this:



Inside the index.html

<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>


I can keep rewriting... but then I got more and more errors for the same reason.
So I don't have any clue how to solve this and I can't find a good example.

I can't depend of a Node server and since this is just JavaScript code for the side client it should be work even without any server.

I would apreciate any suggest or idea.

EDIT: I have tried
ng serve
and that is how I know the app works, but I need to use it in other server like tomcat.

Answer

Finally I solved this as I was expecting, using a CDN. I took as base the example from Angular documentation:
http://plnkr.co/edit/?p=preview

var  map = {
'app':                        'app',
'@angular':                   'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
'@angular/router':            'https://npmcdn.com/@angular/router' + routerVer,
'@angular/forms':             'https://npmcdn.com/@angular/forms' + formsVer,
'@angular/router-deprecated': 'https://npmcdn.com/@angular/router-deprecated' + routerDeprecatedVer,
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
'ts':                         'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
'typescript':                 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js'
};

This is from the system config file.
Using it this way now I can open my project using tomcat or another application server or even just from the web browser. Thank you for all the good ideas.