angular 通用服务器端呈现不显示图标
server side rendering in angular universal not showing fav icon
我有一个 angular 应用程序，我想让它成为通用 angular 应用程序。
这背后的原因是为了让我的应用程序对 SEO 更友好。
遵循 https://angular.io/guide/universal and I even reproduced the example in https://github.com/mappedinn/how-to-create-angular-univeral 中描述的步骤。
这几乎是成功的。唯一的问题是，当通过以下命令 运行 应用程序时，浏览器未在选项卡中显示 favicon.ico：
npm run build:ssr
npm run serve:ssr
参考下图
但是，如果 运行 通过命令 ng serve 应用程序，则可以使用该图标。
请参考下图：
那么，你能帮忙解决这个问题吗？
更新 1
因为文件夹 src/assets/ 不存在。它已创建，现在包含文件 favicon.ico.
构建 SSR 是正确的（命令 npm run build:ssr）。
服务 SSR 产生错误（命令 npm run serve:ssr）
> angular-io-example@1.0.0 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! angular-io-example@1.0.0 serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-io-example@1.0.0 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
更新 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 npm@6.4.1
3 info using node@v8.10.0
4 verbose run-script [ 'preserve:ssr', 'serve:ssr', 'postserve:ssr' ]
5 info lifecycle angular-io-example@1.0.0~preserve:ssr: angular-io-example@1.0.0
6 info lifecycle angular-io-example@1.0.0~serve:ssr: angular-io-example@1.0.0
7 verbose lifecycle angular-io-example@1.0.0~serve:ssr: unsafe-perm in lifecycle true
8 verbose lifecycle angular-io-example@1.0.0~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 angular-io-example@1.0.0~serve:ssr: CWD: /home/amine/docker-projects/how-convert-to-universal
10 silly lifecycle angular-io-example@1.0.0~serve:ssr: Args: [ '-c', 'node dist/server' ]
11 silly lifecycle angular-io-example@1.0.0~serve:ssr: Returned: code: 1 signal: null
12 info lifecycle angular-io-example@1.0.0~serve:ssr: Failed to exec serve:ssr script
13 verbose stack Error: angular-io-example@1.0.0 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 angular-io-example@1.0.0
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 angular-io-example@1.0.0 serve:ssr: `node dist/server`
22 error Exit status 1
23 error Failed at the angular-io-example@1.0.0 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 ]
确保在您的 angular.json 文件中将其包含在资产部分下
"assets": [
// add any images paths here, or add to your assets folder and put folder path here
]
我找到了一篇很好的文章 https://medium.com/@maciejtreder/angular-server-side-rendering-with-ng-toolkit-universal-c08479ca688
一个简单的 ng add @ng-toolkit/universal 即可将应用程序转换为通用应用程序。
额外：ng add @ng-toolkit/serverless 用于服务器端渲染
我有一个 angular 应用程序，我想让它成为通用 angular 应用程序。
这背后的原因是为了让我的应用程序对 SEO 更友好。
遵循 https://angular.io/guide/universal and I even reproduced the example in https://github.com/mappedinn/how-to-create-angular-univeral 中描述的步骤。
这几乎是成功的。唯一的问题是，当通过以下命令 运行 应用程序时，浏览器未在选项卡中显示 favicon.ico：
npm run build:ssr
npm run serve:ssr
参考下图
但是，如果 运行 通过命令 ng serve 应用程序，则可以使用该图标。
请参考下图：
那么，你能帮忙解决这个问题吗？
更新 1
因为文件夹 src/assets/ 不存在。它已创建，现在包含文件 favicon.ico.
构建 SSR 是正确的（命令 npm run build:ssr）。
服务 SSR 产生错误（命令 npm run serve:ssr）
> angular-io-example@1.0.0 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! angular-io-example@1.0.0 serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-io-example@1.0.0 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
更新 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 npm@6.4.1
3 info using node@v8.10.0
4 verbose run-script [ 'preserve:ssr', 'serve:ssr', 'postserve:ssr' ]
5 info lifecycle angular-io-example@1.0.0~preserve:ssr: angular-io-example@1.0.0
6 info lifecycle angular-io-example@1.0.0~serve:ssr: angular-io-example@1.0.0
7 verbose lifecycle angular-io-example@1.0.0~serve:ssr: unsafe-perm in lifecycle true
8 verbose lifecycle angular-io-example@1.0.0~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 angular-io-example@1.0.0~serve:ssr: CWD: /home/amine/docker-projects/how-convert-to-universal
10 silly lifecycle angular-io-example@1.0.0~serve:ssr: Args: [ '-c', 'node dist/server' ]
11 silly lifecycle angular-io-example@1.0.0~serve:ssr: Returned: code: 1 signal: null
12 info lifecycle angular-io-example@1.0.0~serve:ssr: Failed to exec serve:ssr script
13 verbose stack Error: angular-io-example@1.0.0 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 angular-io-example@1.0.0
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 angular-io-example@1.0.0 serve:ssr: `node dist/server`
22 error Exit status 1
23 error Failed at the angular-io-example@1.0.0 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 ]
确保在您的 angular.json 文件中将其包含在资产部分下
"assets": [
// add any images paths here, or add to your assets folder and put folder path here
]
我找到了一篇很好的文章 https://medium.com/@maciejtreder/angular-server-side-rendering-with-ng-toolkit-universal-c08479ca688
一个简单的 ng add @ng-toolkit/universal 即可将应用程序转换为通用应用程序。
额外：ng add @ng-toolkit/serverless 用于服务器端渲染