Angular模块内Router Outlet用ngForm后失效及路由异常问题

针对你遇到的两个错误，我会逐个分析并给出具体的解决方案：

1. 解决NG8003: No directive found with exportAs 'ngForm'错误 #

虽然你提到已经在app.module.ts和dashboard.module.ts中导入了FormsModule，但这里有个关键细节：Angular特性模块不会自动继承根模块（AppModule）的导入。所以必须确保FormsModule是直接在DashboardModule中导入的，具体操作如下：

打开dashboard.module.ts，确认代码包含以下内容：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
// 必须从@angular/forms导入FormsModule
import { FormsModule } from '@angular/forms';

// 导入你的组件
import { DashboardComponent } from './dashboard.component';
import { AdminUsuariosComponent } from './admin-usuarios.component';
import { AdminProyectosComponent } from './admin-proyectos.component';
import { AdminProductosComponent } from './admin-productos.component';

@NgModule({
  declarations: [
    DashboardComponent,
    AdminUsuariosComponent,
    AdminProyectosComponent,
    AdminProductosComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes), // 你的路由配置
    FormsModule // 必须在这里导入，模板驱动表单依赖它
  ]
})
export class DashboardModule { }

另外要注意：不要混淆FormsModule和ReactiveFormsModule——模板驱动表单（用到ngForm）需要的是FormsModule，如果误导入了后者也会导致这个错误。

2. 解决ERROR Error: Cannot activate an already activated outlet错误 #

这个错误通常是路由出口重复激活导致的，结合你的场景，建议从以下几点排查：

• 检查DashboardComponent模板的路由出口：
  确保dashboard.component.html中只有一个未命名的<router-outlet>，因为你的子路由是配置在默认出口下的：

  <!-- dashboard.component.html -->
  <div class="dashboard-container">
    <!-- 你的侧边栏/导航栏 -->
    <router-outlet></router-outlet> <!-- 仅保留这一个默认出口 -->
  </div>
  

  如果你之前添加了命名出口（比如<router-outlet name="admin"></router-outlet>），请移除它，因为你的子路由并没有指定命名出口，强行使用会导致冲突。

• 修正路由导航写法：
  导航到应用其他非Dashboard子路由时，不要使用带outlets的语法，直接使用常规的routerLink即可。比如：

  <!-- 正确导航到其他路由 -->
  <a [routerLink]="['/home']">返回首页</a>
  <!-- 错误写法（不要用）： -->
  <!-- <a [routerLink]="['home', {outlets: {admin: 'home'}}]">返回首页</a> -->
  

• 确认组件声明唯一性：
  如果你之前移动过组件，检查是否有组件被同时声明在AppModule和DashboardModule中——Angular不允许同一个组件在多个模块中声明，这会导致路由等一系列异常。

3. 额外排查步骤 #

如果上述方法无效，尝试：

• 清理项目缓存：运行ng clean后重新执行ng serve，避免缓存导致的模块导入不生效问题。
• 检查表单模板：确保#usuarioForm="ngForm"是绑定在<form>标签上，而不是其他元素，比如：

  <!-- 正确写法 -->
  <form #usuarioForm="ngForm" (ngSubmit)="onSubmit(usuarioForm)">
    <!-- 表单控件，比如<input name="username" ngModel> -->
  </form>
  

内容的提问来源于stack exchange，提问作者user8808992