Angular - 多个模块答案

【问题标题】：Angular - Multiple modulesAngular - 多个模块
【发布时间】：2019-12-11 09:22:19
【问题描述】：

我有 2 个独立的模块，它们的设计完全不同。因此我想创建一个自己的模块“帐户”。如果我包含 import { AppComponent as Account_AppComponent} from './accounts/app/app.component'; 行，则会显示 index.html 模块。它不能解决 app-root 那里的问题。我想我忘记了导入。

如何运行两个单独的区分路由表？为什么它没有显示我的设计内容？

app-module.ts（缩短）：

import { AccountsModule } from './accounts/accounts.module';
@NgModule({
  imports: [
    AccountsModule,
  ],
})

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent }          from './app.component';
import { MainComponent }          from './main/main.component';
import { KontakteComponent }          from './kontakte/kontakte.component';

import { AppComponent as Account_AppComponent} from './accounts/app/app.component';

const routes: Routes = [
 { path: '', redirectTo: '/index', pathMatch: 'full' }, 
  { path: 'index', component: MainComponent }, 
  { path: 'kontakte', component: KontakteComponent }, 
  { path: 'accounts/app', component: Account_AppComponent, outlet: 'aux' },

];

@NgModule({
  imports: [RouterModule.forRoot(routes,{onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

accounts/accounts.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainComponent } from './main/main.component';
import { HeaderComponent } from './header/header.component';
import { AppComponent } from './app/app.component';

import { AppRoutingModule } from '../app-routing.module';

@NgModule({
  declarations: [MainComponent, HeaderComponent, AppComponent],
  imports: [
    CommonModule,
    AppRoutingModule,
  ]
})
export class AccountsModule { }

accounts/app/app.component.html：它只包含应该在布局中的内容。

accounts/header/header.component.html：仅包含 Header。

accounts/main/main.component.html：

<!DOCTYPE html>
<html lang="en">    
  <body>
      <app-header></app-header>
      <main>
      <router-outlet name="aux"></router-outlet>
      </main>
   </body>
</html>

编辑：还是一样的情况。没有解决。

【问题讨论】：

标签： javascript html angular typescript angular8

【解决方案1】：

你应该在你的 app-module.ts 中导入 AppRoutingModule

import { AccountsModule } from './accounts/accounts.module';
@NgModule({
  imports: [
    AccountsModule,
    AppRoutingModule 
  ],
})

所以在您的帐户模块中删除 AppRoutingModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainComponent } from './main/main.component';
import { HeaderComponent } from './header/header.component';
import { AppComponent } from './app/app.component';

import { AppRoutingModule } from '../app-routing.module';

@NgModule({
  declarations: [MainComponent, HeaderComponent, AppComponent],
  imports: [
    CommonModule
  ]
})
export class AccountsModule { }

【讨论】：