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-ом? Сори если вопрос покажется смешным знающим людям.

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

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

Подписаться 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 окт.
- 110 просмотров
0

ответов
Angular

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

ответов
JavaScript

+2 ещё

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

ответа
Angular

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

ответ
Angular

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

ответ
Angular

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

ответ
Angular

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

ответов
JavaScript

+1 ещё

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

ответ
Angular

+1 ещё

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

ответов
Angular

+1 ещё

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

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

Fullstack-разработчик (PHP / VueJS)

Bash Today

от 200 000 до 230 000 ₽

Senior PHP Программист

Автомакон

от 287 000 до 440 000 ₽

Senior Python developer

AST • Москва

До 350 000 ₽

Почистить скан от мусора

22 нояб. 2024, в 18:39

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

Изменение сайта на Bitrix

22 нояб. 2024, в 18:23

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

Провести подготовку и перенос данных из 1С УТ в 1С управление нашей фи

22 нояб. 2024, в 17:46

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

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?

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

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

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