ご質問ありがとうございます。
まず、Apacheはアプリケーションを提供する必要はありません。これは、node.jsがあなたにサービスを提供するためです。
サーバー上でApacheサービスが不要な場合は、セキュリティに関する質問や、アプリケーション間のポート衝突を避けるために、Apacheサービスを無効にする必要があります。
角度アプリを変更するには、サーバーレンダリングが必要です。始めましょう。
1）あなたの角度のプロジェクトに移動して、それらのパッケージをインストールします。
npm i -S @angular/platform-server @angular/animations express
2）を開きのsrc /アプリ/ app.module.ts、アプリ名の下にコメント行を変更します。
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'your-angular-app-name' }), // You just have to change this line
FormsModule,
HttpModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
3）ここで、あなたのアプリケーションにサーバーを設定します。このためには、ファイルapp/src/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, // Load the servermodule
AppModule // Load the modules of AppModule
],
bootstrap: [AppComponent]
})
export class AppServerModule { }
4）の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}...`);
});
5）オープンのsrc/tsconfig.app.jsonと除外JSON変数にserver.tsにファイルを追加します。
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"server.ts", # Just here !
"test.ts",
"**/*.spec.ts"
]
}
6）オープンtsconfig.jsonは、プロジェクトのルートに見つけ、このようなangularCompilerOptions追加：
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2016",
"dom"
]
},
"angularCompilerOptions": {
"genDir": "./dist/ngfactory",
"entryModule": "./src/app/app.module#AppModule"
}
}
7）さて、あなたにpackage.jsonを変更あなたの人生を楽にしてください。私は、これはあなたを助けることを願っています
npm start
：
{
"scripts": {
"prestart": "ng build --prod && ngc",
"start": "ts-node src/server.ts",
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
}
8）は、今、あなたがあなたのアプリケーションをテストすることができます。
注： プロジェクトがすでに存在する場合のNode.jsがわからないので、あなたはおそらく、ウィンドウオブジェクトを角度素材のようないくつかのモジュールのいくつかの問題があるでしょう、ドキュメントオブジェクト。
は、そのほかのモジュールのロードファイル継承しますapp.common.module.tsを作成します。
だから、あなたがする必要があります。共通モジュール（クライアント+サーバー）を収集します。
最後に、のapp.module.tsに私たちを悩ましているモジュールを入れてください。
Cdly。
最終的にあなたの質問を読んでも、下の回答者の奇妙な誰も気にしませんでした。私はちょうどNginxを介して角度のSSRとプロキシを展開し、いくつかの静的ファイルに問題が表示されていない – Rexford
@レックスフォードうん、あなたは正しい...誰も私の質問を正しくresdていないと彼らは何を答えている実際に私もあなたと同じ方法でやっていますが、代わりにApacheを使用しています。 –
私は下のプロダクションで自分のSSR角度アプリをどのように動かしているのかを共有しました。私はそれが助けて欲しい。 – Rexford