使用管理站点布局和前端站点布局 angular 8
Using Admin site layout and front site layout angular 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文件。这是体系结构和站点布局组件。供参考，请参见下图。
Angular-Web
据我了解，您希望在单个 Angular 项目中为 2 个不同的条目创建 2 个代码库。如果是这样，您可以执行这些步骤
1。为您的管理员条目创建一个新项目
ng g application admin --routing=true
将 admin 更改为您想要的任何名称。
执行此操作后，将在您的基本目录 (couaff-angular-web)
下创建一个新目录 projects/admin
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 没有任何参数。您的默认（基础）项目将运行
- 运行
ng serve|build 与 --project=admin 参数。您的子项目将是 运行
参考：ng-cli doc
编辑：我在第 4 步中犯了一个错误。为命令行添加了参数 --project=admin - 并修复了答案
我正在开发包含前端站点布局和管理站点布局的应用程序，它们都有不同的 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文件。这是体系结构和站点布局组件。供参考，请参见下图。
Angular-Web
据我了解，您希望在单个 Angular 项目中为 2 个不同的条目创建 2 个代码库。如果是这样，您可以执行这些步骤
1。为您的管理员条目创建一个新项目
ng g application admin --routing=true
将 admin 更改为您想要的任何名称。
执行此操作后，将在您的基本目录 (couaff-angular-web)
projects/admin
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没有任何参数。您的默认（基础）项目将运行 - 运行
ng serve|build与--project=admin参数。您的子项目将是 运行
参考：ng-cli doc
编辑：我在第 4 步中犯了一个错误。为命令行添加了参数 --project=admin - 并修复了答案