Почему мое MEAN-приложение будет работать только (частично), когда я установлю каталог сборки Angular на / src / вместо / dist /? - PullRequest
Новая
       15

Почему мое MEAN-приложение будет работать только (частично), когда я установлю каталог сборки Angular на / src / вместо / dist /?

0 голосов
/ 27 июня 2018

Я следую учебному пособию Heroku , чтобы создать список контактов с использованием стека MEAN (пример работы Heroku здесь ). Я могу развернуть его в Heroku, и он работает там. Но когда я запускаю его локально на моей машине, браузер (Chrome 67.0.3396.87 на macOS High Sierra) отображает только сообщение "Cannot GET /".

Я полагаю, это связано с тем, что каталог сборки Angular /dist/, указанный в строке 12 server.js , не существует (насколько я могу судить). Начало server.js выглядит так: 

var express = require("express");
var bodyParser = require("body-parser");
var mongodb = require("mongodb");
var ObjectID = mongodb.ObjectID;

var CONTACTS_COLLECTION = "contacts";

var app = express();
app.use(bodyParser.json());

// Create link to Angular build directory
var distDir = __dirname + "/dist/";
app.use(express.static(distDir));

// Create a database variable outside of the database connection callback to reuse the connection pool in your app.
var db;

Я изучил его и обнаружил, что Angular удаляет каталог /dist/ при ng serve. Я также обнаружил, что есть флаг --delete-output-path, по умолчанию true.

Я установил флаг --delete-output-path на false в .angular-cli.json, как рекомендовано в этом ответе , а также в /node_modules/@angular/cli/lib/config/schema.json. Несмотря на эти изменения (пытаясь установить флаг в одном файле, или другом файле, или в обоих файлах одновременно), я все еще получаю сообщение "Cannot GET /", а каталог /dist/ по-прежнему не отображается как есть.

Единственный способ, которым я смог даже запустить часть приложения, это изменить ссылку *1233* server.js на строку 12 с /dist/ на /src/. Это позволяет / src / index.html начать загрузку с локального хоста: 5000 / (браузер отображает текст «Загрузка ...», как указано в строке 16 index.html) и запускает API контактов и работает на локальном хосте: 5000 / API / контакты /. Но компоненты Angular (список контактов, который является целью учебника) не загружаются. Возможно, потому что я изменил каталог сборки в совершенно другое место.

Что-то с каталогом /dist/ мне не хватает? Или моя проблема с тем, чтобы приложение работало локально, не имеет ничего общего с /dist/?

1 Ответ

0 голосов
/ 27 июня 2018

Обратите внимание, что у вас нет способа обработки запросов к маршруту '/' после строки: 

app.use(express.static(distDir));

гарантирует, что все связанные файлы, сгенерированные в вашей папке "dist", доступны только тогда, когда ваш index.html требует их, но вы все равно должны обслуживать сам index.html. При использовании стека MEAN обычно можно сделать что-то вроде этого: 

app.use ('/api', yourApiRouter);
//and for everything else let the client-side routing handle the route:
app.get ('*', function(req, res) {
    res.sendFile(distDir + 'index.html');
}

Я рекомендую использовать собственный модуль "path", чтобы объединить ваше __dirname с вашей папкой "dist" и вашим местоположением index.html, а не просто объединить. Вы можете использовать функцию стрелки вместо обратного вызова при использовании функции app.get, если вы используете ES6

...