Non webpack version ?

[jaumard]

Hi,

I'm trying to use this starter repo to start with Angular2 and server rendering. I didn't know webpack at all and don't want to learn it (found it too difficult to configure...).
Do you plan to do a version without it ? Maybe with gulp ?

My problem is that webpack is bundle client and server in one file. I use another framework to replace Express witch cannot be bundle easily (and don't want to bundle it anyway). I can't manage to replace webpack with gulp and have something who compile :(

[joaogarin]

There is a System js version available https://github.com/angular/universal-starter/tree/systemjs

[joaogarin]

Haven't tested it myself so I cant tell how "in sync" it is with the latest on master;P

[jaumard]

Thanks I see it but it's an old very that use the preview of angular-universal, and angular2 beta (not rc) it help me but I still have some problems :(

Maybe you can help me, the problem is that http://localhost:3000/node_modules/angular2-universal/dist/polyfills and http://localhost:3000/node_modules/angular2-universal/dist/browser/index return a 404 :(
I think my problem is only with SystemJS configuration, I take the one from angular2 getting started and add angular2-universal packages inside.

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'rxjs':                       'node_modules/rxjs',
    'angular2-universal': 'node_modules/angular2-universal/dist/browser/index',
    'angular2-universal/polyfills': 'node_modules/angular2-universal/dist/polyfills'
  };
  // 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-universal': { defaultExtension: 'js' },
    'angular2-universal/polyfills': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

[joaogarin]

Yes I think at that time Universal did not have the pollyfills inside so that does not work. I think you will have to use a newer version like the one on the master branch, where universal already publishes its own pollyfills.

[jaumard]

Ok thanks ! I change to use pollyfills module but no more luck, always have 404 I think my systemJS config is wrong but don't know how to make it right. Now it's look like :

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  // map tells the System loader where to look for things
  var map = {
    'app': 'app', // 'dist',
    '@angular': 'node_modules/@angular',
    'rxjs': 'node_modules/rxjs',
    'angular2-universal': 'node_modules/angular2-universal/dist',
    'angular2-universal-polyfills': 'node_modules/angular2-universal-polyfills/dist'
  };
  // 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-universal': {defaultExtension: 'js'},
    'angular2-universal-polyfills': {defaultExtension: 'js'},
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function (pkgName) {
    packages['@angular/' + pkgName] = {main: pkgName + '.umd.js', defaultExtension: 'js'};
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

[PatrickJS]

for systemjs you can not use the polyfills helper. you would need to include it outside and before the app runs

[jaumard]

Thanks, in fact I don't understand systemJS I think because even with defaultExtension;'js' I have this kind of error :

Also angular2-universal use zone.js/dist/zone-microtask witch no longer exist on zone.js.

A full up to date example would be welcome ^^ for systemjs. Here is my actual code https://github.com/jaumard/trails-angular2-isomorphic if someone want to take a look and help. I'll appreciate that ^^ it make me crazy.

[gajdot]

Any update on this? @jaumard where you able to figure it out?

[MarkPieszak]

I'm currently trying to fix the SystemJS version for you guys (it hasn't gotten any love in a while), been very busy but hoping to have it checked in within the next few days! @gajdot @jaumard @joaogarin

[jaumard]

@gajdot finally I use this examples https://github.com/angular/universal/tree/master/examples/src witch working without any builders. Found them easy to understand.
@MarkPieszak would be great !! Can't wait to test it :)

[gajdot]

@MarkPieszak that would be awesome :)
Whole day I was banging my head against the keyboard :) I got it working server side, the initial server side rendering is working, but couldn't really figure it out to work on client side after that, don't know what am I missing :) Without documentation is a bit hard, but maybe the examples will help me out.

I was just about to give it up and start learning webpack xD

@jaumard Thx, I'll look into that also, maybe I'll learn something valuable here and maybe I can help in the future :D

[gajdot]

@jaumard did you do anything special to make the example working? For me on windows I get tons and tons of errors :(

[jaumard]

@gajdot windows... it's evil lol no sorry I'm not on windows I just clone the repo npm i && npm start and let's go

[gajdot]

I still don't get it why it's so painful to code on windows... The tools would be much more preferable, but the open source stuff is just killing... I'll try it on a virtual machine then later today

[MarkPieszak]

@gajdot The actual Universal repo itself isn't working on Windows yet, I'm also working on that, a little over 1/2 way done there. There is an underlying huge issue with npm & tsc for windows that's making it take a while to overcome :(

[gajdot]

Hehe, ok @MarkPieszak, so you're my savior then? :D

Till you can fix any of the two underlying issue then, I'll start working with the main repo on a linux VM so at least I can learn something, maybe in the future I'll be able to help.

[gajdot]

Wow, the build is dark and full of errors :D

@jaumard I just tried to run the build on Ubuntu with latest node, npm etc. Well I never saw so many errors in one build process without crashing the build. In the end it completed, but it's still not working with a simple install and start command for me. Did you do anything special to make the example working?

[jaumard]

@gajdot I never use latest node because half of all node modules are not compatible with it ^^ I use last v4 and last v5 and no problem.

EDIT: I just try with latest version of the master and it's doesn't work anymore

GET
GET
GET
GET
complete request1
another call 2
complete request2
anotherAjaxCall data 3
anotherAjaxCall data 3
anotherAjaxCall complete ajax
anotherAjaxCall complete ajax
Timer for 1000
Another call 4 from async
Timer for 1000 from Another call 4

WARNING: ngDoCheck must return a boolean value of either true or false

preboot Error: [TypeError: Cannot read property 'disableCodeCache' of undefined]
Rendering Document Error: [TypeError: Cannot read property '0' of undefined]
DONE

[jeffwhelpley]

FYI, the alternative to webpack is systemjs and that effort is being tracked here:

angular/universal#283