在子目录中运行Angular2

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

今天，我尝试将其作为子应用程序发布到IIS服务器上。因此，新路径将是localhost/SubDir

System.js现在到处都在尝试加载模块。我设置了basePath并使用path/map配置变量玩了几个小时，但无法在魔法设置上着陆

有没有人知道我想调整什么，或者有什么可以帮助调试的

镀铬控制台

铬网

索引HTML

System.config({
包：{app'：{defaultExtension:'js'}}，
baseURL:“/MedicheckAngular/”，
路径：{
//“angular2/*”：“node_modules/angular2/ts/*.js”
}
});
系统导入（“应用程序/应用程序”）；
加载。。。

我想您错过了一个子文件夹

您在“index.html”文件中输入的内容意味着要加载的文件位于主目录中

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

---

/home/[…]尝试从systemjs的配置中删除baseURL并添加

到HTML DOM中的头部部分

我的Angular2应用程序位于根目录的子文件夹“modules/angular”中。
`


你好
加载。。。
System.config({
套餐：{
“应用程序”：{
格式：'寄存器'，
defaultExtension:'js'
}
}
});
System.import（'apps/main'）。然后（null，console.error.bind（console））；
`
以下是对我们有效的方法：

使基准参照点指向包含角度项目的子目录。这将确保找到所有节点\模块依赖项等

使用不同的应用程序配置PathLocationStrategy\u BASE\u HREF
所以html5模式仍然适用于实际的angular应用程序

引导程序（AppComponent，
[.....
绑定（APP_BASE_HREF）.toValue（“/yardmap/planning”）

参考：

参考资料：
我挣扎了一段时间才做了类似的事情。
我有一个在apache服务器上运行的wordpress。
出于SEO原因，我们希望angular应用程序以phpmyadmin的方式托管在子文件夹中

我所做的是在/apps/my app hosting文件夹中创建一个子文件夹
创建此文件夹的别名：/my alias=>/apps/my app hosting文件夹
将基本引用从base href=“/”更改为base href=“”
这起作用了

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


将base ref设置为别名：我需要手动修复
通过应用程序的链接和一些奇怪的配置，我结束了
例如www.example.com/my-alias/my-alias/index；别名和基引用之间出现了一些错误
离开“/”通过添加一些奇怪的“/”中断了一些内部链接，所以我已经中断了
url类似于：www.example.com/my-alias/node//blablabla；我认为它试图使用服务器的根文件夹

希望它能帮助未来的读者。
我在“base href”上加了一个~


System.import（'app'）.catch（函数（err）{console.error（err）；}）；
要使用apache在子目录中托管，您只需执行以下操作：

生成类似以下命令的命令：
ng构建--基本href/myapp/

.htaccess文件如下所示

RewriteEngine On
RewriteBase /myapp/
Options +FollowSymLinks

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

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



致：



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

在
webpack.common.js
中更改
baseUrl:'/MedicheckAngular/'
将
/MedicheckAngular/
添加到
index.html
中的链接
在子目录中运行Angular app的完整配置

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

假设“ng app/”为别名路径。
例如
http://www.example.com/ng-app/

Apache配置

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

<base href="/">



到



如果您想在此处访问子目录中的路由更多详细信息
如果您事先不知道子目录，可以在
/src/index.html
文件中使用点作为路径，如下所示：

<base href=".">



然后只需使用命令编译：
ngbuild--prod
。然后像往常一样从
/dist
目录中获取输出

现在，您的应用程序可以放置在任何web目录中，甚至可以从文件系统工作（如果未使用受限API）.
我不知道我是否遵循了你的建议。index.cshtml中的所有include都与~/路径配合得很好。Systemjs在找到模块时遇到了问题。你能提供一个工作文件夹的结构吗？当然，我已经在问题中添加了应用程序布局的屏幕截图。我认为问题是由于~'因为这意味着你的文件位于你的主目录下。我尝试了这个方法，但现在我的url上总是有子文件夹。这听起来不对。我需要将基本href定义为子文件夹，但在没有它的情况下仍然保持我的路由干净。你认为这可以做到吗？我将我的angular（4）app/dist目录符号链接（步骤1,2）.Changing base href=“”修复了它。感谢Angular 8。但是没有加载图像，src='../assets/images'不确定以前的注释，但这可能是开发人员真正想要的。我想不出任何静态资产不应该是相对的原因。在我的例子中，Options+FollowSymLinks会导致一个服务错误。您的解决方案通过删除该li来工作谢谢你的代码
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>

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

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

<base href="/">

<base href="/sub directory_name/">

<base href=".">