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

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

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

System.js pukes всюду пытается загрузить модули сейчас. Я установил 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>

Ответ 1

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

Создайте команду, подобную этой: ng build --base-href/myapp/

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

RewriteEngine On
RewriteBase /myapp/
Options +FollowSymLinks

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

Ответ 2

попробуйте удалить 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>`

Ответ 3

Я положил ~ на "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 -->

Ответ 4

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

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

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

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

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

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

Ответ 5

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

<base href="/">

чтобы:

<base href="/MedicheckAngular/">

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

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

Ответ 6

Вот что сработало для нас:

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

самозагрузки (AppComponent, [..... связывания (APP_BASE_HREF).toValue( "/yardmap/планирование" )

ref: https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

ref: https://angular.io/docs/ts/latest/guide/router.html

Ответ 7

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

<base href=".">

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

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

Ответ 8

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

То, что вы поместили в свой файл 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" ~/ 'в тэгах src с возвращенным путем, и он будет работать как ожидалось.

Ответ 9

Полная конфигурация для запуска приложения 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}
    ]
});

Ответ 10

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

<base href="/">

<base href="/sub directory_name/">

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