Запуск Angular2 в подкаталоге

У меня есть приложение, которое отлично работает под localhost.

Я пытался сегодня разместить его на сервере IIS как дочернее приложение. Таким образом, новый путь будет localhost / SubDir.

System.js теперь рвет повсюду, пытаясь загрузить модули. Я установил basePath и несколько часов поиграл с переменными конфигурации path / map, но не смог найти волшебные настройки.

Есть ли у кого-нибудь идеи, что бы я хотел настроить, или что-нибудь, что могло бы помочь с отладкой?

Консоль Chrome

Сеть Chrome

Индексировать HTML

<html>
<head>
    <script src="~/node_modules/es6-shim/es6-shim.js"></script>
    <script src="~/node_modules/systemjs/dist/system.src.js"></script>
    <script src="~/node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="~/node_modules/angular2/bundles/http.dev.js"></script>
    <script src="~/node_modules/angular2/bundles/router.dev.js"></script>

    <link href="~/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="~/assets/css/site.css" rel="stylesheet" />

    <script>
      System.config({
          packages: { 'app': { defaultExtension: 'js' } },
          baseURL: '/MedicheckAngular/',
          paths: {
              //'angular2/*': 'node_modules/angular2/ts/*.js'
          }
      });

      System.import('app/app');
    </script>

</head>
<body>
    <my-app>loading...</my-app>
</body>
</html>

И точка входа в приложение

import {HTTP_PROVIDERS} from 'angular2/http';
import {bootstrap, bind, provide} from 'angular2/angular2';
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, APP_BASE_HREF, ROUTER_BINDINGS, LocationStrategy, PathLocationStrategy, HashLocationStrategy} from 'angular2/router';

import {AppLayout} from './components/app-layout/app-layout';


bootstrap(AppLayout, [
    ROUTER_BINDINGS,
    HTTP_PROVIDERS,
    provide(APP_BASE_HREF, {useValue:'/'}),
    provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

Структура папки приложения

angular systemjs

Andrew Walters 01.12.2015 источник

Ответы (10)

arrow_upward
18
arrow_downward

Чтобы разместить в подкаталоге с apache, вы можете просто сделать это:

Команда сборки похожа на эту: ng build --base-href / myapp /

Файл .htaccess будет выглядеть так

RewriteEngine On
RewriteBase /myapp/
Options +FollowSymLinks

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.html [L,QSA]

user25794 22.03.2017

comment

В моем случае Options + FollowSymLinks вызывает ошибку подачи. Ваше решение работает путем удаления этой строки кода. Спасибо - parameciostudio; 05.02.2020

arrow_upward
8
arrow_downward

При развертывании по некорневому пути в домене вам необходимо вручную обновить следующее:

<base href="/">

to:

<base href="/MedicheckAngular/">

в вашем dist/index.html или внесите следующие изменения:

Измените baseUrl: '/MedicheckAngular/' на webpack.common.js.
Добавьте /MedicheckAngular/ к ссылкам в index.html.

Rajan Maharjan 28.05.2017

arrow_upward
4
arrow_downward

попробуйте удалить baseURL из конфигурации systemjs и добавить <base href="MedicheckAngular/" /> в вашу головную часть в HTML DOM.

У меня было приложение Angular2 в подпапках «modules / angular» от корня. `

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hallo</title>
    <base href="modules/angular/">
</head>
<body>
   <myapp>loading...</myapp>

   <script src="/modules/angular/node_modules/es6-shim/es6-shim.min.js"></script>
   <script src="/modules/angular/node_modules/systemjs/dist/system-polyfills.js"></script>
   <script src="/modules/angular/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
   <script src="/modules/angular/node_modules/angular2/bundles/angular2-polyfills.js">   </script>
   <script src="/modules/angular/node_modules/systemjs/dist/system.src.js"></script>
   <script src="/modules/angular/node_modules/rxjs/bundles/Rx.js"></script>
   <script src="/modules/angular/node_modules/angular2/bundles/angular2.dev.js"></script>

    <script>
    System.config({
        packages: {
            "apps": {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('apps/main').then(null, console.error.bind(console));
    </script>
</body>
</html>`

Martin Lüpold 12.03.2016

comment

Я пробовал это, но теперь на моем URL-адресе всегда есть подпапка. Мне это не кажется правильным. Мне нужно определить базовый href как подпапку, но без этого я все равно буду поддерживать чистоту моей маршрутизации. Как вы думаете, это можно сделать? - Mohy Eldeen; 04.06.2016

arrow_upward
3
arrow_downward

Какое-то время я пытался сделать что-то подобное. У меня Wordpress работает на сервере Apache. По причинам SEO мы хотели, чтобы приложение angular размещалось в подпапке, как и phpmyadmin.

Я создал подпапку в / apps / my-app-hosting-folder.
Создайте псевдоним для этой папки: / my-alias => / apps / my-app-hosting-folder
Измените базовую ссылку с base href = "/" на base href = ""

Это сработало.

Другие вещи, которые я пробовал, не принесли мне удовлетворения по следующим причинам:

установить base ref для псевдонима: мне пришлось бы вручную исправить ссылки через приложение, и с какой-то странной конфигурацией я получил что-то вроде www.exemple.com/my-alias/my-alias/index; что-то пошло не так между псевдонимом и базовым исх.
оставив "/", некоторая внутренняя ссылка была нарушена добавлением странного "/", поэтому я сломал URL-адрес, например: www.exemple.com/my-alias/node//blabla; Думаю, он пытается работать с корневой папкой сервера.

Надеюсь, это поможет будущим читателям.

GPY 13.09.2016

comment

У меня была символьная ссылка на каталог angular (4) app / dist (шаги 1,2). Исправлено изменение base href =. Спасибо - Clemens Tolboom; 10.05.2017

arrow_upward
3
arrow_downward

Я поставил ~ на "base href"

<!-- Angular2 Code -->
<base href="~/">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="~/node_modules/core-js/client/shim.min.js"></script>
<script src="~/node_modules/zone.js/dist/zone.js"></script>
<script src="~/node_modules/reflect-metadata/Reflect.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>
<script src="~/systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>
<!-- Angular2 Code -->

Michael Washington 10.01.2017

arrow_upward
3
arrow_downward

Если вы не знаете заранее подкаталог, вы можете использовать точку в качестве пути к /src/index.html файлу следующим образом:

<base href=".">

Затем просто выполните сборку с помощью команды: ng build --prod. Затем, как обычно, получите вывод из каталога /dist.

Теперь ваше приложение может быть размещено в любом веб-каталоге или даже работать из файловой системы (если не используется ограниченный API).

Sascha Aeppli 17.10.2018

comment

Работает для Angular 8. Но изображения не загружаются, src = '.. / assets / images' равен 404 - Alejandro L.; 17.07.2019

comment

Не уверен насчет предыдущего комментария, но, вероятно, это то, что на самом деле хотят разработчики. Я не могу придумать причину, по которой любой статический актив не должен быть относительным. - prasanthv; 29.07.2020

arrow_upward
2
arrow_downward

Вот что у нас сработало:

Сделайте базовую ссылку на подкаталог, содержащий проект angular. Это обеспечит обнаружение всех зависимостей node_module и т. Д.
Настройте PathLocationStrategy с другим APP_BASE_HREF, чтобы режим html5 по-прежнему работал для фактического приложения angular.

bootstrap (AppComponent, [..... bind (APP_BASE_HREF) .toValue ("/ ярдмап / планирование")

ссылка: https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

ссылка: https://angular.io/docs/ts/latest/guide/router.html

chrismarx 10.09.2016

arrow_upward
0
arrow_downward

Я думаю, вы пропустили подпапку.

То, что вы поместили в файл index.html, означает, что файлы для загрузки находятся в вашем домашнем каталоге.

/home/<your_directory>/[...] <- You try to load files from there.

Я думаю, что структура вашего сервера больше похожа на это.

/home/<your_directory>/***<app_folder>***/[...] <- I think your files are located here.

Если у вас есть консольный доступ к вашему серверу, попробуйте найти папку с вашим приложением, например, с помощью pwd, а затем замените в своем 'index.html' '< em> ~ / 'в тегах src с возвращенным путем, и он будет работать должным образом.

Romain 01.12.2015

comment

Не знаю, понимаю ли я, что вы предлагаете. Все ‹script›, включенные в index.cshtml, прекрасно согласуются с путями ~ /. Systemjs не может найти модули, хотя - Andrew Walters; 01.12.2015

comment

Не могли бы вы представить структуру вашей рабочей папки? - Romain; 01.12.2015

comment

Конечно, я добавил к вопросу снимок экрана с макетом приложения. - Andrew Walters; 01.12.2015

comment

Я думаю, что проблема связана с '~', потому что это означает, что ваш файл находится в вашем домашнем каталоге. - Romain; 04.12.2015

arrow_upward
0
arrow_downward

Полная конфигурация для запуска приложения Angular в подкаталоге.

Предполагая "ng-app /" в качестве пути псевдонима. Например http://www.example.com/ng-app/

Конфигурация Apache

Alias /ng-app  /<Directory path of index.html>/
Alias /assets /<Directory path of index.html>/assets/
<Directory /<Directory path of index.html>>
    DirectoryIndex index.html

    Require all granted
    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) /index.html [NC,L]
</Directory>

Установите baseUrl в index.html

<base href="/ng-app/">

Предположим, что приложение angular не работает при перезагрузке, добавьте поставщика LocationStrategy в app.module.ts

import {LocationStrategy, HashLocationStrategy} from '@angular/common';
@NgModule({
    providers: [
        {provide: LocationStrategy, useClass: HashLocationStrategy}
    ]
});

Rajez 20.04.2018

arrow_upward
0
arrow_downward

Больше ничего делать не нужно, просто измените одну строку после проекта сборки в index.html.

<base href="/">

<base href="/sub directory_name/">

Если вы хотите получить доступ к маршруту в подкаталоге, более подробно здесь https://angular.io/guide/deployment#production-servers

Suresh Suthar 08.10.2018

Запуск Angular2 в подкаталоге

Ответы (10)

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