skip to Main Content

I have an angular application that I want to make it an universal angular application.

The reason behind this to make my application more SEO friendly.

The followed the steps described in https://angular.io/guide/universal and I even reproduced the example in https://github.com/mappedinn/how-to-create-angular-univeral.

This was almost successful. The only issue is that the browser is not showing favicon.ico in the tab when running the application through the following commands:

npm run build:ssr
npm run serve:ssr

Refer to the picture below FAVICON.ICO NOT DISPLAYED

But, in case of running the application through the command ng serve, the favicon is available.

Please refer to the following pic:
FAVICON.ICO DISPLAYED

So, could you please help with this issue?


Update 1

Since the folder src/assets/ does not exist. It has been created and it includes now the file favicon.ico.

Building the SSR was correct (the command npm run build:ssr).

Serving the SSR generated an error (the command npm run serve:ssr)

> [email protected] serve:ssr /home/amine/docker-projects/how-convert-to-universal
> node dist/server

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::4000
    at Object._errnoException (util.js:1022:11)
    at _exceptionWithHostPort (util.js:1044:20)
    at Server.setupListenHandle [as _listen2] (net.js:1367:14)
    at listenInCluster (net.js:1408:12)
    at Server.listen (net.js:1492:7)
    at Function.listen (/home/amine/docker-projects/how-convert-to-universal/dist/server.js:44577:24)
    at Object.<anonymous> (/home/amine/docker-projects/how-convert-to-universal/dist/server.js:116:5)
    at __webpack_require__ (/home/amine/docker-projects/how-convert-to-universal/dist/server.js:20:30)
    at Object.defineProperty.value (/home/amine/docker-projects/how-convert-to-universal/dist/server.js:69:18)
    at Object.<anonymous> (/home/amine/docker-projects/how-convert-to-universal/dist/server.js:72:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/amine/.npm/_logs/2018-09-18T16_21_55_407Z-debug.log

Update 2

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/local/bin/npm', 'run', 'serve:ssr' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preserve:ssr', 'serve:ssr', 'postserve:ssr' ]
5 info lifecycle [email protected]~preserve:ssr: [email protected]
6 info lifecycle [email protected]~serve:ssr: [email protected]
7 verbose lifecycle [email protected]~serve:ssr: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~serve:ssr: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/amine/docker-projects/how-convert-to-universal/node_modules/.bin:/usr/local/apache/spark-2.3.1-bin-hadoop2.7:/home/amine/anaconda3/bin:/home/amine/google-cloud-sdk/bin:/usr/local/apache/spark-2.3.1-bin-hadoop2.7:/home/amine/anaconda3/bin:/home/amine/google-cloud-sdk/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/usr/local/apache/hadoop-2.9.0/bin:/usr/local/apache/hadoop-2.9.0/sbin:/usr/local/apache/hadoop-2.9.0/bin:/usr/local/apache/hadoop-2.9.0/sbin
9 verbose lifecycle [email protected]~serve:ssr: CWD: /home/amine/docker-projects/how-convert-to-universal
10 silly lifecycle [email protected]~serve:ssr: Args: [ '-c', 'node dist/server' ]
11 silly lifecycle [email protected]~serve:ssr: Returned: code: 1  signal: null
12 info lifecycle [email protected]~serve:ssr: Failed to exec serve:ssr script
13 verbose stack Error: [email protected] serve:ssr: `node dist/server`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/amine/docker-projects/how-convert-to-universal
16 verbose Linux 4.15.0-34-generic
17 verbose argv "/usr/bin/node" "/usr/local/bin/npm" "run" "serve:ssr"
18 verbose node v8.10.0
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] serve:ssr: `node dist/server`
22 error Exit status 1
23 error Failed at the [email protected] serve:ssr script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

2

Answers


  1. Chosen as BEST ANSWER

    I found a nice article for that https://medium.com/@maciejtreder/angular-server-side-rendering-with-ng-toolkit-universal-c08479ca688

    A simple ng add @ng-toolkit/universal will convert the application to universal.

    Extra: ng add @ng-toolkit/serverless for server side rendering


  2. make sure in your angular.json file you include it under the assets section

    "assets": [
        // add any images paths here, or add to your assets folder and put folder path here
    ]
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search