angular-module 相关问题

您可以将AngularJS模块视为应用程序不同部分的容器 - 控制器，服务，过滤器，指令等。

为什么我的导入在某些模块中有效，但在其他模块中却抛出：错误：来自 BrowserModule 的提供程序已被加载

我的应用程序分为几个模块：AppModule、CoreModule、RecordModule。我的 AppModule 的导入是：应用程序路由模块，核心模块, 记录模块所以，我的其他两个模块，以及......

angular module angular-module

回答 1 投票 0

我有一个 HomeComponent，我想在 / 路线上显示 HomeComponent.hmtl 社区帖子我有一个 HomeComponent，我想在 / 路线上显示 HomeComponent.hmtl <header> <div> <h1>CommunityPost</h1> </div> <button mat-raised-button color="primary" (click)="onLogout()">Log Out</button> </header> <mat-divider></mat-divider> <main> <nav mat-tab-nav-bar [tabPanel]="tabPanel"> <a mat-tab-link routerLink="/users" (click)="activeLink = '/users'" [active]="activeLink == '/users'" > COMMUNITY</a> <a mat-tab-link routerLink="/posts" (click)="activeLink = '/posts'" [active]="activeLink == '/posts'" > POSTS </a> </nav> <mat-tab-nav-panel #tabPanel> <router-outlet></router-outlet> </mat-tab-nav-panel> </main> 在路由器插座中我想向孩子们展示路线应用程序路线 const routes: Routes = [ `enter code here`{path: '', component: HomeComponent, canActivate: [guardGuard], children:[ {path: 'posts', loadChildren: () => import('./posts/posts.module').then(m => m.PostsModule)}, {path: 'users', loadChildren: () => import('./user/user.module').then(m => m.UserModule)}, {path: '', redirectTo: 'users', pathMatch: 'full'}, ]}, {path: 'login', component: LoginComponent}, {path: '**', component: NotFoundComponent}, ]; 用户路线 const routes: Routes = [ {path: '', component: UsersListComponent}, {path: 'users/:id', component: UserDetailComponent}, ]; 这显示/路由 UserListComponent 而不是 HomeComponent 以及嵌套在其中的 UserList 编辑 HomeComponent.ts import { Component } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrl: './home.component.css' }) export class HomeComponent { activeLink: string constructor(private router: Router){ this.router.events.subscribe((data: NavigationEnd)=> { if(data.url !== undefined){ this.activeLink=data.url } }) } onLogout(){ if(window.confirm('You are logging out. Are you sure?')){ localStorage.removeItem('auth') window.location.reload() } } } 如果我转到 localhost/ ，它将仅显示 UserListComponent ，但是当我转到 localhost/user 时，它将显示 HomeComponent 和嵌套的 UsersListComponent ，因为它应该是实际上共享的代码没有任何重大问题，我认为问题可能出在根组件级别，请检查下面的 stackblitz 以供参考，如果仍然遇到问题，请分享回 stackblitz 并复制问题和详细信息需要修复什么！主页组件！ import { CommonModule } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { RouterModule } from '@angular/router'; import { MatTabsModule } from '@angular/material/tabs'; import { MatDividerModule } from '@angular/material/divider'; @Component({ selector: 'app-home', template: `<header> <div> <h1>CommunityPost</h1> </div> <button mat-raised-button color="primary" (click)="onLogout()">Log Out</button> </header> <mat-divider></mat-divider> <main> <nav mat-tab-nav-bar [tabPanel]="tabPanel"> <a mat-tab-link routerLink="/users" (click)="activeLink = '/users'" [active]="activeLink == '/users'" > COMMUNITY</a> <a mat-tab-link routerLink="/posts" (click)="activeLink = '/posts'" [active]="activeLink == '/posts'" > POSTS </a> </nav> <mat-tab-nav-panel #tabPanel> <router-outlet></router-outlet> </mat-tab-nav-panel> </main>`, standalone: true, imports: [RouterModule, CommonModule, MatTabsModule, MatDividerModule], }) export class HomeComponent implements OnInit { activeLink = ''; constructor() {} ngOnInit() {} onLogout() {} } Stackblitz Demo

angular angular-routing angular-module

回答 1 投票 0

有没有办法在 Angular StandAlone 的所有模块中提供通用模块？

在每个组件中，我都必须导入此 CommonModule 才能使用 NgIf 等指令。我想要一种在我的所有模块中注入这个模块的方法。 @成分（{ 选择器：“应用程序注册”，...

angular module angular-module angular-standalone-components

回答 1 投票 0

从 Angular 中的对等模块覆盖提供者

我有2个库模块，其定义如下： @NgModule({ 提供者：[ 某物， ], ... }) 导出类 LibAModule { } @NgModule({ 提供者：[ {

angular angular-module angular-providers

回答 1 投票 0

如何在 Angular 微前端中使用共享服务与模块联合插件进行数据通信？

我在 Angular 项目中面临挑战，其中我有一个在端口 4500 上运行的基本应用程序，并且我导入了一个远程应用程序。在远程应用程序中，我使用主题创建了一个共享服务并拥有

micro-frontend angular-module angular-module-federation

回答 1 投票 0

何时在 Angular 14 中使用独立组件或模块？

我想知道什么时候应该使用独立组件以及什么时候应该创建新模块。既然它是 Angular 中引入的新概念，那么使用它们的标准是什么？我创建了一个...

angular typescript components angular-module

回答 2 投票 0

Angular 11 - mat-grid-list 在一个组件中无法识别，但在其他几个组件中工作

我在我的大型 Angular 项目中添加了一个新组件。我使用该组件来布局页面。奇怪的是新组件会产生错误。我处理过这类问题...

angular angular-material angular-components angular-module

回答 2 投票 0

Angular Cypress 组件测试错误：初始化前无法访问“<Component>”

我正在尝试使用 Cypress 运行我的 Angular 组件的规范。但我在 Cypress 日志中收到以下错误：以下错误源自您的测试代码，而不是来自 Cypress。 > 不能

angular cypress angular-module cypress-component-test-runner e2e

回答 1 投票 0

如何重用 Angular 测试文件中的所有导入

假设我有一个简单的模块 AppModule，它有许多导入、声明和提供者。现在我想为位于该模块声明中的组件 ListComponent 编写一个测试...

angular angular-components angular-module angular-test

回答 3 投票 0

Angular 共享组件模块无法在延迟加载模块中工作

我在 SharedModule 中添加了一个组件，我需要在延迟加载模块中使用它，但是从共享模块导出组件并在延迟加载模块中导入 SharedModule 后发生事件，我...

angular angular-components angular-module angular-lazyloading

回答 1 投票 0

Angular 16 模块中未使用的组件是否已从捆绑包中删除（tree shake）？

我有一个 SharedModule，我将需要包含在多个模块中的每个组件都填充在那里。但并非每个模块都需要从 SharedModule 导出的每个组件。如果我...

angular angular-module tree-shaking

回答 1 投票 0

在 Angular 中预加载功能模块有什么缺点吗？

我刚刚了解了如何在 Angular 中预加载功能模块，方法是在根 module.ts 文件中导入的 RootModules.forChild() 方法中添加这一行：预加载策略：PreloadAllMo...

angular angular-module ng-modules

回答 1 投票 0

ngmodule 不是 ngmoduletype 的子类型

我使用 Angular 9，我想做延迟加载，我做应用程序路由 { 路径: '', loadChildren: () => import("./components/login/login.module")//.then(m => // m.LoginModule) } 和船尾...

angular angular-routing angular9 angular-module

回答 5 投票 0

Angular 未在 app.module.ts 中导入模块，但该模块的组件声明中仍然会出现错误

我有一个应用程序，我想提取它的两个版本。首先是包含整个应用程序的构建。第二个是一个仅包含我的模块之一的应用程序。它有一个单独的路由模块作为

angular angular-cli angular-module

回答 2 投票 0

Angular 10 在从不同工作区渲染组件时使用库时无法读取 null 的属性“bindingStartIndex”

我创建了一个位于我的应用程序工作区之外的 Angular-Library。结果是我有两个不同的工作空间。我的第一个方法是构建我的库并使用我的应用程序链接 /dist 文件夹。 T...

angular typescript angular-module angular-library angular-ivy

回答 3 投票 0

在我的 Web 应用程序中加载页面时如何处理 Angular 警告“耗时超过 2417 毫秒”？

我刚刚将 Angular Cli 升级到 16.0.1，将 Node 升级到 18.16.0，现在我在我的 Angular 应用程序中点击不同的页面时看到了警告。警告信息：警告：处理 https://localh 的源映射...

angular angular-cli warnings ngx-bootstrap angular-module

回答 0 投票 0

从模块执行模块或库时如何处理 Angular 警告“花费的时间超过 2417 毫秒”？

angular angular-cli warnings ngx-bootstrap angular-module

回答 0 投票 0

具有多个入口点延迟加载的 Angular 库

我有一个自定义库，其中包含一些自定义元素，例如：custom-a、custom-b 和 custom-c。结构如下：项目/自定义库源代码/库自定义-a 自定义a.component.ts custom-a.compo...

angular lazy-loading angular-module

回答 1 投票 0

Angular 组件不会使用空路径加载到默认插座中，但会使用插座名称。不要相信还有其他匹配的路线

我的应用程序组件中有几个路由器插座。除了一个，其他都有名字。我的应用程序组件中有几个路由器插座。除了一个，其他都有名字。 <router-outlet name="menu"></router-outlet> <router-outlet></router-outlet> <router-outlet name="sidebar"></router-outlet> 目前，我的根路由配置指定以下内容： [ { path: 'mypath', loadChildren: () => import('./my-main.module').then((m) => m.MyMainModule) } ] 延迟加载的“主模块”路由配置如下所示： [ { path: ':myMainId', resolve: { myMainData: MyMainDataResolver }, children: [ { path: ':mySubId', resolve: { mySubData: MySubDataResolver }, loadChildren: () => import('./my-sub.module').then((m) => m.MySubModule) // Needs mySubData }, { path: '', component: MyMainComponent } // Needs myMainData ], }, { path: '', component: MenuComponent, outlet: 'menu' } ] 最后，我的延迟加载的“子模块”路由配置如下所示： [{ path: '', component: MySubComponent, outlet: 'sidebar' }] 使用上述配置，我的 MyMainComponent 不会加载（未调用构造函数/onInit）。但是，如果我给默认路由器出口一个名称并在路由配置中的 for MyMainComponent 中指定出口名称，则所有组件都会呈现。类似地，如果我删除 url 的 :mySubId 段，并让主出口无名，MyMainComponent 会渲染。所以，MyMainComponent 的路由和 MySubComponent 的路由（或其父路由）之间似乎发生了某种冲突。我怀疑这与这两条路线都是空的有关，并且可能都以某种方式匹配，但我不明白当一条指定了出口而另一条没有指定出口时会怎样。提前感谢您提供的任何帮助。

angular angular-router angular-module

回答 0 投票 0

使用 Angular 模块联合，我如何配置我的 shell 和子应用程序以使用同一库的不同版本？

我正在使用 Angular 14 和模块联合。在我的 shell 应用程序中，我正在使用这个库 “我的公共库”：“^0.0.10”，我在我的路线中使用它加载一个子应用程序 { ...

angular-module angular14 webpack-module-federation angular-module-federation

回答 2 投票 0

angular-module 相关问题

最新问题