使用管理站点布局和前端站点布局角8
我的工作是应用程序，其中包括前端网站布局和管理网站布局，他们都有不同的JS和CSS文件。我不想让他们互相冲突。这是我的index.html页面代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Couaff</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
<!-- **Favicon** -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- **CSS - stylesheets** -->
<link id="default-css" href="assets/style.css" rel="stylesheet" media="all">
<link href="assets/css/shortcode.css" rel="stylesheet" type="text/css">
<!-- **Additional - stylesheets** -->
<link rel="stylesheet" href="assets/css/responsive.css" type="text/css" media="all">
<link href="assets/css/animations.css" rel="stylesheet" media="all">
<link id="skin-css" href="assets/skins/red/style.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="assets/css/meanmenu.css" type="text/css" media="all">
<link rel="stylesheet" type="text/css" href="assets/css/pace-theme-loading-bar.css">
<!-- **Font Awesome** -->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- **Google - Fonts** -->
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css" />
<![endif]-->
<!-- jQuery -->
<script src="assets/js/modernizr.custom.js"></script>
</head>
<body>
<app-root></app-root>
<!-- **jQuery** -->
<script src="assets/js/jquery-1.11.3.min.js"></script>
<script src="assets/js/jquery.parallax-1.1.3.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/js/jquery.sticky.min.js"></script>
<script src="assets/js/jquery.inview.js" type="text/javascript"></script>
<script src="assets/js/jsplugins.js" type="text/javascript"></script>
<script src="assets/js/jquery.meanmenu.min.js" type="text/javascript"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>目前，我只保留了前台网站布局JS和CSS文件。这里是架构和站点布局组件。有关参考资料，请参阅下图。
回答 1
Stack Overflow用户
发布于 2020-06-03 08:26:33
根据我的理解，您希望在单个角度项目中有2个不同条目的代码基。如果是这样，您可以执行以下步骤
1.为您的管理条目创建一个新项目
ng g application admin --routing=true将admin更改为您想要的任何名称。
通过这样做，将在基本目录( projects/admin )下创建一个新目录couaff-angular-web。
2.配置outputPath
假设您希望在https://{host}/admin/下拥有管理项，那么您需要将主机配置为目标为dist/admin目录。
或者您可以打开angular.json.Then，找到projects.admin.architect.build.options.outputPath并将其更改为您喜欢的任何路径
"outputPath": "../admin",其中admin是您选择的路径的名称(选择任何您喜欢的)
3.在index.html中配置基本路径
(注意:这取决于您的主机配置，就像您已经为管理页面配置了专用主机一样，那么这一步是不需要的)
打开管理项目的index.html，找到<base>标记。您需要将其更新为这样的内容
<!-- NOTE the original value is "/" - which will cause admin project to fetch assets in your base project -->
<base href="/admin/"> 4.像往常一样运行你的应用程序
ng serve|build
# or
ng serve|build --project=admin取决于你想要什么，你可以
- 运行
ng serve|build而不使用任何param。您的默认(基本)项目将运行。 - 使用
ng serve|buildparam运行--project=admin。您的子项目将运行。
参考资料：五cli医生
编辑__：我在步骤4中犯了一个错误。为命令行添加了param --project=admin并修正了答案。
https://stackoverflow.com/questions/62167834
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号