Angular 使用管理站点布局和前端站点布局_Angular_Angular8

Angular 使用管理站点布局和前端站点布局

angular

Angular 使用管理站点布局和前端站点布局,angular,angular8,Angular,Angular8,我正在工作的应用程序，其中包括前端网站布局和管理网站布局都有不同的JS和CSS文件。我想让他们保持一部分，以免彼此冲突。这是我的index.html页面代码 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Couaff</title> <base href="/"> <meta name="viewp

我正在工作的应用程序，其中包括前端网站布局和管理网站布局都有不同的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>


库夫
据我所知，您希望在一个角度项目中为两个不同的条目提供两个代码基础。如果是这样，您可以执行以下步骤
1.为管理员条目创建新项目
将admin
更改为您想要的任何名称
通过执行此操作，将在基本目录下创建一个新目录projects/admin
（couaff angular web
）
2.配置输出路径
假设您希望在https://{host}/admin/
下设置admin条目，则需要将主机配置为指向dist/admin
目录
或者您可以打开angular.json
。然后找到projects.admin.architect.build.options.outputPath
，并将其更改为您喜欢的任何路径
"outputPath": "../admin",

其中admin
是您选择的路径名称（选择您喜欢的任何内容）
3.在index.html
（注意：这取决于您的主机配置，如您已为管理员页面配置专用主机，则不需要此步骤）
打开管理员项目的index.html
，找到
标记。您需要将其更新为类似这样的内容
<!-- NOTE the original value is "/" - which will cause admin project to fetch assets in your base project -->
<base href="/admin/"> 

取决于你想要什么你也可以

在没有任何参数的情况下运行ng service | build
。您的默认（基本）项目将运行
使用--project=admin
参数运行ng service | build
。您的子项目将运行

参考：

编辑：我在步骤4中犯了一个错误。为命令行添加了param--project=admin
，并修复了答案
请指导我如何在admin中通过angular cli添加组件，以及如何管理该组件的路由。@MuhammadKamran当您运行任何ng generate
命令-add param--project=admin
时。通过此组件，服务。。。所有这些都将在您的管理项目中创建（您也可以从父项目导入组件）。对于路由，只需像平常一样配置它-使用哈希#路由也会更容易。
<!-- NOTE the original value is "/" - which will cause admin project to fetch assets in your base project -->
<base href="/admin/"> 

ng serve|build 
# or 
ng serve|build --project=admin