Comments (19)
To test I took a Web Plesk - VPS Classic on OVH
(15.59 euros instead of 3.59 euros for a vps)
lots of features but lots of possibilities for incorrect configuration
If i find a solution i will give it to you
The stuff for a simple VPS works is here
#1
from angular-app.
Hi Mehmet,
I did some tests with the angular9-app.git repository and your modifications.
1/ git clone https://github.com/ganatan/angular9-app.git
2/ Your files without modifications
- server.ts
- tsconfig.app.json
- tsconfig.server.json
- tsconfig.json
3/ Three files with modifications
- mainserver.ts
ngExpressEngine not necessary - angular.json
changes to the dist directory - package.json
just for the example
"@angular/service-worker": "9.0.1",
"@asymmetrik/ngx-leaflet": "6.0.1",
"leaflet": "1.6.0",
"ng2-charts": "2.3.0",
4/ Solution
I think your angular.json had a wrong configuration.
5/ Note
With Angular version 9 google use a directory for each project.
Like the nrwl team (https://nrwl.io/).
It would be more effective with mono repos
In your project I would rather use dist/kodumunblogu/browser
Tell me if it works.
main.server.ts
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
export { AppServerModule } from './app/app.server.module';
export { renderModule, renderModuleFactory } from '@angular/platform-server';
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"kodumunblogu": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest",
"src/sitemap.xml",
"src/robots.txt"
],
"styles": [
"src/styles.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/assets/params/css/index.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/assets/params/js/index.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "kodumunblogu:build"
},
"configurations": {
"production": {
"browserTarget": "kodumunblogu:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "kodumunblogu:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest"
],
"styles": ["src/styles.css"],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": ["**/node_modules/**"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "kodumunblogu:serve"
},
"configurations": {
"production": {
"devServerTarget": "kodumunblogu:serve:production"
}
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": "kodumunblogu:build",
"serverTarget": "kodumunblogu:server"
},
"configurations": {
"production": {
"browserTarget": "kodumunblogu:build:production",
"serverTarget": "kodumunblogu:server:production"
}
}
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"browserTarget": "kodumunblogu:build:production",
"serverTarget": "kodumunblogu:server:production",
"routes": ["/"]
},
"configurations": {
"production": {}
}
}
}
}
},
"defaultProject": "kodumunblogu"
}
package.json
{
"name": "kodumunblogu",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"compile:server_bak": "webpack --config webpack.server.config.js --progress --colors",
"build:ssr_bak": "npm run build:client-and-server-bundles && npm run compile:server",
"serve:ssr_bak": "node dist/server",
"build:client-and-server-bundles_bak": "ng build --prod --aot && ng run kodumunblogu:server:production --bundleDependencies all",
"dev:ssr": "ng run kodumunblogu:serve-ssr",
"serve:ssr": "node dist/server/main.js",
"build:ssr": "ng build --prod && ng run kodumunblogu:server:production",
"prerender": "ng run kodumunblogu:prerender",
"postinstall": "ngcc"
},
"private": true,
"dependencies": {
"@angular/animations": "^9.0.0",
"@angular/cdk": "^9.0.0",
"@angular/common": "~9.0.0",
"@angular/compiler": "~9.0.0",
"@angular/core": "~9.0.0",
"@angular/forms": "~9.0.0",
"@angular/material": "^9.0.0",
"@angular/platform-browser": "~9.0.0",
"@angular/platform-browser-dynamic": "~9.0.0",
"@angular/platform-server": "^9.0.0",
"@angular/router": "~9.0.0",
"@angular/service-worker": "9.0.1",
"@asymmetrik/ngx-leaflet": "6.0.1",
"@fortawesome/fontawesome-free": "5.12.1",
"@fortawesome/angular-fontawesome": "^0.6.0",
"@fortawesome/fontawesome-svg-core": "^1.2.15",
"@fortawesome/free-brands-svg-icons": "^5.7.2",
"@fortawesome/free-solid-svg-icons": "^5.7.2",
"@fullcalendar/core": "^4.3.1",
"@nguniversal/express-engine": "^9.0.0",
"@ngx-share/button": "^7.1.2",
"@ngx-share/buttons": "^7.1.2",
"@ngx-share/core": "^7.1.2",
"bootstrap": "^4.3.1",
"chart.js": "^2.9.3",
"core-js": "^2.6.5",
"express": "^4.17.1",
"jquery": "^3.3.1",
"leaflet": "1.6.0",
"ng2-charts": "2.3.0",
"primeicons": "^2.0.0",
"primeng": "^9.0.0-rc.4",
"quill": "^1.3.6",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"webpack-node-externals": "^1.7.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.1",
"@angular/cli": "~9.0.1",
"@angular/compiler-cli": "~9.0.0",
"@angular/language-service": "~9.0.0",
"@nguniversal/builders": "^9.0.0",
"@types/express": "^4.17.0",
"@types/jasmine": "~3.3.10",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.5",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-loader": "^4.0.0",
"ts-node": "~8.0.3",
"tslint": "~5.14.0",
"typescript": "~3.7.5",
"webpack-cli": "^3.1.0"
}
}
from angular-app.
Thank you.
I checked it the way you said and corrected what needed to be fixed. I added "angular / service-worker".
My "npm run build: ssr" and "npm run serve: ssr" commands work fine. There is no problem with these.
When I look at the "localhost: 4000" page source in the hidden tab, the page source occurs. There's no problem with that.
But it doesn't work when I want to get the project live on the server.
I think there is a problem with the server, but when I compile Angular 8 it works without problems.
When I run the project with "serve: ssr" I get a warning like this. Is this the problem? https://prnt.sc/r38s4c
The project is working, even if this warning is given. It just doesn't work on the server.
On the server, my settings are as follows: https://prnt.sc/r38o0b
The site opens while it is set in this way. But when I open the source code, "ssr" doesn't work. It also doesn't work when I open the page source in the hidden tab.
My current settings and my package.json file are like this: https://gist.github.com/MehmetSert/d8eb11b1e5ad59b4be6a75eaf50d57fe
angular.json: https://gist.github.com/MehmetSert/2b9a26f3cfa386e5d960c6145068c9cf
Maybe I'm doing the Node.js setting wrong in Plesk Panel. But when Angular is 8 it works with the same adjustment.
I really did not understand the problem. I think Angular 9 doesn't work on the server.
from angular-app.
I made ssh access to the server. I ran "main.js" with "node". It worked on "ipAdress: 4000" without any problems. I think I am making errors in the Node.js definitions in Plesk Panel. I will try to solve it.
from angular-app.
Hi,
Your work is good. Thanks for that, but I have same issue. Were you able to find a solution? Everything seems correct but no SSR.
I'm desperate for Universal. The sample project in Angular.io is also problematic. I've been trying for a long time but there is always a problem.
Do you think we should give up this love?
from angular-app.
Deployment with a simple VPS works.
All the stuff here
from angular-app.
Hi,
Your work is good. Thanks for that, but I have same issue. Were you able to find a solution? Everything seems correct but no SSR.I'm desperate for Universal. The sample project in Angular.io is also problematic. I've been trying for a long time but there is always a problem.
Do you think we should give up this love?
Unfortunately. I think we are having a server related problem. When I compile the same project with Angular 8, ssr works. When I update and compile to Angular 9, ssr does not work.
from angular-app.
SSR Not work on angular 9.. why ? I dont know.
from angular-app.
Following the angular documentation it works.
I have made this tuto
https://www.ganatan.com/tutorials/server-side-rendering-with-angular-universal
from angular-app.
I have already following this tutorial all work. But the code source is not SSR.
SEO dont work, html is same of non SSR
rendering.. @ganatan
from angular-app.
I have already following this tutorial all work. But the code source is not SSR.
SEO dont work, html is same of non SSR
rendering.. @ganatan
It will probably work if you open the page source link in the hidden tab.
I wish this was my problem :)
SSR does not work for me, it does not work on localhost and does not work on the server.
from angular-app.
It will probably work if you open the page source link in the hidden tab.
No.. Nothing work in local and on Live server ! :/
from angular-app.
I agree with you
Actually you can't see the ssr results on your browser (chrome for example)
Perhaps because of angular 9 and the browser side
But SSR works on the server side with google robots
Use curl to verify if
for example on localhost
curl http://localhost:4000/ > ssr-results.txt
With live demo
curl https://angular.ganatan.com/ > ssr-results.txt
and verify the content of ssr-results.txt
you will see the html code (here the text features)
Another proof use SEOQUAKE (SEO Toolbox) to verify SEO on angular.ganatan.com/
I apply ssr also on www.ganatan.com and angular.ganatan.com
check with google requests "angular ssr" or 'angular bootstrap"
I hope it will help
In french we say
"L'absence de preuves n'est pas la preuve de l'absence"
from angular-app.
I'd watch that. But at the moment I can't launch my app on nodejs on cpanel
I will soon abandon the idea of using the Framework js unfortunately :(
from angular-app.
Thank you very much for your answers. I clone your project and cannot publish it on my own server. I cannot publish it in my own project in the same way. However, I can publish an Angular 8 version of my own project. I can't do that in Angular 9. The server is the same server, the settings are the same. I use VPS and Plesk panel.
Since it runs on localhost, the problem is very likely server originated. But Angular 8 works. I believe the problem I was having was caused by the server, but I have no idea what configuration needs to be done. Do you have any suggestions?
I am writing these messages to you because you have used Angular 9 and broadcast it with SSR and you have used it. Please excuse.
from angular-app.
Thank you very much for your answers. I clone your project and cannot publish it on my own server. I cannot publish it in my own project in the same way. However, I can publish an Angular 8 version of my own project. I can't do that in Angular 9. The server is the same server, the settings are the same. I use VPS and Plesk panel.
Since it runs on localhost, the problem is very likely server originated. But Angular 8 works. I believe the problem I was having was caused by the server, but I have no idea what configuration needs to be done. Do you have any suggestions?
I am writing these messages to you because you have used Angular 9 and broadcast it with SSR and you have used it. Please excuse.
Plesk with nodejs application ? In Cpanel same (With PASSENGER) server don't launch so I'm stuck.
from angular-app.
Thank you so much. I will continue to research and try. I will follow here.
Thanks.
from angular-app.
Actually you can't see the ssr results on your browser (chrome for example)
Perhaps because of angular 9 and the browser sideBut SSR works on the server side with google robots
Use curl to verify if
for example on localhost
curl http://localhost:4000/ > ssr-results.txtWith live demo
curl https://angular.ganatan.com/ > ssr-results.txt
and verify the content of ssr-results.txt
you will see the html code (here the text features)Another proof use SEOQUAKE (SEO Toolbox) to verify SEO on angular.ganatan.com/
@ganatan Hello, do you have any ideas why this happening? Pretty weird as to me, same server returns different responses whether it's a curl request or regular browser request?
from angular-app.
from angular-app.
Related Issues (14)
- No content for crawlers HOT 15
- Could you add i18n with ngx-translate/core ?
- SSR rendering not working for https HOT 3
- Can't change the Local Json setting to use Crud HOT 1
- rien a voir
- Issue - 404
- TransferState and NgRx HOT 1
- Mobile Performance
- Maybe this is a bug
- ReferenceError: window is not defined for https://angular.ganatan.com/leaflet
- Specify license
- Your live demo file size is so small HOT 1
- Deployed app on heroku delay loaded css HOT 3
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.
from angular-app.