Angular domain.com/root/featureurea和domain.com/root/featureB之间的路由

出于一些技术原因，我有一个基于angular（cli v6）的小项目，它托管在webhost根目录下的一个子目录中（在使用

npm run build

时，它可以很好地使用--base href参数）

然而，我在安排路线以支持这一点时遇到了一些困难。

bootstrap:[]

'd组件的加载和功能没有问题。但是，直接输入“featureB”的路径只会生成引导组件（“featureB”）

在发布代码之前，先看看这是否仅仅是Angular不打算/不支持的设计，这似乎是值得的。我承认我不确定，当请求是“

/root/featureB

”时，托管Web服务器如何知道首先在“

/root/*

”中提供Angular应用程序，然后呈现特色组件和路由

为了方便这两条路线，是否必须分别开发和部署这两个功能

我考虑使用#语法（认为系统会从路由中获取完整的应用程序，然后根据散列路径确定要加载的路由/组件）。。。除了为每个项目创建单独的项目之外，这是唯一的解决方案吗

例如：www.domain.com/root/#featureA，然后是www.domain.com/root/#featureB（这样，整个角度项目将由

/root/

请求加载，然后可以加载适当的路由）

编辑1 使用

enableTracing:true

，我看到了以下内容（这很奇怪，因为它识别了正确的路由，但没有加载相应的组件）

您可以看到冗长的日志输出

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './routing.module';
import { MyService } from './services/my.service';

import { MyUploadComponent } from './my-upload/my-upload.component';
import { MyEditComponent } from './my-editor/my-editor.component';


@NgModule({
  declarations: [
    MyUploadComponent,
    MyEditComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
  ],
  providers: [ MyService ],
  bootstrap: [ MyUploadComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { MyUploadComponent } from './my-upload/my-upload.component';
import { MyEditComponent } from './my-editor/my-editor.component';


const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'my-upload' },
  { path: 'my-upload', component: MyUploadComponent, },
  { path: 'my-editor', component: MyEditComponent, },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes, { enableTracing: true }) ],
  exports: [ RouterModule ],
  providers: []
})

export class AppRoutingModule { }

路由.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './routing.module';
import { MyService } from './services/my.service';

import { MyUploadComponent } from './my-upload/my-upload.component';
import { MyEditComponent } from './my-editor/my-editor.component';


@NgModule({
  declarations: [
    MyUploadComponent,
    MyEditComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
  ],
  providers: [ MyService ],
  bootstrap: [ MyUploadComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { MyUploadComponent } from './my-upload/my-upload.component';
import { MyEditComponent } from './my-editor/my-editor.component';


const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'my-upload' },
  { path: 'my-upload', component: MyUploadComponent, },
  { path: 'my-editor', component: MyEditComponent, },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes, { enableTracing: true }) ],
  exports: [ RouterModule ],
  providers: []
})

export class AppRoutingModule { }

编辑2 当在

index.html

shell中使用

时，是

哪个状态“充当根据当前路由器状态动态填充的占位符”，不知何故，我仍然不完全理解
路由器插座的工作原理/用途（尽管有许多教程和视频使用了它）

但这并没有改变行为（导致记录相同的跟踪信息）

编辑5
现在答案似乎（相对）显而易见（正如我所担心的；-）

关键点

index.html
只需要简单的

import { NgModule, } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';  // NEW!
import { AppRoutingModule } from './routing';

import { MyUploadComponent } from './my-upload/my-upload.component';
import { MyEditComponent } from './my-edit/my-edit.component';


@NgModule({
  declarations: [
    AppComponent,  // NEW!
    MyUploadComponent,
    MyEditComponent,
  ],
  imports: [
    BrowserModule,  // Common module, ngIf, ngFor, etc
    AppRoutingModule,
  ],
  providers: [ ],
  bootstrap: [ AppComponent ]  // CHANGED!
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})

export class AppComponent implements OnInit {

  constructor() { }

  ngOnInit() { }
}