标签: angular-module

我现在正在写两个新网站.两者都有很多功能.是否可以使用angular来编写小组件/模块并在其他应用程序中重用它们？它的项目结构是什么,或者我可以使用ng-cli的结构？

我想将这个自定义路由重用策略用于一个模块:

export class CustomRouteReuseStrategy extends RouteReuseStrategy {
    public shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
    public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
    public shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
    public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { return null; }
    public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return true;
    }
}

所以我在我的一个名为的模块中传入@NgModule()ChildModule:

providers: [
        {
            provide: RouteReuseStrategy,
            useClass: CustomRouteReuseStrategy
        }
]

不幸的是,当我在那里传递它时,它会被忽略.虽然添加到我的根目录时工作正常AppModule...我不确定它是否重要,但是ChildModule懒得加载.怎么解决？

我创建了2个功能模块(PagesSharedModule&HomeModule).
现在,我正在尝试使用组件PagesSharedModule模板内部的导出组件,HomeModule我收到此错误:

ERROR Error: Uncaught (in promise): Error: Template parse errors: 'app-main-menu' is not a known element:
1. If 'app-main-menu' is an Angular component, then verify that it is part of this module.
2. If 'app-main-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR
->]<app-main-menu></app-main-menu>"): ng:///HomeModule/HomeComponent.html@0:0 Error: Template parse errors: 'app-main-menu' is not a known element:
1. If 'app-main-menu' is an Angular …

我有一个 ErrorModule (eager) 配置如下：

export const CONFIG = new InjectionToken<ErrorConfig[]>('Module errors configuration.');


@NgModule({
  imports: [... ]
})
export class ErrorModule {
  static forRoot(config: ErrorConfig): ModuleWithProviders {
    return {
      ngModule: ErrorModule,
      providers: [
        ErrorService,
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
        { provide: CONFIG, useValue: config, multi: true }
      ]
    };
  }

  static forChild(config: ErrorConfig): ModuleWithProviders {
    return {
      ngModule: ErrorModule,
      providers: [
        { provide: CONFIG, useValue: config, multi: true }
      ]
    };
  }
}

然后导入核心模块ErrorModule如下：

@NgModule({
  imports: …

我创建了一个 Angular 库。在我的库中，我希望通过在其中包含功能模块来使其变得干净：

例子：

Library
  NavigationModule
    NavigationSideBarComponent
    NavigationTopComponent
    Navigation Service
    etc

  GraphModule
    BarGraphComponent
    PieGraphComponent

我的导航模块目前如下所示：

@NgModule({
  declarations: [
    NavigationSidebarComponent
  ],
  imports: [
    CommonModule,
    MatSidenavModule
  ],
  exports: [
    NavigationSidebarComponent
  ]
})
export class NavigationModule { }

我的图书馆模块目前如下所示：

@NgModule({
  declarations: [LibraryComponent],
    imports: [
      NavigationModule
    ],
    exports: [
      LibraryComponent
      //NavigationSidebarComponent  <-- Did not work
    ]
 })
 export class LibraryModule { }

我发现的大多数教程都使用一个仅包含组件的库，而没有其他内容，例如模块。我发现使用库中的模块的教程没有显示如何导出片段。

本质上，我想将此库导入到任何应用程序中，并能够NavigationSidebarComponent从库或服务中的模块调用或任何其他组件。

我将继续调查此事。

是否有办法防止服务被注入到其原始模块之外？

假设我们正在projects.module.ts延迟加载并ProjectsModule导入ProjectsStoreModule. 我定义了一个服务ProjectsStoreModule，我不想将其注入到 中ProjectsModule，但可以将其注入到 中的任何位置ProjectsStoreModule。我想知道是否有办法实现这一目标？

注意： ProjectsStoreModule没有任何组件，因此我无法向组件提供服务。我想要隔离的服务将被注入到 Ngrx Effect 中，这是一个服务。

我做了什么：

我注册了ProjectsService：

@Injectable({
    providedIn: ProjectsStoreModule
})
export class ProjectsService {
    ...
}

项目模块：

@NgModule({
    ...
})
export class ProjectsModule {
    ...
    imports: [ProjectsStoreModule] 
}

这种做法显然引起了如此多的Circular dependency警告。

ProjectsService然后我尝试在装饰器中注册@NgModule：

@NgModule({
    ...
    providers: [ProjectsService]
})
export class ProjectsStoreModule {
    ...
}

现在的问题是，通过将 导入ProjectsStoreModule到 中ProjectsModule，我想要成为内部服务的服务将在 中可用ProjectsModule。

任何帮助将不胜感激。

我正在使用 Angular 14 和模块联合。在我的远程应用程序中，我有这个文件结构

- package.json
- webpack.config.js
+ src
    - settings.json
    + app
        + services
            - app.service.ts

在我的 app.service.ts 文件中，我访问一个静态 JSON 文件，如下所示

@Injectable({
  providedIn: 'root'
})
export class AppService {
    ...
     public init() {
        const request = new XMLHttpRequest();
        request.open('GET', this.configUrl, false);
        request.send(null);
        ...
    }

在我的 webpack.config.js 文件中，我尝试像这样公开我的模块和文件

module.exports = withModuleFederationPlugin({

  name: 'productlist',

  exposes: {
    './Component': './src/app/app.component.ts',
    './dashboard':'./src/app/my-product-list/my-product-list.module.ts'
  },

  shared: {
    '.settings.json': {
      singleton: true,
      eager: true,
      import: './src/settings.json',
      requiredVersion: 'auto',
    },
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' …

我有一个导出组件以将其公开给其他模块的模块，我想在作为另一个模块的子模块的模块中使用此组件，我正在导入父模块中的第一个模块以启用子模块内部但是，我我并不完全相信这是最好的方法。

这是我在根文件夹中的共享模块，其中包含我要使用的组件：

应用程序/共享/shared.module.ts

import {dtComponent} from './dt.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    dtComponent
  ],
  declarations: [
    dtComponent
  ]
})
export class DatePModule{ }

我在 app 文件夹中有另一个模块，它像这样导入DatePModule：

应用程序/联系人/contacts.module.ts

import {DatePModule} from '../shared/shared.module.ts';

@NgModule({
  imports: [
    CommonModule,
    DatePModule
  ]
})
export class CTModule{ }

我需要使用dtComponent直接的一些组件CTModule，还需要在在的子模块等组件此组件CTModule。

我可以在CTModule的子模块中再次导入DatePModule，但我不相信这是最好的方法。

应用程序/联系人/其他/other.module.ts

import {DatePModule} from '../../shared/shared.module.ts';

@NgModule({
  imports: [
    CommonModule,
    DatePModule
  ]
})
export class OtherModule{ }

我的问题是，如果DatePModule已经导入到父模块中，为什么我需要再次导入？如果我在OtherModule 中删除此导入，则组件 …

有谁知道是否可以在 Angular 模块中导出枚举？如果没有，是否有在 Angular 模块中传送枚举的最佳实践？

// not working example
// i dont know how to export GreatEnum

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GreatComponent } from './great.component';
import { GreatEnum } from './great.enum';

@NgModule({
    imports: [
        CommonModule       
    ],
    declarations: [GreatComponent ],
    exports: [GreatComponent ]
})
export class GreatModule {
}

我有一个应用程序，我想提取它的两个版本。

首先是包含整个应用程序的构建。

第二个是一个仅包含我的模块之一的应用程序。它还有一个单独的路由模块。

我使用文件替换来分离构建，以定义一种新的构建方式angular.json。

替代品是这些：

"fileReplacements": [
  {
    "replace": "projects/my-app/src/environments/environment.ts",
    "with": "projects/my-app/src/environments/environment.prod.ts"
  },
  {
    "replace": "projects/my-app/src/app/app.module.ts",
    "with": "projects/my-app/src/app/app-auth-standalone.module.ts"
  },
  {
    "replace": "projects/my-app/src/app/app-routing.module.ts",
    "with": "projects/my-app/src/app/app-auth-standalone-routing.module.ts"
  },
  {
    "replace": "projects/my-app/src/app/app.component.ts",
    "with": "projects/my-app/src/app/app-auth-standalone.component.ts"
  }
]

现在，当我运行它时，ng run my-app:auth-standalone:production它会出现以下错误：

Error: <some-path>/message-bot.component.html:24:34 - error NG8002: Can't bind to 'control' since it isn't a known property of 'app-bot-view-tr
ansfer-to-user'.
1. If 'app-bot-view-transfer-to-user' is an Angular component and it has 'control' input, then verify that it is part of this module.
2. If …