将工作 MEAN 项目切换到角度通用

Question

我有一个有效的 MEAN 项目。在客户端，我使用angularjs(不是angularjs(，在服务器端，我使用experss和mongodb。

我最近读过关于角度通用的文章，但我无法弄清楚我应该改变什么以及目录结构应该如何。

有人可以向我解释一下步骤或给我一个针对这种情况的教程吗？

Answer 1

您需要安装平台服务器和动画(平台服务器需要(包

npm i @angular/platform-server @angular/animations

然后编辑要导入的应用模块

BrowserModule.withServerTransition({appId: 'Your-App'})

而不是浏览器模块。 然后，创建服务器应用模块

// 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 { }

之后，您需要在 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';
import * as logger from 'morgan';
// API router 
import { router } from './api/router';
const PORT = 4000;
enableProdMode();
const app = express();
const 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.use(logger('dev'));
// Backend API 
app.use('/api', router);
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}!`);
});

其中路由器是 API 的持有者 会是这样的

// src/api/router.ts
import {Router} from 'express';
export const router = Router(); 
router.get('/test', function (req, res) {
const d = {
data: 'Api works!'
};
res.send(d);
});

现在从 src/tsconfig.app.json 中排除服务器

"exclude": [
"server.ts", // Add it 
"test.ts",
"**/*.spec.ts"
]
}

编辑 tsconfig.json 并添加

"angularCompilerOptions": {
"genDir": "./dist/ngfactory",
"entryModule": "./src/app/app.module#AppModule"
}  

最后安装 TS 节点

npm i -D ts-node

并编辑您的 package.json 脚本

"prestart": "ng build --prod && ngc",
"start": "ts-node src/server.ts"

应该不需要再更改，除非你的应用程序使用jQuery或文档与DOM交互，你需要使用 Angular API 代替。