У меня есть проект Angular 5, и он отлично работает при запуске ng serve, но я хочу отправить его дизайнеру для дальнейшей работы над ним. После запуска ng build открытие index.html приводит к совершенно пустой странице.
Есть ли что-то еще, что мне нужно сделать? В моей папке environment.ts у меня установлено значение true. Пожалуйста, дайте мне знать, если есть более простой способ отправить симуляцию или как это исправить, спасибо!
Скорее всего дело в настройках <base href="">. Допустим, у нас есть проект, созданный angular-cli, под названием «foo». Когда мы запускаем ng build --prod, по умолчанию Angular выводит dist/foo без каких-либо ошибок терминала. Несколько вещей:
Его нужно разместить на сервере, и он не будет работать, просто открыв index.html.
Наш <base href=""> должен отражать, как это помещается на сервер (т. е. добавление папки «foo» вместе с другими проектами/каталогами на сервере или сброс всего содержимого foo в корень сервера).
Итак, для нашего примера, скажем, мы хотим скопировать каталог «foo» на локальный сервер, такой как mamp/wamp, с другими проектами. Делаем это, переходим на localhost/foo и вуаля! Еще чистая страница. Если вы посмотрите на консоль разработчика (Chrome), вы, скорее всего, увидите 404 для отсутствующих стилей/js. Откройте файл индекса и измените <base href="/"> на <base href="/foo/">, и теперь он должен отображаться без проблем. Вы также можете оставить <base href="/"> как есть и добавить «foo» ко всем путям к файлам css/js, которые вызывают ошибки, и это сработает.
Теперь, когда мы знаем, в чем проблема, как мы можем установить это в проекте? В корне вашего проекта давайте откроем angular.json (NG6) и изменим этот бит, чтобы добавить ключи/значения baseHref и deployUrl:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"baseHref" : "/foo/",
"deployUrl": "/foo/",
Теперь, когда мы сохраняем и делаем другую сборку, и заменяем предыдущую на сервере, все должно появиться. Вы также можете настроить это с помощью флага на сборке. Из документов:
# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/
/root/myapp/dist/myapp и я запускаю http-server -p 4200 /root/myapp/dist/myapp, то baseHref равен /, а не '/root/myapp/dist/myapp/'?
- person JohnLBevan; 06.06.2020
Простой трюк: просто удалите / из строки <base href="/"> из index.html Замените строку <base href="/"> на <base href="">
index.html в проекте не является фактическим index.html, который вы развертываете на сервере. Вы должны сгенерировать файлы, необходимые для развертывания на веб-сервере, используя ng build --prod.
Но даже когда вы создаете производственные файлы, ваш дизайнер все равно не сможет ничего сделать с сгенерированным index.html и другими файлами js. Лучше всего отдать весь проект дизайнеру и научить его/ее, как его запустить с помощью ng serve
ng build --prod создает несколько статических файлов, которые вы можете развернуть на любом веб-сервере, который поддерживает развертывание статических файлов.
- person Lahiru Chandima; 07.08.2018
