An Angular Universal static site generator
Ever wanted to make a static site from your Angular app? Now that we have finalized Angular Universal, you can! Universal Sitegen takes your angular app, builds it, then spits out static pages for each route. If you're building a website that you don't need a client side JS framework for, then this is pefect. Blogs, landing pages, sales pages, launch pages, company sites, you get the point.
yarn add @angularclass/universal-sitegen
There are two ways to build your site:
No matter what approach you use, you need the following setup before you're ready to go.
First, make sure your AppModule is importing BrowserModule.withServerTransition()
and your routes. As it should.
// app.module.ts
// .....imports
@NgModule({
imports: [
BrowserModule.withServerTransition({ appId: 'my-site' }),
ROUTES
],
// declarations
// providers
// bootstrap
})
export class AppModule {}Next, create a ServerModule for Universal, and import your AppModule
// server.module.ts
import { NgModule } from '@angular/core'
import { ServerModule } from '@angular/platform-server'
import { App } from './app.component'
import { AppModule } from './app.module'
@NgModule({
imports: [ServerModule, AppModule],
bootstrap: [App]
})
export class AppServerModule {}There is a Demo App that has the basics. Great place to start to getting your app ready.
Make sure you followed the steps above first. To build your site with the provided CLI (preferred), you only need to do a few things.
Because your app is never going to be ran in the browser and only node, you might have to adjust your webpack config. Look at the demo webpack config for what it should look like.
Next, build your app. After you build it, you need to create a universal.js file with options on the root of your app.
module.exports = {
// routes for your angular app. mirrors your routes file
routes: [
"/",
"/about"
],
// or getRoutes() for async routes you need to get first.
getRoutes() {
return someService.getMyRoutes()
},
// output folder for your site
outputPath: "site",
// path to the compiled Server NgModule or NgModuleFactory with the #ExportName of the module
serverModuleOrFactoryPath: "./dist/bundle#AppServerModule",
// path to the root html page all pages will be injected into
indexHTMLPath: "./src/index.html"
}After that is all done, add a script in your package.json to build the static site using the cli:
{
"scripts": {
"universal": "universal build"
}
}The universal build command will build your app as a static site, and output the html files to the outpath you specified in universal.js.
Follow the common steps above first. You need to create an entry file for the site generator:
// static.ts
import { generateSite } from '@angularclass/universal-sitegen'
import { AppServerModule } from './server.module'
generateSite(
// NgModule or NgModuleFactory for the ServerModule you created
AppServerModule,
// index html file for all routes
require('./index.html'),
// options object
{
// routes for your app
routes: [
'/',
'/about'
],
// path to output the site
outputPath: 'universal-site'
}
)
.then(() => console.log('site built'))Once that is done, build your app like you normally would. Because your static app will over ever be ran in Node, you can change your webpack config. Check out the demo webpack config
After you build it, all you have to do is execute the bundled file.
node dist/bundle.js
This will generate your static site.
enjoy — AngularClass
Learn AngularJS, Angular, and Modern Web Development from the best. Looking for corporate Angular training, want to host us, or Angular consulting? patrick@angularclass.com