각도 4 (범용 포함)

Question

각도 2를 범용으로 사용하고 있습니다.

나는 이것을 시도하고있다. 내 app.module.ts을 여기

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

한다 : 나는이 패키지를 설치

ng new universaldemo. 

:

먼저 나는 새 프로젝트를 만들고 여기에

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입니다 :

//이 중요하고

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'), 
     {} 
    ) 
    ] 
}; 

마지막으로 내가 tsconfig.server.json 만들 아무것도하기 전에 필요하지 :

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

라인 아래를 내 패키지에 추가되었습니다 .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

당신에게 이전 2/4 버전 5 각도 나합니까? 어쩌면 당신 package.json 구식인가?!