Understanding Angular Universal and Creating Build
Posted By : Pawanpreet Singh | 29-Dec-2017
Angular uses HTML templates with javascript and parse it to the actual web page at the run time using a browser. Now using Angular Universal one can render Angular on a server. There are various reasons why one needs server-side rendering like Search Engine Optimization, Social Sites Content Embedding in sites like Twitter, Facebook, etc. With Angular 4.0 it ships along with packages of core angular titled platform-browser and platform-server.
Create basic angular application using @angular/
ng new my-new-app
cd my-new-app
Because we want our app to work on a server, we have to do some changes because now our application will have two starting points. Now we have to create two type-script files named browser.app.module and server.app.module in the same location as app.module.ts file.
browser.module
This module will call BrowserModule.withServerTransition which conveys the angular that view will be changed after the whole framework is loaded in the memory of the browser. Here we need to provide appId which is just a string.
import { AppModule } from './app.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [],
imports: [
BrowserModule.withServerTransition({
appId: 'your-app-id'
}),
AppModule
],
providers: [],
bootstrap: [AppComponent]
})
export class BrowserAppModule {}
server.module
This module is not installed by default, we have to install it using the following command
yarn add @angular/platform-server
npm install @angular/platform-server --save
Let's add the following code to server module file
import { AppModule } from './app.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//Installed separatly
import { ServerModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
@NgModule({
declarations: [],
imports: [
//Make sure the string matches
BrowserModule.withServerTransition({
appId: 'my-app-id'
}),
ServerModule,
AppModule
],
providers: [],
bootstrap: [AppComponent]
})
export class ServerAppModule {}
Now we need the new entry point for server lets create a new file typescript server.main in the same location as
export { ServerAppModule } from './app/server.app.module';
Now we need separate ts config file for a server so that while rendering at the server it can be used.
tsconfig.browser.json
{
"extends": "../tsconfig.json",
"angularCompilerOptions": {
"entryModule": "./app/server.app.module#ServerAppModule"
},
"exclude": []
}
{
"extends": "../tsconfig.json",
"angularCompilerOptions": {
"entryModule": "./app/browser.app.module#BrowserAppModule"
},
"exclude": ["test.ts", "**/*.spec.ts"]
}
We are not done yet now we have to edit the angular-
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets", "favicon.ico"],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.browser.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": ["styles.css"],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
},
{
"root": "src",
"outDir": "dist-server",
"assets": ["assets", "favicon.ico"],
"index": "index.html",
"main": "server.main.ts",
"platform": "server",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.server.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": ["styles.css"],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
Let's create the build with the following command
ng build --prod --app 1
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Pawanpreet Singh
Pawanpreet is an seasoned Project Manager with a wealth of knowledge in software development, specializing in frontend and mobile applications. He possesses a strong command of project management tools, including Jira, Trello, and others. With a proven track record, he has successfully overseen the delivery of multiple software development projects, managing budgets and large teams. Notable projects he has contributed to include TimeForge, Yogyata, Kairos, Veto, Inspirien App, and more. Pawanpreet excels in developing and maintaining project plans, schedules, and budgets, ensuring timely delivery while staying within allocated resources. He collaborates closely with clients to define project scope and requirements, establish timelines and milestones, and effectively manage expectations. Regular project status meetings are conducted by him, providing clients and stakeholders with consistent updates on project progress, risks, and issues. Additionally, he coaches and mentors project leads, offering guidance on project management best practices and supporting their professional development.