3. 在
我正在开发包括前台站点布局和管理站点布局的应用程序，它们都有不同的JS和CSS文件。我想让他们成为不相互冲突的一部分。这是我的索引.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文件。下面是体系结构和网站布局组件。有关参考，请参见下图。
棱角网
据我了解，您希望在单个 Angular 项目中为 2 个不同的条目提供 2 个代码库。如果是这样，您可以执行以下步骤
1. 为管理员条目创建新项目
ng g application admin --routing=true
将admin更改为所需的任何名称。
通过这样做，将在基目录下创建一个新目录projects/admin(couaff-angular-web(
2. 配置输出路径
假设您希望将管理员条目置于https://{host}/admin/下，则需要将主机配置为面向dist/admin目录
或者你可以打开angular.json.然后找到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。您的默认(基本(项目将运行 - 使用
--project=admin参数运行ng serve|build。您的子项目将正在运行
参考：ng-cli 文档
编辑：我在步骤4中犯了一个错误。为命令行添加了参数--project=admin- 并修复了答案