web-dev-qa-db-fra.com

Exécuter Angular2 dans le sous-répertoire

J'ai une application qui fonctionne bien sous localhost. 

J'ai essayé de le mettre sur un serveur IIS aujourd'hui en tant qu'application enfant. Le nouveau chemin serait donc localhost/SubDir.

System.js essaie partout d'essayer de charger des modules maintenant. J'ai défini le chemin de base et joué avec les variables de configuration chemin/carte pendant quelques heures, mais je ne pouvais pas atterrir sur les paramètres magiques.

Est-ce que quelqu'un a des idées sur ce que je voudrais Tweak, ou quelque chose qui pourrait aider au débogage?

Console Chrome  enter image description here

Réseau Chrome  enter image description here

Index 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>

Et le point d'entrée de l'application

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 })
]);

Structure du dossier de l'application

 enter image description here

angularsystemjs
18
Andrew Walters

Pour héberger un sous-répertoire avec Apache, procédez comme suit:

Commande de construction similaire à celle-ci: Ng build --base-href/myapp /

Le fichier .htaccess ressemblerait à ceci

RewriteEngine On
RewriteBase /myapp/
Options +FollowSymLinks

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

essayez de supprimer la baseURL de la configuration de systemjs et ajoutez le <base href="MedicheckAngular/" />à votre tête dans le DOM HTML.

J'ai eu mon application Angular2 dans les sous-dossiers "modules/angular" à partir de la racine . `

<!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>`
4
Martin Brack

Je mets un ~ sur la "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 -->
3
Michael Washington

J'ai eu du mal à faire quelque chose de similaire . J'ai une wordpress sur un serveur Apache . Pour des raisons de référencement, nous voulions que l'application angular soit hébergée sur un sous-dossier, de la même manière que phpmyadmin.

  1. Ce que j'ai fait est de créer un sous-dossier dans/apps/my-app-hosting-folder
  2. Créez un alias dans ce dossier:/my-alias =>/apps/my-app-hosting-folder 
  3. Changez la référence de base de base href = "/" en base href = ""

Cela a fonctionné. 

Les autres choses que j'ai essayées ne m'ont pas donné satisfaction pour les raisons suivantes:

  • définissez référence de base à l'alias: J'aurais eu besoin de corriger manuellement les liens via l'application et avec une configuration étrange, je me suis retrouvé avec. ; quelque chose s'est mal passé entre le pseudonyme et la base réf. 
  • en laissant "/" rompu un lien interne en ajoutant des "/" étranges, donc j'avais cassé url comme: www.exemple.com/my-alias/node//blabla; Je pense que cela essaye de fonctionner avec le dossier racine du serveur.

J'espère que cela aidera les futurs lecteurs.

2
Pierre-Yves Guillemet

Lorsque vous effectuez un déploiement sur un chemin non racine d'un domaine, vous devez mettre à jour manuellement les éléments suivants:

<base href="/">

à:

<base href="/MedicheckAngular/">

dans votre dist/index.html, ou apportez les modifications comme suit:

  1. Changer baseUrl: '/MedicheckAngular/' dans webpack.common.js.
  2. Ajoutez /MedicheckAngular/ aux liens dans index.html.
2
Rajan Maharjan

Voici ce qui a fonctionné pour nous:

  1. Définissez le point de référence de base sur le sous-répertoire contenant le projet angulaire. Cela garantira que toutes les dépendances node_module sont trouvées, etc. 

  2. Configurez PathLocationStrategy avec un autre APP_BASE_HREFso afin que le mode html5 fonctionne toujours pour l'application angulaire réelle. 

    bootstrap (AppComponent, [..... bind (APP_BASE_HREF) .toValue ("/ yardmap/planning")

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

1
chrismarx

La configuration complète pour l'exécution de l'application Angular dans le sous-répertoire.

En supposant que "ng-app /" soit le chemin de l'alias . Par exemple http://www.example.com/ng-app/

Apache config

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>

Définir baseUrl dans index.html

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

Supposons que l'application angulaire ne fonctionne pas lors du rechargement, ajoutez le fournisseur LocationStrategy dans app.module.ts

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

Si vous ne connaissez pas le sous-répertoire à l'avance, vous pouvez utiliser un point comme chemin comme ceci:

<base href=".">

Désormais, votre application peut être placée dans n’importe quel webdir ou même fonctionner à partir du système de fichiers (si aucune API restreinte n’est utilisée). 

0
Sascha Aeppli

Je pense que vous manquez un sous-dossier.

Ce que vous avez mis dans votre fichier 'index.html' signifie que les fichiers à charger se trouvent dans votre répertoire personnel.

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

Je pense que votre structure de serveur est plus comme ça.

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

Si vous avez un accès console à votre serveur, essayez de localiser votre dossier d’application, avecpwdpar exemple, puis remplacez-le dans votre 'index.html' '~/'dans vossrctags avec le chemin retourné et cela fonctionnera comme prévu.

0
Romain

Pas besoin de faire plus, il suffit de changer une ligne après le projet de construction dans index.html

<base href="/">

à

<base href="/sub directory_name/">

Si vous voulez accéder à la route dans le sous-répertoire, plus de détails ici https://angular.io/guide/deployment#production-servers

0
Suresh Suthar