patrickjs / ng4-universal-demo Goto Github PK

TypeScript 63.66% HTML 1.23% JavaScript 35.11%

ng4-universal-demo's Introduction

Minimal Starter with Angular on both Server and Browser Platforms

Get Started

npm run start

Developement mode

Terminal 1: npm run watch
Wait for the build to finish
Terminal 2: npm run server

Prod mode

Includes AoT

npm run build:prod
npm run server

Based on https://github.com/robwormald/ng-universal-demo

ng4-universal-demo's People

Contributors

Stargazers

Watchers

Forkers

jkuri kuldeepkeshwar padamshrestha dm4488 sp90

ng4-universal-demo's Issues

server-side rendering lazy loaded modules

стартер юниверсала: origin https://github.com/gdi2290/ng4-universal-demo.git
ничего не менял - только удалил файл src/modules/ng-express-engine - так как при билде на него была ошибка от транспилера typescript (ntsc --version: Version 2.5.0)

при запросе lazy роута рендеринг на сервере выдает error:

ERROR { Error: Uncaught (in promise): ReferenceError: System is not defined
ReferenceError: System is not defined
    at SystemJsNgModuleLoader.loadAndCompile (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/core/bundles/core.umd.js:5736:16)
    at SystemJsNgModuleLoader.load (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/core/bundles/core.umd.js:5724:60)
    at RouterConfigLoader.loadModuleFactory (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/router/bundles/router.umd.js:3418:72)
    at RouterConfigLoader.load (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/router/bundles/router.umd.js:3402:52)
    at MergeMapSubscriber.project (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/router/bundles/router.umd.js:1570:74)
    at MergeMapSubscriber._tryNext (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/operator/mergeMap.js:120:27)
    at MergeMapSubscriber._next (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/operator/mergeMap.js:110:18)
    at MergeMapSubscriber.Subscriber.next (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/Subscriber.js:89:18)
    at ScalarObservable._subscribe (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/observable/ScalarObservable.js:49:24)
    at ScalarObservable.Observable._trySubscribe (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/Observable.js:171:25)
    at resolvePromise (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/zone.js/dist/zone-node.js:770:31)
    at resolvePromise (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/zone.js/dist/zone-node.js:741:17)
    at /Users/zeves/workspace/test2/ng4-universal-demo/node_modules/zone.js/dist/zone-node.js:818:17
    at ZoneDelegate.invokeTask (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/zone.js/dist/zone-node.js:424:31)
    at Object.onInvokeTask (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/core/bundles/core.umd.js:3956:37)
    at ZoneDelegate.invokeTask (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/zone.js/dist/zone-node.js:423:36)
    at Zone.runTask (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/zone.js/dist/zone-node.js:191:47)
    at drainMicroTaskQueue (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/zone.js/dist/zone-node.js:584:35)
    at ZoneTask.invoke (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/zone.js/dist/zone-node.js:490:25)
    at data.args.(anonymous function) (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/zone.js/dist/zone-node.js:1274:25)
  rejection:
   { ReferenceError: System is not defined
       at SystemJsNgModuleLoader.loadAndCompile (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/core/bundles/core.umd.js:5736:16)
       at SystemJsNgModuleLoader.load (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/core/bundles/core.umd.js:5724:60)
       at RouterConfigLoader.loadModuleFactory (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/router/bundles/router.umd.js:3418:72)
       at RouterConfigLoader.load (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/router/bundles/router.umd.js:3402:52)
       at MergeMapSubscriber.project (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/router/bundles/router.umd.js:1570:74)
       at MergeMapSubscriber._tryNext (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/operator/mergeMap.js:120:27)
       at MergeMapSubscriber._next (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/operator/mergeMap.js:110:18)
       at MergeMapSubscriber.Subscriber.next (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/Subscriber.js:89:18)
       at ScalarObservable._subscribe (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/observable/ScalarObservable.js:49:24)
       at ScalarObservable.Observable._trySubscribe (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/Observable.js:171:25)
     __zone_symbol__currentTask:
      ZoneTask {
        _zone: [Object],
        runCount: 0,
        _zoneDelegates: null,
        _state: 'notScheduled',
        type: 'microTask',
        source: 'Promise.then',
        data: undefined,
        scheduleFn: undefined,
        cancelFn: null,
        callback: [Function],
        invoke: [Function] } },
  promise:
   ZoneAwarePromise {
     __zone_symbol__state: 0,
     __zone_symbol__value:
      { ReferenceError: System is not defined
          at SystemJsNgModuleLoader.loadAndCompile (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/core/bundles/core.umd.js:5736:16)
          at SystemJsNgModuleLoader.load (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/core/bundles/core.umd.js:5724:60)
          at RouterConfigLoader.loadModuleFactory (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/router/bundles/router.umd.js:3418:72)
          at RouterConfigLoader.load (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/router/bundles/router.umd.js:3402:52)
          at MergeMapSubscriber.project (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/@angular/router/bundles/router.umd.js:1570:74)
          at MergeMapSubscriber._tryNext (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/operator/mergeMap.js:120:27)
          at MergeMapSubscriber._next (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/operator/mergeMap.js:110:18)
          at MergeMapSubscriber.Subscriber.next (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/Subscriber.js:89:18)
          at ScalarObservable._subscribe (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/observable/ScalarObservable.js:49:24)
          at ScalarObservable.Observable._trySubscribe (/Users/zeves/workspace/test2/ng4-universal-demo/node_modules/rxjs/Observable.js:171:25) __zone_symbol__currentTask: [Object] } },
  zone:
   Zone {
     _properties: { isAngularZone: true },
     _parent:
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     _name: 'angular',
     _zoneDelegate:
      ZoneDelegate {
        _taskCounts: [Object],
        zone: [Circular],
        _parentDelegate: [Object],
        _forkZS: null,
        _forkDlgt: null,
        _forkCurrZone: [Object],
        _interceptZS: null,
        _interceptDlgt: null,
        _interceptCurrZone: [Object],
        _invokeZS: [Object],
        _invokeDlgt: [Object],
        _invokeCurrZone: [Circular],
        _handleErrorZS: [Object],
        _handleErrorDlgt: [Object],
        _handleErrorCurrZone: [Circular],
        _scheduleTaskZS: [Object],
        _scheduleTaskDlgt: [Object],
        _scheduleTaskCurrZone: [Circular],
        _invokeTaskZS: [Object],
        _invokeTaskDlgt: [Object],
        _invokeTaskCurrZone: [Circular],
        _cancelTaskZS: [Object],
        _cancelTaskDlgt: [Object],
        _cancelTaskCurrZone: [Circular],
        _hasTaskZS: [Object],
        _hasTaskDlgt: [Object],
        _hasTaskDlgtOwner: [Circular],
        _hasTaskCurrZone: [Circular] } },
  task:
   ZoneTask {
     _zone:
      Zone {
        _properties: [Object],
        _parent: [Object],
        _name: 'angular',
        _zoneDelegate: [Object] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data: undefined,
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } }

При этом на клиентской части все нормально работает (т.е. не сервер-сайд-рендеринг)

Can't git clone & run

Hello! I wanted to try your project as it looked promising as a starting point for my new project but I couldn't get it running. I encountered the 3 following problems problems:

Problem 1: Webpack config

The dist-variable in webpack.common.js is not an absolute path. I required your helpers.js and used the helpers.root function to solve this.

Problem 2: @angular/animations not found

I simply installed it & saved it in the package.json

Problem 3:

ERROR in /home/deusprox/git/DeusProx/ng4-universal-demo/src/main.server.aot.ts (10,42): Cannot find module './ngfactory/app/server-app.module.ngfactory'.)

Could you plz provide this file?

Express engine parameter error

ERROR in /home/forestg/projects/ng4-universal-demo/ng4-universal-demo/src/modules/ng-express-engine/express-engine.ts (104,7): Supplied parameters do not match any signature of call target.

it seems, that the Send() methods parameter has changed. But if I replace

callback(null,state.renderToString());
with
callback(state.renderToString());

the page only renders the javascript code as raw html output.

without the change, even though the build says there is and error, the app seems to be working just fine.

Production mode not working?

I try to deploy the app in production mode.

After calling npm run build:prod and doing the other steps to deploy with pm2, the server still gives out information and console log-s to the console. It even says that ".Call enableProdMode() to enable the production mode." Is there a way to disable that?

universal modules should be supported in ngc when reading metadata

https://github.com/gdi2290/ng4-universal-demo/blob/master/src/app/app.module.ts#L8

remove the /browser path to see the error ERROR in TransferHttpModule is not an NgModule

ngc is having problems resolving the metadata for modules that use browser/main fields. In the app this works for type in the constructor so it's confusing to the developer that doesn't realize the magic going on with metadata

[Error] the production build is creating runtime errors

This is the error in the browser console, and thrown by express to the terminal aswell - for this to happen i ran these commands:

npm run server and npm run build:prod

And visit localhost:8000

GET: /: 7.428ms
Error: No NgModule metadata found for 'ServerAppModule'.
    at NgModuleResolver.resolve (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/@angular/compiler/bundles/compiler.umd.js:13889:23) [<root>]
    at CompileMetadataResolver.getNgModuleMetadata (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/@angular/compiler/bundles/compiler.umd.js:14473:60) [<root>]
    at JitCompiler._loadModules (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/@angular/compiler/bundles/compiler.umd.js:25640:66) [<root>]
    at JitCompiler._compileModuleAndComponents (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/@angular/compiler/bundles/compiler.umd.js:25599:52) [<root>]
    at JitCompiler.compileModuleAsync (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/@angular/compiler/bundles/compiler.umd.js:25561:23) [<root>]
    at PlatformRef_._bootstrapModuleWithZone (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/@angular/core/bundles/core.umd.js:4793:25) [<root>]
    at PlatformRef_.bootstrapModule (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/@angular/core/bundles/core.umd.js:4779:21) [<root>]
    at View.engine (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/@angularclass/universal-express/dist/index.js:35:73) [<root>]
    at View.render (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/express/lib/view.js:128:8) [<root>]
    at tryRender (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/express/lib/application.js:640:10) [<root>]
    at Function.render (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/express/lib/application.js:592:3) [<root>]
    at ServerResponse.render (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/express/lib/response.js:966:7) [<root>]
    at /Users/simondragsbaek/Documents/dev/ng4-universal-demo/dist/server.js:219:13 [<root>]
    at Layer.handle [as handle_request] (/Users/simondragsbaek/Documents/dev/ng4-universal-demo/node_modules/express/lib/router/layer.js:95:5) [<root>]

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.