Universal Angular for SSR in Angular 8
We know in default Angular App is not SEO friendly. In this post we will walk through how we can make our angular app SEO friendly using server side rendering (SSR) using Universal Angular.
Why use Server Side Rendering (SSR)?
There are 3 reasons for create angular application with server side rendering.
- Web crawlers through search engine optimization (SEO).
- Improve performance on mobile.
- Show the first page quickly.
Step 1: Install the Angular CLI
Install the angular cli globaly using npm
, open a terminal or console using following command for creating angular project.
Note: If already installed angular cli then skip step 1.
Must be ensure before installation of angular cli nodejs should be installed.
npm install -g @angular/cli
Step 2: Create Application
Create an application using below command.
ng new mproject
Step 3: Add Angular Universal in Your Application
Angular Universal, a technology that renders Angular applications on the server. Install Angular Universal using following command.
ng add @nguniversal/express-engine --clientProject mproject
The command create following files.
src/
main.server.ts * bootstrapper for server app
app/ ... application code
app.server.module.ts * server-side application module
server.ts * express web server
tsconfig.server.json * TypeScript server configuration
webpack.server.config.js * webpack server configuration
Step 4: Run This Application
You can run Server Side Application using following commands.
npm run build:ssr
npm run serve:ssr
Open a browser and navigate to http://localhost:4000/ for access this application.
This application working as nodejs project. You can also run this project using following command.
node dist/server
Check This Application SEO Friendly
You can check this application SEO friendly. You can access your application using following commands. And Google access your web application pages someting like this.
curl http://localhost:4000
Change Port in SSR Angular Application
If you want to change port in Server Side Rendered Angular Application then edit server.ts file and go to line no 90 const PORT = process.env.PORT || 4000;
and chagne 4000 to 4005 (as you want).
/**
* *** NOTE ON IMPORTING FROM ANGULAR AND NGUNIVERSAL IN THIS FILE ***
*
* If your application uses third-party dependencies, you'll need to
* either use Webpack or the Angular CLI's `bundleDependencies` feature
* in order to adequately package them for use on the server without a
* node_modules directory.
*
* However, due to the nature of the CLI's `bundleDependencies`, importing
* Angular in this file will create a different instance of Angular than
* the version in the compiled application code. This leads to unavoidable
* conflicts. Therefore, please do not explicitly import from @angular or
* @nguniversal in this file. You can export any needed resources
* from your application's main.server.ts file, as seen below with the
* import for `ngExpressEngine`.
*/
import 'zone.js/dist/zone-node';
import * as express from 'express';
import {join} from 'path';
// Express server
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render('index', { req });
});
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
Conclusion
In this tutorial we have learnt how to run Angular 8 application on the server using Angular Universal. And how to make Angular application SEO friendly and change port of this application.