web-dev-qa-db-ja.com

サブディレクトリでAngular2を実行する

ローカルホストで正常に動作するアプリがあります。

今日、子アプリケーションとしてIISサーバーに配置しようとしました。したがって、新しいパスはlocalhost/SubDirになります。

System.jsは、今どこでもモジュールをロードしようとしています。 basePathを設定し、path/map config変数を数時間使用しましたが、魔法の設定に到達できませんでした。

誰かが私が微調整したいアイデア、またはデバッグに役立つ何かを持っていますか？

Chromeコンソール enter image description here

Chromeネットワーク enter image description here

インデックス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 })
]);

アプリのフォルダー構造

enter image description here

angularsystemjs
21
Andrew Walters

Apacheを使用してサブディレクトリでホストするには、次のようにします。

次のようなビルドコマンド：ng build --base-href/myapp /

.htaccessファイルは次のようになります

RewriteEngine On
RewriteBase /myapp/
Options +FollowSymLinks

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

systemjsの構成からbaseURLを削除し、<base href="MedicheckAngular/" /> HTML DOMの頭の部分に。

ルートから「modules/angular」サブフォルダーにAngular2アプリがありました。 `

<!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 Lüpold

「ベース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

ドメイン内の非ルートパスに展開する場合は、次を手動で更新する必要があります。

<base href="/">

に：

<base href="/MedicheckAngular/">

あなたのdist/index.html、または次のように変更します。

  1. 変化する baseUrl: '/MedicheckAngular/' in webpack.common.js。
  2. 追加 /MedicheckAngular/のリンクへindex.html。
3
Rajan Maharjan

似たようなことをするのにしばらく苦労しました。 Apacheサーバーでwordpressを実行しています。 SEOの理由から、php [myadmin]がホストされる方法で、angularアプリをサブフォルダーでホストすることを望みました。

  1. 私がやったことは、/ apps/my-app-hosting-folderにサブフォルダーを作成することです
  2. このフォルダーのエイリアスを作成します：/ my-alias =>/apps/my-app-hosting-folder
  3. Base refをbase href = "/"からbase href = ""に変更します

これはうまくいきました。

私が試した他のことは、次の理由で私に満足を与えませんでした：

  • base refをエイリアスに設定します。アプリを介してリンクを手動で修正する必要があり、いくつかの奇妙な構成ではwww.exemple.com/my-alias/my-alias/indexのようなものになりました。エイリアスとベースrefの間で問題が発生しました。
  • 「/」を残したまま、奇妙な「/」を追加して内部リンクを壊したため、次のようなURLが壊れていました。www.exemple.com/my-alias/node//blabla;サーバーのルートフォルダーを操作しようとすると思います。

それが未来の読者に役立つことを願っています。

2
Pierre-Yves Guillemet

これが私たちのために働いたものです：

  1. ベース参照が、angularプロジェクトを含むサブディレクトリを指すようにします。これにより、すべてのnode_module依存関係が検出されるようになります。

  2. 異なるAPP_BASE_HREFを使用してPathLocationStrategyを構成し、実際のangularアプリに対してhtml5モードが引き続き機能するようにします。

    bootstrap（AppComponent、[..... bind（APP_BASE_HREF）.toValue（ "/ yardmap/planning"）

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

参照： https://angular.io/docs/ts/latest/guide/router.html

1
chrismarx

サブディレクトリが事前にわからない場合は、次のように/src/index.htmlファイルでパスとしてドットを使用できます。

<base href=".">

次に、コマンドng build --prodを使用してビルドします。その後、通常どおり/distディレクトリ内から出力を取得します。

これで、アプリを任意のWebディレクトリに配置したり、ファイルシステムからでも動作させることができます（制限されたAPIが使用されていない場合）。

1
Sascha Aeppli

サブディレクトリでAngular appを実行するための完全な設定。

エイリアスパスとして「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>

Index.htmlでbaseUrlを設定します

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

角度アプリがリロード時に機能しないと仮定し、LocationStrategyプロバイダーをapp.module.tsに追加します

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

サブフォルダーを見逃していると思います。

「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は、返されたパスのタグで、期待どおりに機能します。

0
Romain

これ以上行う必要はありません。index.htmlのビルドプロジェクトの1行後に変更するだけです

<base href="/">

に

<base href="/sub directory_name/">

サブディレクトリ内の詳細なルートにアクセスする場合は、こちらから https://angular.io/guide/deployment#production-servers

0
Suresh Suthar