Build Faster JavaScript Web Apps with Angular Universal, a TransferState Service ...

Search Engine Optimization (SEO) is vital for most web applications. You can build SEO-friendly Angular apps with Angular Universal , but what about the performance and efficiency of such an application? This post will show you how to build fast Angular apps that use client and server resources efficiency while providing server-side rendering (SSR) for SEO purposes.

In this post we will:

Create an Angular application Add server-side rendering with Angular Universal Set up an HTTP_INTERCEPTOR with a TransferState service, to prevent duplicate calls to server resources Create a route resolver to protect against slow external APIs.

To accomplish the tasks in this post you will need to install Node.js and npm (The Node.js installation will also install npm) as well as Angular CLI .cURLfor macOS , linux , or windows 10 ( included with build 1803 and later) and Git are referred to in the instructions but are not required.

To learn most effectively from this post you should have the following:

Working knowledge of TypeScript and the Angular framework Familiarity with Angular observables and dependency injection

There is a companion project for this post available on GitHub . Each major step in this post has its own branch in the repository.

Create the Angular project

Every Angular project begins with installation and initialization of the packages. Type the following at the command prompt in the directory under which you would like to create the project directory:

ng new angular-universal-transfer-state --style css --routing true --directory angularApp

When the project is initialized, navigate to its directory:

cd angular-universal-transfer-state

And run the application by typing:

ng serve

You should see following output in the console:

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2018-10-29T08:58:37.685Z Hash: cb54e4608cfb1115882b Time: 7682ms chunk {main} main.js, (main) 10.7 kB [initial] [rendered] chunk {polyfills} polyfills.js, (polyfills) 227 kB [initial] [rendered] chunk {runtime} runtime.js, (runtime) 5.22 kB [entry] [rendered] chunk {styles} styles.js, (styles) 15.9 kB [initial] [rendered] chunk {vendor} vendor.js, (vendor) 3.29 MB [initial] [rendered]

After opening the URL provided in the command output, http://localhost:4200, you should see the following in your browser:

Build Faster JavaScript Web Apps with Angular Universal, a TransferState Service ...
Add server-side rendering with Angular Universal

Type the following at the command prompt to install the Angular Universal module:

ng add @ng-toolkit/universal

We can check to see if Angular Universal is working correctly by running our app and performing a curl request on it:

npm run build:prod;npm run server curl http://localhost:8080

If you don’t want to use curl you can open the URL in a browser and inspect the page source. The results, as follows, should be the same.

Ellipsis (“ ... ”) in the code below indicates a section redacted for brevity.

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>angular-universal-i18n</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="styles.3bb2a9d4949b7dc120a9.css"><style ng-transition="app-root"> </style></head> <body> <app-root _nghost-sc0="" ng-version="7.0.4"><div _ngcontent-sc0="" style="text-align:center"> <h1 _ngcontent-sc0=""> Welcome to angular-universal-i18n! </h1> ... </div><h2 _ngcontent-sc0="">Here are some links to help you start: </h2> <ul _ngcontent-sc0=""> <li _ngcontent-sc0=""><h2 _ngcontent-sc0=""> <a _ngcontent-sc0="" href="" rel="noopener" target="_blank">Tour of Heroes</a></h2> </li> <li _ngcontent-sc0=""><h2 _ngcontent-sc0=""> <a _ngcontent-sc0="" href="" rel="noopener" target="_blank">CLI Documentation</a></h2> </li> <li _ngcontent-sc0=""><h2 _ngcontent-sc0=""> <a _ngcontent-sc0="" href="" rel="noopener" target="_blank">Angular blog</a></h2> </li></ul></app-root> <script type="text/javascript" src="runtime.ec2944dd8b20ec099bf3.js"></script> <script type="text/javascript" src="polyfills.c6871e56cb80756a5498.js"></script> <script type="text/javascript" src="main.f27bf40180c4a8476e2e.js"></script> <script id="app-root-state" type="application/json">{}</script></body></html>

You can run the following commands to catch up to this step in the project:

git clone cd angular-universal-transfer-state git checkout step1 cd angularApp npm install npm run build:prod npm run server Create an external API

Most applications perform calls to one or more API, whether on the application’s own server or on a 3rd party host. Our application will make calls to a service we will create and run on the Node.js server at a port address (8081) that is different than both the application’s port (4200) and the server-side rendering port (8080).

Before creating the service we’ll build a simple Node.js application with two endpoints which we will consume inside the application using the service. Create an externalApi directory outside of the angular-universal-transfer-state application’s directory structure. In that directory create a file externalApi.js (so the relative path would be: ../externalApi/externalApi.js ) and place the following code in it:

const express = require('express'); const app = express(); app.get('/api/fast', (req, res) => { console.log('fast endpoint hit'); res.send({response: 'fast'}); }); app.get('/api/slow', (req, res) => { setTimeout(() => { console.log('slow endpoint hit'); res.send({response: 'slow'}); }, 5000); }); app.listen(8081, () => { console.log('Listening'); }); Because we

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

本文标题:Build Faster JavaScript Web Apps with Angular Universal, a TransferState Service ...

技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(27)