Угловой универсальный комплект продолжает загружаться с пустой страницы - PullRequest
Новая
       24

Угловой универсальный комплект продолжает загружаться с пустой страницы

2 голосов
/ 24 июня 2019

Пытался преобразовать простое угловое приложение в универсальное поддерживаемое приложение.

Выполнены все необходимые изменения, такие как добавленная проверка всех элементов DOM, таких как окно, навигатор, время ожидания и т. Д.

После запуска команды npm run build:ssr && npm run serve:ssr она успешно соберет комплект и отобразит в терминале

Сервер Node Express прослушивает http://localhost:4000

Но при загрузке в браузере через порт 4000 он продолжает загружаться целую вечность.

Попытка добавления консоли практически на каждом этапе, которая, кажется, работает нормально.

Server.ts 

// These are important and needed before anything else
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();

global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
global['Event'] = null;

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

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

// 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', DIST_FOLDER);

// Server static files from /assets
app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

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

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

webpack.server.config.js 

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

module.exports = {
    entry: { server: './server.ts' },
    resolve: {
        extensions: ['.js', '.ts'],
        mainFields: ['main']
    },
    target: 'node',
    mode: 'none',
    // this makes sure we include node_modules and other 3rd party libraries
    externals: [/node_modules/],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [{ test: /\.ts$/, loader: 'ts-loader' }, {
            test: /\.(ts|js)$/,
            loader: 'regexp-replace-loader',
            options: {
                match: {
                    pattern: '\\[(Mouse|Keyboard)Event\\]',
                    flags: 'g'
                },
                replaceWith: '[]',

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

Я использую угловой v6.1.0.

Застрял так долго, может кто-нибудь, пожалуйста, помогите мне.

PS: попробовал на свежем приложении / проекте там все нормально работает. так что, вероятно, ошибка в моем файле server.ts.

...