在子目录中运行Angular2

Question

我有一个在localhost下运行良好的应用程序。

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

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

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

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>

和App入口点

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

App文件夹结构

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

不需要做更多，只需在index.html中的构建项目后更改一行

<base href="/">

至

<base href="/sub directory_name/">

如果你想在子目录中访问路线更详细，请点击此处https://angular.io/guide/deployment#production-servers

Answer 3

尝试从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>`

Answer 4

我把一个〜放在“基础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 5

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

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

这很有效。

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

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

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

Answer 6

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

<base href="/">

至：

<base href="/MedicheckAngular/">

在您的dist/index.html中，或进行如下更改：

在baseUrl: '/MedicheckAngular/'改变webpack.common.js。
将/MedicheckAngular/添加到index.html中的链接。

Answer 7

这对我们有用：

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

Answer 8

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

<base href=".">

然后用命令构建：ng build --prod。然后像往常一样从/dist目录中获取输出。

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

Answer 9

我认为你错过了一个子文件夹。

您在'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找到您的应用程序文件夹，然后在您的src标记中的'index.html''〜/'中替换返回的路径，它将按预期工作。

Answer 10

在子目录中运行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>

设置的baseUrl的index.html

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

假设angular-app在重新加载时不起作用，在LocationStrategy中添加app.module.ts提供程序

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

在子目录中运行Angular2

问题描述投票：19回答：10

10个回答

最新问题

在子目录中运行Angular2

问题描述 投票：19回答：10

10个回答

最新问题

问题描述投票：19回答：10