问题
I have a requirement to convert Angular 4 web app to Angular Universal.The reason for that is currently, the web app is not able to be properly indexed by Google (and Facebook social previews thumbnails) because it's a single page app and rendered on the client side.So now I need to implement Angular Universal, server-side rendering.
I got the knowledge of how to create a new Angular Universal app using this great video series.
Question: Can you please tell me the direction which I have to follow the convert existing app as an Angular Universal one.Maybe a nice URL or steps or whatever the direction will be highly appreciated.
Note: Here angular version is not a problem.Either 2
or 4
.
回答1:
From this blog (web archive backup)
First npm install --save @angular/platform-server @angular/animations
Edit /src/app/app.module.ts
and change the BrowserModule import to BrowserModule.withServerTransition({appId: 'your-app-name'}),
Create a file /src/app/app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
ServerModule,
AppModule
],
bootstrap: [AppComponent]
})
export class AppServerModule { }
Create a file /src/server.ts
import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';
const PORT = 4000;
enableProdMode();
const app = express();
let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();
app.engine('html', (_, options, callback) => {
const opts = { document: template, url: options.req.url };
renderModuleFactory(AppServerModuleNgFactory, opts)
.then(html => callback(null, html));
});
app.set('view engine', 'html');
app.set('views', 'src')
app.get('*.*', express.static(join(__dirname, '..', 'dist')));
app.get('*', (req, res) => {
res.render('index', { req });
});
app.listen(PORT, () => {
console.log(`listening on http://localhost:${PORT}!`);
});
Edit /src/tsconfig.app.json
and add server.ts
to the exclude
array
Edit /tsconfig.json
and after the "compilerOptions"
node add the following
"angularCompilerOptions": {
"genDir": "./dist/ngfactory",
"entryModule": "./src/app/app.module#AppModule"
}
Edit package.json
and change the "scripts"
section by adding "prestart"
and altering "start"
"prestart": "ng build --prod && ngc",
"start": "ts-node src/server.ts"
You can now type npm run start
in your console/terminal window and it will build everything and start serving on port 4000.
It doesn't watch the source or do hot-module-replacing etc, but once the server is running you can also type ng serve
(assuming you are using the @angular/cli npm package) in another window and edit your single-page-app as you normally would and use npm run start
only when rebuilding or changing server code.
回答2:
Angular Universal is a better choice with regards to better SEO indexing. You have raised very nice concern about the migration of current Angular 4 project to Universal. However, with ANgular 4 release they have packaged universal with it. I will write a tutorial regarding it and share it with you soon.
However, you can try ng-universal-cli
?
https://www.npmjs.com/package/ng-universal-cli
With this, you can setup your new Angular 4 Univeral project with one command ngu new <project-name>
You can then move your existing project files to this newly created project.
来源:https://stackoverflow.com/questions/43462246/convert-angular-4-web-app-to-angular-universal-app