frozenpandaz / ng-universal-demo Goto Github PK

1.when I run my demo,have this bug:
Cannot find module './uni/app-server.module.ngfactory'.
run ngc can get this ngfactory file,but I think don't need to do ngc. Can you tell me what should I do? thanks~

2.when I run your demo(ng-universal-demo),I don't do ngc and I don't find this file that ./ngfactory/app/server-app.module.ngfactory , but don't show any error. why?

I cloned the repo and tried to deploy this app in appengine - gcloud app deploy app.yaml, but it failed for because rimraf not found, so I had to move all devDependencies in dependencies and then rerun the deploy and now I get following error and no clue how to resolve -

Updating service [default]...failed.                                                                                                                                                           
ERROR: (gcloud.app.deploy) Error Response: [9] 
Application startup error:

> [email protected] start /app
> npm run build && npm run server


> [email protected] prebuild /app
> npm run clean


> [email protected] clean /app
> rimraf dist


> [email protected] build /app
> webpack

Killed

npm ERR! Linux 3.16.0-4-amd64
npm ERR! argv "/nodejs/bin/node" "/nodejs/bin/npm" "run" "build"
npm ERR! node v6.11.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 137
npm ERR! 
npm ERR! Failed at the [email protected] build script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ng-universal-demo package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ng-universal-demo
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ng-universal-demo
npm ERR! There is likely additional logging output above.

What is the purpose of the TransferHttpModule

How can I get access to what would have been window.location.host and window.location.pathname on the server within my angular app? I have seen provider examples just cant seem to grasp it or get anything working.

Anyway to upgrade this using new HttpClientModule for transfer?

i try to add mongoose to the project but i can't succed .i have this error when i try to sstart server;
driver = !(function webpackMissingModule() { var e = new Error("Cannot find module ".""); e.code = 'MODULE_NOT_FOUND'; throw e; }());

if you can help me

I see that you are transferring the platform's state using PlatformState, but where is the initial state being set?

C:\Users\Work\Desktop\ANGULAR TESTS\ng-universal-demo> npm run start

[email protected] start C:\Users\Work\Desktop\ANGULAR TESTS\ng-universal-demo
npm run build && npm run server

[email protected] prebuild C:\Users\Work\Desktop\ANGULAR TESTS\ng-universal-demo
npm run clean

[email protected] clean C:\Users\Work\Desktop\ANGULAR TESTS\ng-universal-demo
rimraf dist

[email protected] build C:\Users\Work\Desktop\ANGULAR TESTS\ng-universal-demo
webpack

Hash: 0af53dd4e6a45607d8eed122cb56208b6db6fd1c
Version: webpack 2.6.1
Child
Hash: 0af53dd4e6a45607d8ee
Time: 16591ms
Asset Size Chunks Chunk Names
0.client.js 2.17 kB 0 [emitted]
client.js 2.5 MB 1 [emitted] [big] main
0.client.js.map 1.08 kB 0 [emitted]
client.js.map 3.03 MB 1 [emitted] main
index.html 232 bytes [emitted]
[0] .//rxjs/Observable.js 11.4 kB {1} [built]
[3] .//rxjs/util/root.js 885 bytes {1} [built]
[7] .//@angular/platform-browser/@angular/platform-browser.es5.js 141 kB {1} [built]
[9] (webpack)/buildin/global.js 509 bytes {1} [built]
[19] .//rxjs/add/operator/map.js 187 bytes {1} [built]
[39] .//@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js 5.88 kB {1} [built]
[40] ./src/app/browser-app.module.ts 1.43 kB {1} [built]
[41] .//reflect-metadata/Reflect.js 48 kB {1} [built]
[42] .//zone.js/dist/zone.js 96 kB {1} [built]
[44] .//@angular/compiler/@angular/compiler.es5.js 1.02 MB {1} [built]
[45] ./src/app/app.module.ts 1.64 kB {1} [built]
[47] ./src/main.browser.ts 357 bytes {1} [built]
[49] ./src/modules/transfer-state/browser-transfer-state.module.ts 1.38 kB {1} [built]
[50] .//process/browser.js 5.42 kB {1} [built]
[78] .//rxjs/util/toSubscriber.js 760 bytes {1} [built]
+ 66 hidden modules

ERROR in C:/Users/Work/Desktop/ANGULAR TESTS/ng-universal-demo/node_modules/rxjs/Subject.d.ts (16,22): Class 'Subject<T>' incorrectly extends base class 'Observable<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
      Type 'Observable<T>' is not assignable to type 'Observable<R>'.
        Type 'T' is not assignable to type 'R'.
Child html-webpack-plugin for "index.html":
       [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 213 bytes {0} [built]

Child
Hash: d122cb56208b6db6fd1c
Time: 22168ms
Asset Size Chunks Chunk Names
0.server.js 2.17 kB 0 [emitted]
server.js 4.23 MB 1 [emitted] [big] main
0.server.js.map 1.08 kB 0 [emitted]
server.js.map 5.18 MB 1 [emitted] main
[4] .//@angular/core/@angular/core.es5.js 489 kB {1} [built]
[145] ./src/api/app.ts 232 bytes {1} [built]
[146] ./src/app/server-app.module.ts 2.26 kB {1} [built]
[147] ./src/routes.ts 84 bytes {1} [built]
[148] .//@nguniversal/express-engine/index.js 196 bytes {1} [built]
[149] .//express/index.js 224 bytes {1} [built]
[150] .//reflect-metadata/Reflect.js 48 kB {1} [built]
[151] .//rxjs/Rx.js 9.65 kB {1} [built]
[152] .//zone.js/dist/zone-node.js 71.1 kB {1} [built]
[158] ./src/main.server.ts 1.26 kB {1} [built]
[245] .//rxjs/add/operator/bufferCount.js 235 bytes {1} [built]
[336] .//rxjs/add/operator/windowTime.js 229 bytes {1} [built]
[337] .//rxjs/add/operator/windowToggle.js 241 bytes {1} [built]
[338] .//rxjs/add/operator/windowWhen.js 229 bytes {1} [built]
[339] ./~/rxjs/add/operator/withLatestFrom.js 253 bytes {1} [built] + 475 hidden modules

WARNING in ./~/express/lib/view.js
80:29-41 Critical dependency: the request of a dependency is an expression

ERROR in C:/Users/Work/Desktop/ANGULAR TESTS/ng-universal-demo/node_modules/rxjs/Subject.d.ts (16,22): Class 'Subject<T>' incorrectly extends base class 'Observable<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
      Type 'Observable<T>' is not assignable to type 'Observable<R>'.
        Type 'T' is not assignable to type 'R'.

ERROR in C:/Users/Work/Desktop/ANGULAR TESTS/ng-universal-demo/node_modules/rxjs/observable/dom/WebSocketSubject.d.ts (24,22): Class 'WebSocketSubject<T>' incorrectly extends base class 'AnonymousSubject<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => WebSocketSubject<R>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<T>'.
      Type 'WebSocketSubject<R>' is not assignable to type 'Observable<T>'.
        Types of property 'operator' are incompatible.
          Type 'Operator<any, R>' is not assignable to type 'Operator<any, T>'.
            Type 'R' is not assignable to type 'T'.

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\Work\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v6.10.0
npm ERR! npm v4.3.0
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: webpack
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ng-universal-demo package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ng-universal-demo
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ng-universal-demo
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Work\AppData\Roaming\npm-cache_logs\2017-06-30T10_38_09_741Z-debug.log

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\Work\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "start"
npm ERR! node v6.10.0
npm ERR! npm v4.3.0
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: npm run build && npm run server
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script 'npm run build && npm run server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ng-universal-demo package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build && npm run server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ng-universal-demo
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ng-universal-demo
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Work\AppData\Roaming\npm-cache_logs\2017-06-30T10_38_09_791Z-debug.log

2017-06-30T10_38_09_791Z-debug.log

export function onBootstrap(appRef: ApplicationRef, transferState: TransferState) {
  return () => {
    appRef.isStable
      .filter(stable => stable)
      .first()
      .subscribe(() => {
        transferState.inject();
      });
  };
}

Is this garanteed?

I have a medium-size angular application and I'm trying to apply the state transfer but my state is being injected before the backend calls...

Anyone had this problem? What can I doing wrong?
Thank you!

When trying to run npm run build:aot, I get an error if a component references a scss file instead of css.

ERROR in ./src/ngfactory/app/components/app/app.component.scss.ngstyle.ts
Module build failed: Invalid CSS after "...lint:disable */": expected 1 selector or at-rule, was "export const styles"

// Added to webpack.common.js
{
test: /.scss/,
use: [
{ loader: 'raw-loader' },
{ loader: 'sass-loader' }
]
}

I have a problem with inserting images to the pages.

For instance:
<img src="../../assets/img/mylogo.png" />

and with existing path and file, it gives me a 404 error:
(index):10 GET http://localhost:8000/assets/img/mylogo.png 404 (Not Found)

Same for
<img [src]="logoPath"/>, etc.

Thank you for the help in advance.

I have developed a service for manage the status codes of the server responses reading this page:
Angular Express Engine

:

import { Injectable, Inject } from '@angular/core';
import { Request, Response } from 'express';
import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';

@Injectable()
export class ResponseService {
  constructor(@Inject(RESPONSE) private response: Response) {
      
      
      this.response.statusCode = 400;
  }
  
  
  
  public err(status: number){
       this.response.statusCode = status;
  }
  

I have provide this service at Express-engine in the main.server.ts :

. . .

app.engine('html', ngExpressEngine({
  bootstrap: ServerAppModule,
   providers: [
      ResponseService
    ]
}));


. . .

then i have provided the service to the server-app.module :

. . .
  providers: [
    {
      provide: APP_BOOTSTRAP_LISTENER,
      useFactory: onBootstrap,
      multi: true,
      deps: [
        ApplicationRef,
        TransferState
      ]
    },
    ResponseService
  ],
. . .

at the end i have injected the service in the app.component.ts :

import {Component, OnInit, Inject} from '@angular/core'
import {TransferState} from '../modules/transfer-state/transfer-state';
import {ResponseService} from './response.service';
import {Request} from 'express';
@Component({
    selector: 'demo-app',
    template: `
    <h1>Universal Demo</h1>
    <a routerLink="/">Home</a>
    <a routerLink="/lazy">Lazy</a>
    <router-outlet></router-outlet>
  `,
    styles: [
        `h1 {
      color: green;
    }`
    ]
})
export class AppComponent implements OnInit {
    constructor(private cache: TransferState, @Inject(ResponseService) private responseService: ResponseService) {}
    
    
    
    ngOnInit() {
        this.cache.set('cached', true);


        this.responseService.err(404);


    }
}

I start the server and when i navigate the page with my browser (Google chrome), appears this error in the developers console :

view.js:18 Uncaught Error: Cannot find module "fs"
    at webpackMissingModule (view.js:18)
    at Object.<anonymous> (view.js:18)
    at __webpack_require__ (bootstrap 37d5860…:49)
    at Object.<anonymous> (application.js:22)
    at Object.<anonymous> (application.js:644)
    at __webpack_require__ (bootstrap 37d5860…:49)
    at Object.<anonymous> (express.js:17)
    at __webpack_require__ (bootstrap 37d5860…:49)
    at Object.webpackEmptyContext.keys (index.js:11)
    at __webpack_require__ (bootstrap 37d5860…:49)
webpackMissingModule	@	view.js:18
(anonymous)	@	view.js:18
__webpack_require__	@	bootstrap 37d5860…:49
(anonymous)	@	application.js:22
(anonymous)	@	application.js:644
__webpack_require__	@	bootstrap 37d5860…:49
(anonymous)	@	express.js:17
__webpack_require__	@	bootstrap 37d5860…:49
webpackEmptyContext.keys	@	index.js:11
__webpack_require__	@	bootstrap 37d5860…:49
Object.defineProperty.value	@	home-view.component.ts:9
__webpack_require__	@	bootstrap 37d5860…:49
(anonymous)	@	http.es5.js:2183
__webpack_require__	@	bootstrap 37d5860…:49
hasOwn	@	platform-browser-dynamic.es5.js:166
__webpack_require__	@	bootstrap 37d5860…:49
(anonymous)	@	response.service.ts:6
__webpack_require__	@	bootstrap 37d5860…:49
(anonymous)	@	bootstrap 37d5860…:147
(anonymous)	@	bootstrap 37d5860…:147

Someone knows the solution to this problem ?? 👍

is posible to use router resolve with the TransferHttp module.
tnks.

I copied the same settings from this repo. Why am i getting this error?

[nodemon] starting `node dist/server.js`
D:\GitWork\web-ui\dist\server.js:157900
var HTTP_PROTOCOL = (('https:' === document.location.protocol) ? 'https://' : 'http://');
                                   ^

ReferenceError: document is not defined
    at Object.<anonymous> (D:\GitWork\web-ui\dist\server.js:157900:36)
    at __webpack_require__ (D:\GitWork\web-ui\dist\server.js:26:30)
    at Object.<anonymous> (D:\GitWork\web-ui\dist\server.js:63718:73)
    at __webpack_require__ (D:\GitWork\web-ui\dist\server.js:26:30)
    at Object.<anonymous> (D:\GitWork\web-ui\dist\server.js:39936:94)
    at __webpack_require__ (D:\GitWork\web-ui\dist\server.js:26:30)
    at Object.<anonymous> (D:\GitWork\web-ui\dist\server.js:63332:75)
    at __webpack_require__ (D:\GitWork\web-ui\dist\server.js:26:30)
    at Object.<anonymous> (D:\GitWork\web-ui\dist\server.js:105998:82)
    at __webpack_require__ (D:\GitWork\web-ui\dist\server.js:26:30)
[nodemon] app crashed - waiting for file changes before starting...

Hi! I used this repo as boilerplate for a new project.

At the moment I'm having an issue with making HTTP Calls on the server side, inside a lazy loaded module.

When I'm fetching data on the server side I got this error message:

ERROR { Error: not implemented
    at new Error (native)
    at Parse5DomAdapter.getCookie (/home/chuber/Projects/my-app/bin/server.js:35103:68) [angular]
    at CookieXSRFStrategy.configureRequest (/home/chuber/Projects/my-app/bin/server.js:32568:142) [angular]
    at XHRBackend.createConnection (/home/chuber/Projects/my-app/bin/server.js:32617:28) [angular]
    at httpRequest (/home/chuber/Projects/my-app/bin/server.js:33025:20) [angular]
    at Http.request (/home/chuber/Projects/my-app/bin/server.js:33135:34) [angular]
    at Http.get (/home/chuber/Projects/my-app/bin/server.js:33149:21) [angular]
    at TrailsService.exports.modules.550.TrailsService.fetch (/home/chuber/Projects/my-app/bin/0.server.js:142:19) [angular]
    at TrailsPage.exports.modules.551.TrailsPage.ngOnInit (/home/chuber/Projects/my-app/bin/0.server.js:217:32) [angular]
    at checkAndUpdateDirectiveInline (/home/chuber/Projects/my-app/bin/server.js:11671:19) [angular]
    at checkAndUpdateNodeInline (/home/chuber/Projects/my-app/bin/server.js:13167:17) [angular]
    at checkAndUpdateNode (/home/chuber/Projects/my-app/bin/server.js:13106:16) [angular]
    at prodCheckAndUpdateNode (/home/chuber/Projects/my-app/bin/server.js:13800:5) [angular]
    at Object.eval [as updateDirectives] (ng:///TrailsModule/TrailsPage_Host.ngfactory.js:9:9) [angular]

Any idea how to solve this?

app.use('/', express.static('dist', {index: false}));

The server bundle is being output to the same directory.

I can't get the most basic sass setup to work. I'm adding just the styleUrls to a component and the necessary loaders to webpack.common.js. Any help would be appreciated. It compiles as expected and runs using nodemon but the styles are not applied.

home-view.component.ts

import { Component, OnInit } from '@angular/core';
import { TransferHttp } from '../../modules/transfer-http/transfer-http';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'home-view',
  template: `<h3>{{subs | async}}</h3>`,
  styleUrls: ['./home-view.component.scss']
})
export class HomeView implements OnInit {
  public subs: Observable<string>;

  constructor( private http: TransferHttp ) {
  }

  ngOnInit() {
    this.subs = this.http.get('http://localhost:8000/data').map(data => {
      return `${data.greeting} ${data.name}`;
    });
  }
}

home-view.component.scss

h3 {
  color: #ff0000 !important;
}

webpack.common.js

const { root }      = require('./helpers');
const nodeExternals = require('webpack-node-externals');

/**
 * This is a common webpack config which is the base for all builds
 */
module.exports = {
  devtool : 'source-map',
  target  : 'node', // in order to ignore built-in modules like path, fs, etc.
  resolve : {
    extensions : ['.ts', '.js']
  },
  output  : {
    path : root('dist')
  },
  module  : {
    rules : [
      { test : /\.ts$/, loader : '@ngtools/webpack' },
      { test : /\.css$/, loader : 'raw-loader' },
      { test : /\.html$/, loader : 'raw-loader' },
      {
        test : /\.scss$/,
        use  : ['to-string-loader'].concat([{
          loader : "isomorphic-style-loader"
        }, {
          loader : "css-loader"
        }, {
          loader : "sass-loader"
        }])
      }
    ]
  },
  plugins : []
};

I meet the problem with rendering global styles in server. In example, i use SASS and this my webpack config for this:

      {
        test: /\.scss$/,
        exclude: [/\.global\.scss$/],
        loaders: ['raw-loader', 'sass-loader']
      },
      {   
        test: /\.global\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      }

In app.component.ts i require global style:
require('./app.component.global.scss');

Error:

                return window && document && document.all && !window.atob;
                       ^
ReferenceError: window is not defined

As i understand, the problem is in style-loader, which work only in client. There may be some approaches to resolve this problem and render style in server and inject it on page, without using extract-text-webpack-plugin? Otherwise user will download styles separately, what is not good.

I'm trying to compile into a universal application, but I throw the following error

 import { OpaqueToken, NgModule } from '@angular/core';
                                                              ^^^^^^
SyntaxError: Unexpected token import

I know there is a thread of it even post a possible solution, but it has not worked for me

ngrx/store#387

as I have configured the externals module in my webpack.config.js

externals: [
includeClientPackages(/@AngularClass|@angular|angular2-|ng2-|ng-|@ng-|angular-|ngrx|@ngrx|@angular2|ionic|@Ionic|-angular2|-ng2|-ng/),
nodeExternals()
]
Compiling in jit, no error happens to me

Hi!
How can I export the assets folder to the dist folder? Thank you!