Angular 9 как развернуть на героку с server.ts (не. js) - PullRequest
0 голосов
/ 12 марта 2020

Я пытаюсь развернуть приложение angular на сервере heroku. Я уже сделал это с файлом server. js, и все работает хорошо, теперь я хочу развернуть файл с server.ts и получаю ошибки при попытке.

пакет. json:

{
  "name": "app",
  "version": "9.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4200",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run devfox:serve-ssr",
    "serve:ssr": "node dist/devfox/server/main.js",
    "build:ssr": "ng build --prod && ng run devfox:server:production && npm run compile:server",
    "build:stats": "ng build --stats-json",
    "analyze": "webpack-bundle-analyzer dist/devfox/browser/stats-es2015.json",
    "prerender": "ng run devfox:prerender",
    "compile:server": "tsc -p tsconfig.server.json",
    "postinstall": "npm run build:ssr",
    "preinstall": "npm install -g @angular/cli @angular/compiler-cli typescript"
  },
  "engines": {
    "node": "10.15.1",
    "npm": "6.4.1"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "9.0.1",
    "@angular/cdk": "^9.1.0",
    "@angular/common": "9.0.1",
    "@angular/compiler": "9.0.1",
    "@angular/core": "9.0.1",
    "@angular/forms": "9.0.1",
    "@angular/material": "^9.1.0",
    "@angular/platform-browser": "9.0.1",
    "@angular/platform-browser-dynamic": "9.0.1",
    "@angular/platform-server": "9.0.1",
    "@angular/router": "9.0.1",
    "@angular/service-worker": "9.0.1",
    "@fortawesome/fontawesome-free": "5.12.1",
    "@nguniversal/express-engine": "9.0.0",
    "@ngx-translate/core": "^12.1.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "bootstrap": "4.4.1",
    "compression": "^1.7.4",
    "express": "4.17.1",
    "hammerjs": "^2.0.8",
    "jquery": "3.4.1",
    "localstorage-polyfill": "^1.0.1",
    "mock-browser": "^0.92.14",
    "moment": "^2.24.0",
    "ngx-router-animations": "0.0.9",
    "rxjs": "6.5.4",
    "subsink": "^1.0.1",
    "tslib": "1.10.0",
    "zone.js": "0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.900.2",
    "@angular/cli": "9.0.2",
    "@angular/compiler-cli": "9.0.1",
    "@angular/language-service": "9.0.1",
    "@nguniversal/builders": "9.0.0",
    "@types/express": "4.17.2",
    "@types/jasmine": "3.5.5",
    "@types/jasminewd2": "2.0.8",
    "@types/node": "13.7.2",
    "codelyzer": "5.2.1",
    "jasmine-core": "3.5.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.4.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "2.1.1",
    "karma-jasmine": "3.1.1",
    "karma-jasmine-html-reporter": "1.5.2",
    "protractor": "5.4.3",
    "ts-node": "8.6.2",
    "tslint": "6.0.0",
    "typescript": "3.7.5",
    "webpack-bundle-analyzer": "^3.6.0"
  }
}

Procfile:

web: node server.ts

tsconfig.server . json:

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app-server",
    "module": "commonjs",
    "types": [
      "node"
    ]
  },
  "files": [
    "src/main.server.ts",
    "server.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule"
  }
}

server.ts:

import 'zone.js/dist/zone-node';
import { compression } from 'compression';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
import 'localstorage-polyfill';
global['localStorage'] = localStorage;

// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/devfox/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  server.use(compression);
  let forceSSL = (req, res, next) => {
    if (req.headers['x-forwarded-proto'] !== 'https') {
      return res.redirect(['https://', req.get('Host'), req.url].join(''));
    }
    return next();
  };

  server.use(forceSSL);

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // app.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run() {
  const port = process.env.PORT || 4000;

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

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

ошибки:

node dist/devfox/server/main.js C:\Users\andri\OneDrive\Desktop\devfox\angular-example-seo\dist\devfox\server\main.js:1 (function (exports, require, module, __filename, __dirname) { !function(e,a){for(var i in a)e[i]=a[i]}(exports,function(modules){var installedModules={};function
__webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}return
__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&

TypeError: app.use() requires a middleware function
    at Function.use (C:\Users\andri\OneDrive\Desktop\devfox\angular-example-seo\dist\devfox\server\main.js:1:1282105)
    at app (C:\Users\andri\OneDrive\Desktop\devfox\angular-example-seo\dist\devfox\server\main.js:1:3385773)
    at run (C:\Users\andri\OneDrive\Desktop\devfox\angular-example-seo\dist\devfox\server\main.js:1:3386577)
    at Object.uj+Y (C:\Users\andri\OneDrive\Desktop\devfox\angular-example-seo\dist\devfox\server\main.js:1:3386675)
    at __webpack_require__ (C:\Users\andri\OneDrive\Desktop\devfox\angular-example-seo\dist\devfox\server\main.js:1:357)
    at Object.0 (C:\Users\andri\OneDrive\Desktop\devfox\angular-example-seo\dist\devfox\server\main.js:1:82294)
    at __webpack_require__ (C:\Users\andri\OneDrive\Desktop\devfox\angular-example-seo\dist\devfox\server\main.js:1:357)
    at +rOU (C:\Users\andri\OneDrive\Desktop\devfox\angular-example-seo\dist\devfox\server\main.js:1:1686)
    at Object.<anonymous> (C:\Users\andri\OneDrive\Desktop\devfox\angular-example-seo\dist\devfox\server\main.js:1:1731)
    at Module._compile (internal/modules/cjs/loader.js:701:30) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! devfox@9.0.1 serve:ssr: `node dist/devfox/server/main.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the devfox@9.0.1 serve:ssr script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!     C:\Users\andri\AppData\Roaming\npm-cache\_logs\2020-03-12T08_14_31_977Z-debug.log

Что я должен изменить, чтобы он работал с файлом машинописи?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...