在子目录中运行Angular2 [英] Running Angular2 In Subdirectory
问题描述
我有一个可以在localhost下正常运行的应用程序.
I have an app which runs fine under localhost.
我今天尝试将它作为子应用程序放在IIS服务器上.因此，新路径将为localhost/SubDir.
I tried to put it out on an IIS server today as a child application. So the new path would be localhost/SubDir.
System.js到处呕吐，试图立即加载模块.我设置了basePath并使用path/map配置变量运行了几个小时，但无法进入魔术设置.
System.js pukes everywhere trying to load modules now. I set the basePath and played with the path/map config variables for a few hours but couldn't land on the magic settings.
有人知道我想要调整的内容吗，或者有什么对调试有用的东西?
Does anyone have ideas what I'd want to tweak, or anything that would help with debugging?
Chrome控制台
Chrome Console
Chrome网络
Chrome Network
索引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 })
]);
应用文件夹结构
推荐答案
要使用apache托管在子目录中，只需执行以下操作:
To host in a sub directory with apache, you can just do this:
类似于以下命令的构建命令: ng build --base-href/myapp/
Build command similar to this: ng build --base-href /myapp/
.htaccess文件如下所示
.htaccess file would look like this
RewriteEngine On
RewriteBase /myapp/
Options +FollowSymLinks
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.html [L,QSA]
这篇关于在子目录中运行Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
