npm run start
- Terminal 1:
npm run watch
- Wait for the build to finish
- Terminal 2:
npm run server
Includes AoT
npm run build:prod
npm run server
This project forked from robwormald/ng-universal-demo
npm run start
npm run watch
npm run server
Includes AoT
npm run build:prod
npm run server
Anyway to upgrade this using new HttpClientModule for transfer?
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
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
is posible to use router resolve with the TransferHttp module.
tnks.
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
What is the purpose of the TransferHttpModule
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 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 ?? 👍
Hi!
How can I export the assets folder to the dist folder? Thank you!
I see that you are transferring the platform's state using PlatformState, but where is the initial state being set?
app.use('/', express.static('dist', {index: false}));
The server bundle is being output to the same directory.
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 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 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?
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.
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?
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]/rxjs/util/root.js 885 bytes {1} [built]
[3] ./
[7] .//@angular/platform-browser/@angular/platform-browser.es5.js 141 kB {1} [built]/rxjs/add/operator/map.js 187 bytes {1} [built]
[9] (webpack)/buildin/global.js 509 bytes {1} [built]
[19] ./
[39] .//@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js 5.88 kB {1} [built]/reflect-metadata/Reflect.js 48 kB {1} [built]
[40] ./src/app/browser-app.module.ts 1.43 kB {1} [built]
[41] ./
[42] .//zone.js/dist/zone.js 96 kB {1} [built]/@angular/compiler/@angular/compiler.es5.js 1.02 MB {1} [built]
[44] ./
[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]/rxjs/util/toSubscriber.js 760 bytes {1} [built]
[78] ./
+ 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]/@nguniversal/express-engine/index.js 196 bytes {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] ./
[149] .//express/index.js 224 bytes {1} [built]/reflect-metadata/Reflect.js 48 kB {1} [built]
[150] ./
[151] .//rxjs/Rx.js 9.65 kB {1} [built]/zone.js/dist/zone-node.js 71.1 kB {1} [built]
[152] ./
[158] ./src/main.server.ts 1.26 kB {1} [built]
[245] .//rxjs/add/operator/bufferCount.js 235 bytes {1} [built]/rxjs/add/operator/windowTime.js 229 bytes {1} [built]
[336] ./
[337] .//rxjs/add/operator/windowToggle.js 241 bytes {1} [built]/rxjs/add/operator/windowWhen.js 229 bytes {1} [built]
[338] ./
[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
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.
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' }
]
}
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.