Javascript 如何使用来自不同模块的组件作为路由声明中的主要组件

这里的棱角分明的新手，非常感谢您的耐心。

我想要实现什么？

• 我正在尝试使用我的身份验证模块（即登录）中的组件 组件）作为路由的基本组件myapp.com/login
• 假设在**app.component.html中嵌入时效果良好，那么在app-routing.module.ts中嵌入时也应该如此

应用程序路由.module.ts的代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '/login', component: LoginComponent}, //Cannot find name 'LoginComponent'.ts(2304)
];

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';



@NgModule({
  declarations: [RegisterComponent, LoginComponent],
  exports:[RegisterComponent,LoginComponent],
  imports: [
    CommonModule
  ]
})
export class AuthModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import {AppCommonsModule} from './app-commons/app-commons.module';
import {AuthModule} from './auth/auth.module'

import { HomeComponent } from './home/home.component'
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AppCommonsModule,
    AuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { LoginComponent } from './login.component';

const authRoutes: Routes = [
  {
    path: '', // considering LoginComponent as the root path for AuthModule. This will be referred as 'login' from AppRoutingModule
    pathMatch: 'full', // this is important to correctly match the empty path
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(authRoutes)],
  exports: [RouterModule]
})
export class AuthRoutingModule {}

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

import { HomeComponent } from './home.component';

const authRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full', // this is important to correctly match the empty path
    component: HomeComponent
  },
  {
    path: 'login',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
    // now this will refer the root path of AuthRoutingModule
  },
  // Redirect all invalid URLs to HomeComponent
  {
    path: '**',
    redirectTo: '/'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(authRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

我的组件结构

• 我有一个auth模块，它有一个登录和注册组件
• 以及基本的ng cli生成的应用程序结构

authmodule的代码 验证模块.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '/login', component: LoginComponent}, //Cannot find name 'LoginComponent'.ts(2304)
];

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';



@NgModule({
  declarations: [RegisterComponent, LoginComponent],
  exports:[RegisterComponent,LoginComponent],
  imports: [
    CommonModule
  ]
})
export class AuthModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import {AppCommonsModule} from './app-commons/app-commons.module';
import {AuthModule} from './auth/auth.module'

import { HomeComponent } from './home/home.component'
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AppCommonsModule,
    AuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { LoginComponent } from './login.component';

const authRoutes: Routes = [
  {
    path: '', // considering LoginComponent as the root path for AuthModule. This will be referred as 'login' from AppRoutingModule
    pathMatch: 'full', // this is important to correctly match the empty path
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(authRoutes)],
  exports: [RouterModule]
})
export class AuthRoutingModule {}

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

import { HomeComponent } from './home.component';

const authRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full', // this is important to correctly match the empty path
    component: HomeComponent
  },
  {
    path: 'login',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
    // now this will refer the root path of AuthRoutingModule
  },
  // Redirect all invalid URLs to HomeComponent
  {
    path: '**',
    redirectTo: '/'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(authRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

app.module.ts的代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '/login', component: LoginComponent}, //Cannot find name 'LoginComponent'.ts(2304)
];

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';



@NgModule({
  declarations: [RegisterComponent, LoginComponent],
  exports:[RegisterComponent,LoginComponent],
  imports: [
    CommonModule
  ]
})
export class AuthModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import {AppCommonsModule} from './app-commons/app-commons.module';
import {AuthModule} from './auth/auth.module'

import { HomeComponent } from './home/home.component'
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AppCommonsModule,
    AuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { LoginComponent } from './login.component';

const authRoutes: Routes = [
  {
    path: '', // considering LoginComponent as the root path for AuthModule. This will be referred as 'login' from AppRoutingModule
    pathMatch: 'full', // this is important to correctly match the empty path
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(authRoutes)],
  exports: [RouterModule]
})
export class AuthRoutingModule {}

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

import { HomeComponent } from './home.component';

const authRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full', // this is important to correctly match the empty path
    component: HomeComponent
  },
  {
    path: 'login',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
    // now this will refer the root path of AuthRoutingModule
  },
  // Redirect all invalid URLs to HomeComponent
  {
    path: '**',
    redirectTo: '/'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(authRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

---

不能直接引用AppRoutingModule中声明为其他模块一部分的组件。必须通过创建AuthRoutingModule将LoginComponent的路由委托给AuthModule。然后在AppRoutingModule中，为登录创建路由，并将控制传递给AuthRoutingModule

按照以下步骤为LoginComponent创建路由

创建一个名为

AuthRoutingModule

的新文件，并在此文件中包含AuthRoutingModule中组件的路由

验证路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '/login', component: LoginComponent}, //Cannot find name 'LoginComponent'.ts(2304)
];

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';



@NgModule({
  declarations: [RegisterComponent, LoginComponent],
  exports:[RegisterComponent,LoginComponent],
  imports: [
    CommonModule
  ]
})
export class AuthModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import {AppCommonsModule} from './app-commons/app-commons.module';
import {AuthModule} from './auth/auth.module'

import { HomeComponent } from './home/home.component'
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AppCommonsModule,
    AuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { LoginComponent } from './login.component';

const authRoutes: Routes = [
  {
    path: '', // considering LoginComponent as the root path for AuthModule. This will be referred as 'login' from AppRoutingModule
    pathMatch: 'full', // this is important to correctly match the empty path
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(authRoutes)],
  exports: [RouterModule]
})
export class AuthRoutingModule {}

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

import { HomeComponent } from './home.component';

const authRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full', // this is important to correctly match the empty path
    component: HomeComponent
  },
  {
    path: 'login',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
    // now this will refer the root path of AuthRoutingModule
  },
  // Redirect all invalid URLs to HomeComponent
  {
    path: '**',
    redirectTo: '/'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(authRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

注意这里使用的

forChild（）

方法

RouterModule.forRoot（）

只应使用一次，并且最好在AppRoutingModule中

RouterModule.forChild（）

用于为其他子模块（以及forChild名称）创建路由

在AuthModule文件中导入AuthRoutingModule

按如下所示修改AppRoutingModule文件

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '/login', component: LoginComponent}, //Cannot find name 'LoginComponent'.ts(2304)
];

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';



@NgModule({
  declarations: [RegisterComponent, LoginComponent],
  exports:[RegisterComponent,LoginComponent],
  imports: [
    CommonModule
  ]
})
export class AuthModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import {AppCommonsModule} from './app-commons/app-commons.module';
import {AuthModule} from './auth/auth.module'

import { HomeComponent } from './home/home.component'
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AppCommonsModule,
    AuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { LoginComponent } from './login.component';

const authRoutes: Routes = [
  {
    path: '', // considering LoginComponent as the root path for AuthModule. This will be referred as 'login' from AppRoutingModule
    pathMatch: 'full', // this is important to correctly match the empty path
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(authRoutes)],
  exports: [RouterModule]
})
export class AuthRoutingModule {}

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

import { HomeComponent } from './home.component';

const authRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full', // this is important to correctly match the empty path
    component: HomeComponent
  },
  {
    path: 'login',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
    // now this will refer the root path of AuthRoutingModule
  },
  // Redirect all invalid URLs to HomeComponent
  {
    path: '**',
    redirectTo: '/'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(authRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

如上面的代码片段所示，如果要从特定路由的子模块加载组件，AppRoutingModule应该使用

loadChildren

属性将控件重定向到子模块

您可能已经在AppModule文件中导入了AppRoutingModule和AuthModule。只需确保您首先加载AppRoutingModule，然后加载其他具有路由的子模块（即，在您的示例中为AuthModule）

如果要延迟加载，请从

AppModule

imports中删除所有子模块（带路由）。更多关于延迟加载的信息

有关子模块路由的更多信息，请参阅

---

我还创建了一个示例。

您在路由文件中引用了

LoginComponent

，但没有导入它

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '/login', component: LoginComponent}, //Cannot find name 'LoginComponent'.ts(2304)
];

添加import语句，我认为它应该修复typescript错误

import { LoginComponent } from './login/login.component';

---

您需要像导入家庭组件一样导入

app routing.module.ts顶部的
LoginComponent
。当然，但是在app.module.ts中导入此模块有什么意义？
app routing.module.ts
是路由的“控制器”。其他模块是会议场所的“控制器”，所有人都可以看到对方。您可以在
app routing.module.ts
中看到，您没有将
LoginComponent
放入
声明中：[]
。为了使用组件，它必须在
声明中：[]
。很好。但这可能不适用于所有情况，尤其是当OP正在使用（或决定使用）延迟加载时。@Shravan是的，但从发布的内容来看，它看起来不像是在使用延迟加载。