尝试从零开始构建Angular7+Express.js环境
简介
为了学习SPA（Single Page Application），我决定搭建MEAN堆栈，但尝试在MEAN.io上快速搭建未能成功，因为按照步骤进行时无法正常运行，并且发现了很多多余的文件和设置，因此决定自己从零开始搭建。
如果您对使用Angular + Express.js进行构建感兴趣，您也可以考虑查看下面的内容。
MEAN堆栈已经过时了吗？ 使用Angular + Nest.js + OpenAPI构建Typescript仅环境。
环境
- Windows10
准备
Node.jsのインストール
零步骤
◆生成Angular的模板项目
安装Angular CLI
Angular CLI是指Angular的命令行接口。可以用来生成项目、进行构建等操作。
- 「npm install -g @angular/cli」
生成模板项目
-
- 「ng new angular-test」
- ※angular-testの部分は任意
生成Express.js的模板项目
安装 Express-Generator
- 「npm install express-generator -g」
生成模板项目
-
- 「express express-test」
- ※express-testの部分は任意
将两个模板项目合并
我认为将Express与Angular项目合并比较容易。
-
- Express側から以下を移動
binフォルダ
routesフォルダ
app.js
routes/index.jsのレスポンスを修正
res.json({ message: ‘success!!!’ });
→デフォルトだとExpressのViewsフォルダ内の画面を表示するようになっている
今回はAngularの画面を出したいので、Express側はjsonを返すAPIのみを定義する
package.jsonをマージ
scriptsのstartをExpress側の値(node ./bin/www)で修正
Express側のdependenciesをすべてAngular側に移動
Express側のappフォルダをAngular側に丸々移動
通过迄今为止的处理，Express端的代码已经可以运行了。
※在运行npm install→npm start之后，通过浏览器访问http://localhost:3000，将会显示{ message: ‘success!!!’ }。
◆進一步支持顯示Angular端的畫面。
- app.jsを修正
var app = express();
// ↓↓↓削除↓↓↓
// view engine setup
//app.set('views', path.join(__dirname, 'views'));
//app.set('view engine', 'jade');
// ↑↑↑削除↑↑↑
// ↓↓↓修正↓↓↓
app.use('/api/', indexRouter);
app.use('/api/users', usersRouter);
// ↑↑↑修正↑↑↑
// ↓↓↓追記↓↓↓
// Angular側のルーティング設定
// Express側(API)のルーティングより後におくこと！！！
app.use(express.static(path.join(__dirname, '/dist/angular-test')));
app.use('/*', express.static(path.join(__dirname, '/dist/angular-test/index.html')));
// ↑↑↑追記↑↑↑
※dist是Angular编译后的js文件存储文件夹。
初始状态下是不存在的，但当通过ng build来构建Angular端时，它会被生成。
dist下的文件夹名字会根据项目名来命名，所以每个项目都可以进行更改（定义在angular.json的outputPath中）。
确认行动
npm installでExpress側の必要なパッケージをインストール
ng buildでAngularのビルド
npm startでサーバー起動
●访问http://localhost:3000/
● 访问 http://localhost:3000/api
只需要一个选项，用汉语将以下内容改述：
在 Express 方面创建一个 API，然后在 Angular 方面使用 HttpClient 访问该 API 就可以了！我已经将创建的项目发布在以下地址：
https://github.com/teracy55/mean-sample
