Giter Site home page Giter Site logo

cli-universal-demo's People

Contributors

angular-cli avatar evertonrobertoauler avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cli-universal-demo's Issues

Implementing a service worker

Thanks a bunch for this awesome little boilerplate! It is the only really maintained an actually working one out there ... I think! Great work!
I would like to build a Angular2 PWA (progressive web app) including SSR with express ... are there any plans from your side or maybe some tips you can give me on how to include something like mobile.angular.io Service Worker and have it working properly?!
Or is this service worker boilerplate maybe over the top and I just need something caching .js, .css and image files and that's pretty much it?!

Why gulp?

Thanks for the repo.

Just wondering why the need for gulp on build, and what exactly is it doing?

Caching initial server rendered response

Great repo, minimal setup. Love it.

I am interested in finding a way to cache initial server response when there are ajax calls (via angular http). At the moment when client lands on the page any ajax calls have to be requested again (one call on the server, then one on the client).

I remember angular universal team had embedded json string into the source code and thats how they managed that. I wonder if there is another way we could do it? Any thoughts?

canonical link href server side rendering

Hello,

I am using this repo (thanks for creating it) and I wonder if anyone solved problem around rendering tag in head.

I can use Title and Meta service to update information in the head but cannot be accessed. Any ideas?

Adding ng bootstrap for twitter bootstrap cause failure to build npm start

Hi,
Thanks for the tutorial. I've setup the same steps for my angular 4 app which works fine but when i add ng-bootstrap with npm install --save then import it to my module with import {NgbModule} from ' and imports: [NgbModule.forRoot()] then the whole app fails to compile with npm start or production build. Could you help and let me know what is going wrong?
Thanks

Meta Tags not working

//Imported

import { Meta, Title } from '';

//DI:
private seoServiceObj: Meta

//Meta :
this.seoServiceObj.updateTag({name:'description',content : data.info.meta_desc});
this.seoServiceObj.updateTag({name:'publish-date',content : data.info.published_date1});
this.seoServiceObj.updateTag({name:'modified-date',content : data.info.published_date1});

Issue::
The meta are updated on client side while they are not updated on SSR.

Is there any way to use angular-cli to generate components

Is there any way to use angular-cli to generate components. I tried using

./node_modules/.bin/ng generate component contact
But it errors out

installing component
Error locating module for declaration
SilentError: Multiple module files found:

I kind of get it that the cli needs to be exited but is there any workaround for this?

Problem with library: SyntaxError: Unexpected token import

I am using the library ng2-translate, but unfortunately I get an error when running the server. The gulp tasks work fine as well as the ngc compilation:

> node dist/server.js

/Users/max/code/project/node_modules/ng2-translate/index.js:1
(function (exports, require, module, __filename, __dirname) { import { NgModule } from "@angular/core";
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/max/code/project/dist/server.js:4538:18)
    at __webpack_require__ (/Users/max/code/project/dist/server.js:20:30)

Do you have any idea what this could mean?

"Unexpected token import" error with Angular4 + Universal + ng-bootstrap

Hi

So I upgraded to angular 4+ just so that I can leverage the universal package for server side rendering for SEO purposes. I implement that in my existing angular 2+ project by upgrading it to angular 4+ and did all the necessary configuration from https://github.com/evertonrobertoauler/cli-universal-demo/commit/a2610286bd3db5d4f4cce4318d7c220c11963eb6.

There is only one difference I am using ng-bootstrap https://ng-bootstrap.github.io/#/home (v1.0.0-alpha.22). But when I run the node server I get this error for import keyword in ng-bootstrap.


[email protected] start-u-dev /Users/giric/Projects/apnaDoctor/webapp/appUI
ts-node src/server.ts

/appUI/node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.module.js:1
(function (exports, require, module, __filename, __dirname) { import { NgModule } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object. (/appUI/dist/ngfactory/src/app/app.server.module.ngfa
ctory.ts:18:1)
at Module._compile (module.js:571:32)
at Module.m._compile (/appUI/node_modules/ts-node/src/index.ts:406:23)
at Module._extensions..js (module.js:580:10)
at Object.require.extensions.(anonymous function) [as .ts] (/webapp/appUI/node_mod
ules/ts-node/src/index.ts:409:12)
at Module.load (module.js:488:32)

pm ERR! Darwin 16.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start-u-dev"
npm ERR! node v7.7.4
npm ERR! npm v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start-u-dev: ts-node src/server.ts
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start-u-dev script 'ts-node src/server.ts'.
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 app-ui package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ts-node src/server.ts
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs app-ui
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls app-ui
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:


This is what my package.json looks like

{
"name": "app-ui",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"prestart": "npm install",
"postinstall": "bower install",
"prestart-u-dev": "npm install && ng build && ngc",
"start-u-dev": "ts-node src/server.ts",
"prestart-u-prod": "npm install && ng build --prod && ngc",
"start-u-prod": "ts-node src/server.ts"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.1",
"@angular/cli": "^1.0.0-rc.1",
"@angular/common": "^4.0.1",
"@angular/compiler": "^4.0.1",
"@angular/compiler-cli": "^4.0.1",
"@angular/core": "^4.0.1",
"@angular/forms": "^4.0.1",
"@angular/http": "^4.0.1",
"@angular/platform-browser": "^4.0.1",
"@angular/platform-browser-dynamic": "^4.0.1",
"@angular/platform-server": "^4.0.1",
"@angular/router": "^4.0.1",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22",
"angular2-toaster": "^3.0.1",
"core-js": "^2.4.1",
"ng2-webstorage": "^1.5.1",
"rxjs": "^5.1.0",
"rxjs-es": "^5.0.0-beta.12",
"typescript": "^2.2.2",
"ui-router-ng2": "^1.0.0-beta.4",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.5.0",
"protractor": "~5.1.0",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.3",
"ts-node": "~2.0.0",
"tslint": "~4.4.2"
}
}

Update: Earlier i removed angular2-toaster, but then i added it again just to make sure it wasnt just toaster module that is throwing the same error. Turns out, both angular2-toaster and ng-bootstrap threw the same error.

Update 2:
When I run the server using ng server, it works fine, no issues with using ng-bootstrap and angular2-toaster with angular 4+

Any suggestions? Thanks in advance.

environment variables

When rendering a different environment i.e staging, the dist folder contains the code with the correct env data. but when rendering in the server it's compiled with development environment instead. any suggestions on how I can compiel webpack with the correct env ?

Adding app.browser.module

Hello and thank you, I need to add the file app.browser.module to handle some dependencies in another way, for example: I need to handle the cookie service separately, one service in the browser and another in the server.

core+common+http

help me please I want to use Angular 4+ Angular universal +Angular material,
I have this when I run "npm install" on a clone of your repository:
image

and when I run "npm run start", I have this:
image

But it works. I will have problems because of those errors?

@angular/material branch not working

hello, thanks for sharing the repo is faboulus.
but i have a problem with the @angular/material repo, it is working fine with ng serve, but when i run with npm run start is not working

ERROR { ReferenceError: document is not defined

thanksss!

Is there any way to use cookie values in the server?

Thanks for your example repo! Really helpful. I do encounter a challenge with reading cookie data. How to get the cookie value from the request? renderModuleFactory or Express itself doesn't seem to inject it.

BrowserAnimationsModule and @angular/material

This repo is exactly what I needed. Thanks for your work! One issue I've hit is that using your @angular/material branch as an example, I've gotten things working pretty well. However, as soon as I add in BrowserAnimationsModule that is required with @angular/material beta.3, the server just hangs and never loads the page. You can reproduce this in your own repo by just going into app.module.ts, adding the import line import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; and the adding the module as an import. Do you know of a way to conditionally add this dependency only on the client side? I've had no luck so far.

build error with loadChildren modules

I'm download your project and try to add children module to RouterModule like

{ path: 'test' , loadChildren: 'app/test/test.module#TestModule'}

and build : npm run start
then it show error
An error occured during the build: Error: No module factory available for dependency type: ContextElementDependency at Compilation.addModuleDependencies (C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:210:21) at Compilation.processModuleDependencies (C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:199:8) at _this.buildModule.err (C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:340:13) at building.forEach.cb (C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:144:27) at Array.forEach (native) at callback (C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:144:13) at module.build (C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:171:11) at resolveDependencies (C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:160:4) at ContextModule.result.resolveDependencies (C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@ngtools\webpack\src\plugin.js:261:25) at ContextModule.build (C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:105:8) at Compilation.buildModule (C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:146:10) at factoryCallback (C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:329:11) at C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@angular\cli\node_modules\webpack\lib\ContextModuleFactory.js:96:13 at C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\tapable\lib\Tapable.js:268:11 at done.then (C:\Users\ngocduy.pham\Desktop\cli-universal-demo-master\node_modules\@ngtools\webpack\src\plugin.js:263:28) No module factory available for dependency type: ContextElementDependency

can you help me? please!

Angular Universal not working with angular material, giving this issue.

at Array.filter (native)
at new MdInputDirective (I:\cli-universal-demo-master---\dist\server.js:15493:11)
at createClass (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:11038:26)
at createDirectiveInstance (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:10863:37)
at createViewNodes (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:12291:49)
at Object.createEmbeddedView (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:12174:5)
at TemplateRef_.createEmbeddedView (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:10378:38
)
at ViewContainerRef_.createEmbeddedView (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:101
61:52)
at NgIf.updateView (I:\cli-universal-demo-master---\node_modules@angular\common\bundles\common.umd.js:1952:45)
at NgIf.set [as ngIf] (I:\cli-universal-demo-master---\node_modules@angular\common\bundles\common.umd.js:1911:18)
at updateProp (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:11221:37)
at checkAndUpdateDirectiveInline (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:10913:19)
at checkAndUpdateNodeInline (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:12443:17)
at checkAndUpdateNode (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:12382:16)
at prodCheckAndUpdateNode (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:13074:5)
at Object.updateDirectives (I:\cli-universal-demo-master---\dist\server.js:28381:9)
at Object.updateDirectives (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:12831:72)
at checkAndUpdateView (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:12349:14)
at callViewAction (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:12712:21)
at execComponentViewsAction (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:12644:13)
ERROR ReferenceError: document is not defined
at getSupportedInputTypes (I:\cli-universal-demo-master---\dist\server.js:1308:60)
at I:\cli-universal-demo-master---\dist\server.js:15493:40
at Array.filter (native)
at new MdInputDirective (I:\cli-universal-demo-master---\dist\server.js:15493:11)
at createClass (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:11038:26)
at createDirectiveInstance (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:10863:37)
at createViewNodes (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:12291:49)
at Object.createEmbeddedView (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:12174:5)
at TemplateRef
.createEmbeddedView (I:\cli-universal-demo-master---\node_modules@angular\core\bundles\core.umd.js:10378:38
)

It is giving this issue during build time (npm start). My whole of project is stuck by this issue. Any help would be highly appreciated.

Watch mode

Hello, great example of server side rendering!
I have a question about development mode. Angular cli has sth like ng build -op dist -w to watch changes in code. In your code it is not working because this is not reloding server side. Do you know how it should work? Or do you have some command for this?

Thanks in advance

http transfer state

Hi,

I am trying to get data server side when I am using view source of the page those data is not included and its works as client side http request. Can you please guide me what I am missing as in all the other universal demos if you call a service in server side those are included in the rendered page not through client side http calls.

Can't resolve './$$_gendir/

Encountered error whille running npm run start

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/neo/workspace/cli-universal-demo/src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/home/neo/workspace/cli-universal-demo/src/$$_gendir/app/home/home.module.ngfactory.ts' in '/home/neo/workspace/cli-universal-demo/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/home/neo/workspace/cli-universal-demo/src/$$_gendir/app/about/about.module.ngfactory.ts' in '/home/neo/workspace/cli-universal-demo/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi ./src/main.ts

Tried angular universal official doc as well as this repo
There is the issue of "import token" and here is this issue

TypeError: Cannot read property 'create' of undefined

I have adapted a project by angular/cli to use server side rendering as per you example but am getting this error on making a request
listening on http://localhost:3000! TypeError: Cannot read property 'create' of undefined at /Users/suiluj/projects/design-portal-frontend/node_modules/@angular/core/bundles/core.umd.js:4529:60 at ZoneDelegate.invoke (/Users/suiluj/projects/design-portal-frontend/node_modules/zone.js/dist/zone-node.js:392:26) at Object.onInvoke (/Users/suiluj/projects/design-portal-frontend/node_modules/@angular/core/bundles/core.umd.js:3922:33) at ZoneDelegate.invoke (/Users/suiluj/projects/design-portal-frontend/node_modules/zone.js/dist/zone-node.js:391:32) at Zone.run (/Users/suiluj/projects/design-portal-frontend/node_modules/zone.js/dist/zone-node.js:142:43) at NgZone.run (/Users/suiluj/projects/design-portal-frontend/node_modules/@angular/core/bundles/core.umd.js:3853:69) at PlatformRef_._bootstrapModuleFactoryWithZone (/Users/suiluj/projects/design-portal-frontend/node_modules/@angular/core/bundles/core.umd.js:4527:23) at PlatformRef_.bootstrapModuleFactory (/Users/suiluj/projects/design-portal-frontend/node_modules/@angular/core/bundles/core.umd.js:4509:21) at Object.renderModuleFactory (/Users/suiluj/projects/design-portal-frontend/node_modules/@angular/platform-server/bundles/platform-server.umd.js:2405:39) at View.engine (/Users/suiluj/projects/design-portal-frontend/dist/server.js:850:23)

What could have gone wrong in my set up?

Not quite understand what's the server side render from this code

Hi,
Would you please help me get more understanding about the Angular Universal?
I cloned your code and got it run, but I can't get what's the exactly meaning which is the server side render from the code.
my page started from Angular Cli:

snip20170330_1

page from npm start:

snip20170330_2

I also notice there is a server.ts for node express , and a AppServerModule for Anguar universal,
but I can't connect these two picecs, when will the AppServerModule be invoked? please help to give me answer, much thanks!

angular page start with server side argument.

first of all, sorry for my bad english.

I don't know how can i pass server side argument.

for example,

app.get('/foo', (req, res) => {
res.render('index', { req, testArg: 'hi' });
});

and, client side,

home-page works! <%= testArg %>

like this.

why am i doing this is my title and sns value is dynamically changed what pk is.
my url sample is localhost/items/:itemPk

and title and sns value is changed (for SEO) depends on itemPk.

I wish you can understand what I'm talking about.

Home Page does not load after adding ngb-carousel

Here is my angular-cli-json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "cli-universal-demo"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.scss"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}

And here is webpack.config.js :

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
entry: {
server: './src/server.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
target: 'node',
externals: [nodeExternals({
whitelist: [

   /^@ng-bootstrap\/ng-bootstrap/
 ]

})],
node: {
__dirname: true
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{ test: /.ts$/, loader: 'ts-loader' }
]
}
}

I also added the sass file for bootstrap in styles.sass
Home Page does not load after adding ngb-carousel. But it works if we route through button click. Also the bootstrap does not work for navigation bar

Import global extneral dependency (i.e google maps) and using in input decorattor

Thanks for this. Unfortunately I have a small issue. Installing an external dependency (i.e google maps) using npm install -S @types/google-maps and then using it as an input decorator
@Input() foo : google.maps.Map gives the error:

ReferenceError: google is not defined
    at Object.c (C:\work\tests\cli-universal-demo\dist\server.js:2601:31)
    at __webpack_require__ (C:\work\tests\cli-universal-demo\dist\server.js:20:30)
    at Object.c (C:\work\tests\cli-universal-demo\dist\server.js:3461:23)
    at __webpack_require__ (C:\work\tests\cli-universal-demo\dist\server.js:20:30)
    at Object.c (C:\work\tests\cli-universal-demo\dist\server.js:7441:20)
    at __webpack_require__ (C:\work\tests\cli-universal-demo\dist\server.js:20:30)
    at Object.<anonymous> (C:\work\tests\cli-universal-demo\dist\server.js:3550:10)
    at __webpack_require__ (C:\work\tests\cli-universal-demo\dist\server.js:20:30)
    at Object.<anonymous> (C:\work\tests\cli-universal-demo\dist\server.js:7566:37)
    at Object.<anonymous> (C:\work\tests\cli-universal-demo\dist\server.js:7589:30)

The server.js file at that line looks like this:

__decorate([
    core_1.Input(),
    __metadata("design:type", google.maps.Map)
], AppComponent.prototype, "f", void 0);
AppComponent = __decorate([
    core_1.Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })
], AppComponent);

Note that only using as input decorator (for now at least) gives the error. Using as input to functions or inside functions doesn't give any errors.

Deploying the universal app

I am facing issues in running the server.js file listed in dist folder even after installing all the required packages I am getting the following error
screenshot from 2017-07-19 11-37-37

listen in 0.0.0.0

Hi. I changed the file sever.js to listen in 0.0.0.0 but I can not get it to work. Can anybody help me.
This is the code?:

app.listen(PORT, "0.0.0.0" () => {
  console.log(`listening on http://localhost:${PORT}!`);
});

Thanks

ng build with --watch

I really like this setup. How would you approach ng build with --watch for local development?

getting ReferenceError: window is not defined

am getting the following error when am trying to run the server with
node dist/server.js
before i run the build commands for the AOT , server and its works without any error, but when running the server.js am getting :

var WEBPACK_AMD_DEFINE_RESULT;/* Web Font Loader v1.6.28 - (c) Adobe Systems, Google. License: Apache 2.0 */(function(){function aa(a,b,c){return a.call.apply(a.bind,arguments)}function ba(a,b,c){if(!a)throw Error();if(2<arguments.length){var d=Array.prototype.slice.call(arguments,2);return function(){var c=Array.prototype.slice.call(arguments);Array.prototype.unshift.apply(c,d);return a.apply(b,c)}}return function(){return a.apply(b,arguments)}}function p(a,b,c){p=Function.prototype.bind&&-1!=Function.prototype.bind.toString().indexOf("native code")?aa:ba;return p.apply(null,arguments)}var q=Date.now||function(){return+new Date};function ca(a,b){this.a=a;this.o=b||a;this.c=this.o.document}var da=!!window.FontFace;function t(a,b,c,d){b=a.c.createElement(b);if(c)for(var e in c)c.hasOwnProperty(e)&&("style"==e?b.style.cssText=c[e]:b.setAttribute(e,c[e]));d&&b.appendChild(a.c.createTextNode(d));return b}function u(a,b,c){a=a.c.getElem

ReferenceError: window is not defined

and am not sure which component causing this error !!

Access window

Hi,

What would be the best way to get a hold of the window object?

ngb-X components are not loaded (@ng-bootstrap branch)

Hi,

First of all thanks a lot for this repo! is the only good one I could find on how to plug ng-bootstrap and angular-universal.

The issue can be reproduced when cloning the @ng-bootstrap branch.

Just add a simple component like in the home-page.component.html file:
<ngb-rating [rate]="3"></ngb-rating>

and see how it fails in the browser:

Can't bind to 'rate' since it isn't a known property of 'ngb-rating'.
1. If 'ngb-rating' is an Angular component and it has 'rate' input, then verify that it is part of this module.

Any thoughts?

Thanks!

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.