角度4ユニバーサル付き

Question

私はユニバーサルで角度2を使用しています。

私はこれを試みています。

まず、私は新しいプロジェクトを作成します。

ng new universaldemo. 

私はこれらのパッケージをインストール：ここ

npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine. 

は私app.module.tsです：ここでは

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule.withServerTransition({ appId: 'universaldemo' }), 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

は私のアプリです.server.module.ts

ここ

は私server.tsです：ライン以下

{ 
    "extends": "../tsconfig.json", 
    "compilerOptions": { 
    "outDir": "../out-tsc/app", 
    "baseUrl": "./", 
    "module": "commonjs", 
    "types": [] 
    }, 
    "exclude": [ 
    "test.ts", 
    "**/*.spec.ts" 
    ], 
    "angularCompilerOptions": { 
    "entryModule": "app/app.server.module#AppServerModule" 
    } 
} 

：

//これらは最終的に私はtsconfig.server.jsonを作成し、何

import 'zone.js/dist/zone-node'; 
import 'reflect-metadata'; 

import { enableProdMode } from '@angular/core'; 

import * as express from 'express'; 
import { join } from 'path'; 

// Faster server renders w/ Prod mode (dev mode never needed) 
enableProdMode(); 

// Express server 
const app = express(); 

const PORT = process.env.PORT || 4000; 
const DIST_FOLDER = join(process.cwd(), 'dist'); 

// * NOTE :: leave this as require() since this file is built Dynamically from webpack 
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle'); 

// Express Engine 
import { ngExpressEngine } from '@nguniversal/express-engine'; 
// Import module map for lazy loading 
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader'; 

app.engine('html', ngExpressEngine({ 
    bootstrap: AppServerModuleNgFactory, 
    providers: [ 
    provideModuleMap(LAZY_MODULE_MAP) 
    ] 
})); 

app.set('view engine', 'html'); 
app.set('views', join(DIST_FOLDER, 'browser')); 

// TODO: implement data requests securely 
app.get('/api/*', (req, res) => { 
    res.status(404).send('data requests are not supported'); 
}); 

// Server static files from /browser 
app.get('*.*', express.static(join(DIST_FOLDER, 'browser'))); 

// All regular routes use the Universal engine 
app.get('*', (req, res) => { 
    res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req }); 
}); 

// Start up the Node server 
app.listen(PORT,() => { 
    console.log(`Node server listening on http://localhost:${PORT}`); 
}); 
Here is my webpack.server.config.js : 

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    entry: { server: './server.ts' }, 
    resolve: { extensions: ['.js', '.ts'] }, 
    target: 'node', 
    // this makes sure we include node_modules and other 3rd party libraries 
    externals: [/(node_modules|main\..*\.js)/], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: '[name].js' 
    }, 
    module: { 
    rules: [{ test: /\.ts$/, loader: 'ts-loader' }] 
    }, 
    plugins: [ 
    // Temporary Fix for issue: https://github.com/angular/angular/issues/11580 
    // for 'WARNING Critical dependency: the request of a dependency is an expression' 
    new webpack.ContextReplacementPlugin(
     /(.+)?angular(\\|\/)core(.+)?/, 
     path.join(__dirname, 'src'), // location of your src 
     {} // a map of your routes 
    ), 
    new webpack.ContextReplacementPlugin(
     /(.+)?express(\\|\/)(.+)?/, 
     path.join(__dirname, 'src'), 
     {} 
    ) 
    ] 
}; 

前に、重要かつ必要です私のpackage.jsonに追加されます：

"scripts": { 
    ... 
    "build:universal": "npm run build:client-and-server-bundles && npm run webpack:server", 
    "serve:universal": "node dist/server.js", 
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false", 
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors" 
    ... 
} 

私はビルドを作成し、私のアプリを提供しようとします：

npm run build:universal 

それは動作します。

は、私は私のapp.usingこのコマンドを、私はこのエラーを得た

npm run serve:universal. 

を実行してみてください。

ReferenceError: webpackJsonp is not defined at Object

どうすればこの問題を解決できますか？

Answer 1

ユニバーサルウィキで説明したようにあなたはwebpack.server.config.jsファイルが欠落している：https://github.com/angular/angular-cli/wiki/stories-universal-rendering

を使用すると、5角や古いバージョン2/4ますか？多分あなたのpackage.jsonは時代遅れですか？