Angular2 как запустить мой frontend после выполнение ng build?

Question

User . @nekolov

Angular

Angular2 как запустить мой frontend после выполнение ng build?

Вечер добрый,

Начинаю разбираться с Angular2, Собственно вопрос, после выполнение ng build в папке dist я получаю кучу html/css/js при попытке запуска index.html ничего не происходит, собственно подскажите как использовать html/js/css выданные Angular-ом? Сори если вопрос покажется смешным знающим людям.

Вопрос задан более трёх лет назад
496 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 1

4 комментария

User . @nekolov Автор вопроса

Я не получаю такого рода ссылки в своем проекте.

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Proj</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon"/>
  <link rel="icon" href="/assets/images/favicon.ico" />
  <link rel="stylesheet"  type="text/css" href="/assets/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/assets/css/be-ys.css" />
  <link rel="stylesheet" type="text/css" href="/assets/css/custom.css" />


</head>

<body>
  <app-root></app-root>
  <script src="node_modules/chart.js/src/chart.js"></script>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>

</html>

Написано более трёх лет назад

Антон Швец @Xuxicheta Куратор тега Angular

JavaUser Spring, потому что вы собрали в dev варианте. Но он тоже должен работать, просто файлы будут больше.

попробуйте ng build --prod

Написано более трёх лет назад
Егор Скороходов @egor_sc
<script src="node_modules/chart.js/src/chart.js"></script>

вот эта строчка в сбилженом html-е абсолютно непонятна

На проде вообще может не быть папки node_modules, все использованные локальные либы следует в общем бандле прописывать, импортами
Вам правильно пытаются объяснить.
<link rel="stylesheet" type="text/css" href="/assets/css/be-ys.css" /> <link rel="stylesheet" type="text/css" href="/assets/css/custom.css" />

ссылка на "/assets/css/be-ys.css" ведёт на корневую папку сервера. Если вы открываете index.html браузером, бразуер ищет путь к файлам в корневой директории, а не в {PROJECT_DIR}/assets/...
что то я вообще запутался.... т.е в резульате псевдо компиляции тайпскрипта в js я не получу просто набор html/js/css которые я смогу вставлять куда захочу? Просто залить на хостинг и использовать...

именно так, получите. только пути к ассетам в html у вас не корректные.
В конкретно вашем случае, замените все подобные ссылки с href="/assets/css/custom.css" на href="assets/css/custom.css" и приложение взлетит в браузере.
но куда проще и правильнее просто поставить http-server, и все проблем не будет
Написано более трёх лет назад
Антон Швец @Xuxicheta Куратор тега Angular

Егор Скороходов, не совсем, ангуляр как раз ставит относительные пути
Только там выше base href="/"

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

Nginx

+3 ещё

Средний
Как настроить Nginx на отдачу файла main.js Angular SPA на микрофронтенде?
- 2 подписчика
- 26 окт.
- 129 просмотров
0

ответов
Angular

Простой
Как приостановить все запросы в Angular при получении ошибки 401, чтобы новые запросы не отправлялись?
- 3 подписчика
- 21 окт.
- 463 просмотра
0

ответов
JavaScript

+2 ещё

Средний
Как поправить ошибку Cannot read properties of undefined (reading 'form')?
- 1 подписчик
- 21 окт.
- 131 просмотр
2

ответа
Angular

Простой
Как вывести сложный объект на график в DevExtreme Angular 17?
- 1 подписчик
- 16 сент.
- 98 просмотров
1

ответ
Angular

Простой
Как исправить ошибку?
- 1 подписчик
- 06 сент.
- 41 просмотр
1

ответ
Angular

Простой
Как именно работает markForCheck в Angular при detection changes?
- 1 подписчик
- 19 июл.
- 80 просмотров
1

ответ
Angular

Средний
Приходилось ли Вам кастомизировать компоненты из библиотеки Angular Material и какой подход Вы использовали?
- 1 подписчик
- 19 июл.
- 54 просмотра
0

ответов
JavaScript

+1 ещё

Сложный
Как оптимизировать рендеринг таблицы?
- 2 подписчика
- 17 июл.
- 191 просмотр
1

ответ
Angular

+1 ещё

Простой
Как в Ionic Framework слушать сообщения?
- 1 подписчик
- 15 июл.
- 20 просмотров
0

ответов
Angular

+1 ещё

Простой
В чём проблема с запросами?
- 2 подписчика
- 14 июл.
- 119 просмотров
0

ответов
Показать ещё Загружается…

Fullstack-разработчик React, Node.js, MongoDB

SUPA

от 170 000 до 230 000 ₽

Senior Backend Developer / Старший разработчик PHP (Symfony)

Webbankir

До 350 000 ₽

Senior DevOps Engineer

5POST • Москва

от 350 000 ₽

Доработка сайта на Vue и node

23 дек. 2024, в 11:07

10000 руб./за проект

Разработать 3D модель лопасти

23 дек. 2024, в 10:43

5000 руб./за проект

Разработать принципиальную схему в Altium Designer

23 дек. 2024, в 10:32

2000 руб./за проект

Answer 1 · 2019-02-21 22:59:05

В html ссылки на скомпилированные js и css будут относительные.
В зависимости от браузеров и операционной системы, поведение будет разное, на линуксе например браузер пытается открыть их как file:///main.4cc3c8d8152162fe9b99.bundle.js, например, т.е. вместо локального каталога ищет мой js файл в корне файловой системы, где его конечно же нет.
Естественно ничего не открывается.
Чтобы нормально посмотреть, нужно всю dist положить в распоряжение какого-нибудь веб-сервера, например http-server, как выше посоветовали (и тоже самое делает вебпак, запускаемый по ng serve). Подойдет и nginx или apach или lighttpd, или даже IIS, если конечно сможете их настроить.
Ну или на хостинг.

Angular2 как запустить мой frontend после выполнение ng build?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт