Question

我有一个在localhost下正常运行的应用程序。

我今天尝试将它作为子应用程序放在IIS服务器上。所以新路径将是localhost / SubDir。

System.js到处试图加载模块。我设置了basePath并使用路径/地图配置变量播放了几个小时，但无法进入魔术设置。

有没有人有我想要调整的想法，或任何有助于调试的内容？

Chrome控制台

Chrome网络

索引HTML

＆＃13;

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

＆＃13;

和App入口点

＆＃13;

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

＆＃13;

应用程序文件夹结构

Answer 1

要使用apache托管在子目录中，您可以这样做：

与此类似的构建命令： ng build --base-href / myapp /

.htaccess文件看起来像这样

RewriteEngine On
RewriteBase /myapp/
Options +FollowSymLinks

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

Answer 2

尝试从systemjs的配置中删除baseURL并添加 <base href="MedicheckAngular/" /> 在HTML DOM中你的头部。

我在子文件夹中使用了Angular2应用程序＆＃34; modules / angular＆＃34;从根。 `

<!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>`

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

Answer 4

我挣扎了一段时间做类似的事情。我在Apache服务器上运行wordpress。出于搜索引擎优化的原因，我们希望将角度应用程序托管在子文件夹中，就像托管phpmyadmin一样。

我所做的是在/ apps / my-app-hosting-folder
为此文件夹创建别名：/ my-alias =＆gt; / apps / my-app-hosting-folder
将base ref从base href =“/”更改为base href =“”

这很有用。

我尝试的其他事情并没有让我满意，原因如下：

将base ref设置为别名：我需要手动修复链接通过应用程序和一些奇怪的配置我最终像www.exemple.com/my-alias/my-alias/index;别名和基础ref之间出错了。
留下“/”通过添加一些奇怪的“/”来破坏一些内部链接，所以我打破了网址：www.exemple.com/my-alias/node//blabla;我认为它试图使用服务器的根文件夹。

希望它能帮助未来的读者。

Answer 5

当您部署到域中的非根路径时，您需要手动更新以下内容：

<base href="/">

为：

<base href="/MedicheckAngular/">

在dist/index.html中，或按以下方式进行更改：

更改baseUrl: '/MedicheckAngular/'中的webpack.common.js。
将/MedicheckAngular/添加到index.html。

Answer 6

这对我们有用：

使基本ref指向包含angular项目的子目录。这将确保找到所有node_module依赖项等。
使用不同的APP_BASE_HREF配置PathLocationStrategy 所以html5模式仍然适用于实际的角度应用程序。

自举（AppComponent， [..... 绑定（APP_BASE_HREF）.toValue（ “/ yardmap /规划”）

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

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

Answer 7

如果您不预先知道子目录，则可以在/src/index.html文件中使用点作为路径，如下所示：

<base href=".">

然后仅使用命令ng build --prod进行构建。然后照常从/dist目录内部获取输出。

现在，您的应用程序可以放置在任何Web目录中，甚至可以从文件系统运行（如果未使用受限的API）。

Answer 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”中替换<\ n src 标记中的strong> 〜/ '以及返回的路径，它将按预期工作。

Answer 9

在子目录中运行Angular app的完整配置。

假设＆＃34; ng-app /＆＃34;作为别名路径。例如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/">

假设angular-app无法重新加载，请在LocationStrategy

中添加app.module.ts提供程序

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

Answer 10

不需要做更多的事情，只需在index.html中的构建项目之后更改一行即可。

<base href="/">

到

<base href="/sub directory_name/">

如果您想在此处访问子目录中的路由，请点击https://angular.io/guide/deployment#production-servers

在子目录

10 个答案: