在子目录中运行Angular2
我有一个在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文件夹结构
use*_*794 15
要使用apache托管在子目录中,您可以这样做:
构建与此类似的命令:ng build --base-href/myapp /
.htaccess文件看起来像这样
RewriteEngine On
RewriteBase /myapp/
Options +FollowSymLinks
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.html [L,QSA]
小智 6
如果您事先不知道子目录，可以使用点作为/src/index.html文件路径，如下所示：
<base href=".">
然后只需使用命令构建：ng build --prod。然后像往常一样从目录内部获取输出/dist。
现在，您的应用程序可以放置在任何 Web 目录中，甚至可以从文件系统运行（如果未使用受限制的 API）。
当您部署到域中的非根路径时，需要手动更新以下内容：
<base href="/">
至：
<base href="/MedicheckAngular/">
在中dist/index.html，或进行如下更改：
- 改变
baseUrl: '/MedicheckAngular/'在webpack.common.js。 - 添加
/MedicheckAngular/到中的链接index.html。
我认为您错过了一个子文件夹。
您在“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”“ ~/ ”替换为返回的路径，它将按预期工作。
| 归档时间： |
|
| 查看次数： |
18845 次 |
| 最近记录： |