标签: angular-module

我有一个模块与我的应用程序的路线.其中一条路线是延迟加载模块.

问题是这个延迟加载模块内部有子组件的路由.但是在我的路由器配置上这条路线没有出现......所以当我打电话给懒人模块时,我的屏幕上没有显示任何内容.

这是我的路由器配置(主模块):

export const MODULE_ROUTES: Route[] =[
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard] },
    { path: 'calendar', loadChildren: 'app/dashboard/calendar/calendar-module.module#CalendarModuleModule',canActivate: [AuthGuard]}, 
    { path: '**', component: NoPageFoundComponent, pathMatch: 'full' }
]
.
.
.


@NgModule({
    imports: [
        RouterModule.forChild(MODULE_ROUTES)
.
.
.

在我的懒惰模块上:

export const MODULE_CALENDAR_ROUTES: Route[] = [
    {
        path: 'calendar', component: CalendarComponent, canActivateChild: [AuthGuard, CalendarGuard],
        children: [
            {
                path: '', component: MainCalendarComponent, canActivateChild: [AuthGuard, CalendarGuard]
            },
            {

                path: 'user', component: EditEventComponent, …

我正在我的 AppModule 中导出一个自定义组件，但不能在另一个模块中使用它，该模块正在 AppModule 中导入。我认为导出的组件是全局可见的？

我正在尝试在 TestModule 的组件中使用带有选择器“app-calendar”的 CalendarComponent。

app.module.ts

@NgModule({
  declarations: [ ... ,
    CalendarComponent,
  ],
  imports: [ ... ,
    TestModule,
  ],
  exports: [ ...
    CalendarComponent,
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})

测试模块.ts

@NgModule({
  declarations: [ ... ,
    TestComponent
  ],
  imports: [ ... ],
  exports: [ ... ],
  providers: [ ... ]
})

测试组件.html

<app-calendar></app-calendar>

控制台抛出“app-calendar”不是已知元素（不是模块的一部分）的错误

我错过了什么？

我正在尝试将本地开发的Angular项目/模块导入到angular应用程序中，而不将其发布到npm存储库中。

首先，我按照本教程以UMD格式构建模块（我跳过了发布部分）：

https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464

然后，我尝试通过执行以下命令行在最终应用程序中安装模块：

npm install ../path-to-my-module --save

这成功添加我的模块，@myscope/myModule在package.json我的应用程序，但问题是，在应用程序模块的进口无法识别。我最终收到以下错误：

Cannot find module @myscope/myModule

在my中node_modules，@myscope创建了文件夹，并且在其中有一个../path-to-my-module名为的快捷方式myModule

问题的根源是否在于捷径？如果可以的话如何解决？

我是 Angular 的新手，刚刚开始学习。我有一种情况，我喜欢在多个项目中使用相同的组件。

比方说，我有一个CustomerComponent，它执行 CRUD 操作。

现在我想CustomerComponent在项目A和项目B中使用。原因是如果我必须修改. CustomerComponent，我只能在一个地方修改而不是多个项目。

是否可以创建这样的组件？

如果可能，请指导我如何完成这一任务。

提前致谢。

我不明白router-outlet和module's exports array编译策略之间的区别.

• router-outlet将通过ComponentFactoryResolver自动生成组件
• 如果您不是router-outlet用来访问其他模块的组件,它将从模板解析器中抛出错误

为什么我们需要将它添加到exports数组中,Angular不能自动生成模块中定义的组件router-outlet.

我知道如果我想使用其他模块的组件,则需要添加到导出.

实例

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

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { M1Module } from './m1/m1.module';
// import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    // AppRoutingModule,
    M1Module
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export …

我的应用程序中关于服务的结构如下-

AppModule (AppComponent and HomeComponent)
|       |      |
Lazy1 Lazy2  Lazy3

我的应用程序从 AppComponent 开始，它重定向到 HomeComponent，然后重定向到子模块之一。

所有子模块都是延迟加载的。现在我从 AppComponent 开始，从那里我被重定向到子模块之一。现在根据某些条件，我导航回 HomeComponent，然后再次重定向到子模块之一。

我的问题是，如果我再次使用不同的数据重新加载任何子模块，那么该子模块的服务也将具有相同的旧数据。本质上，由于儿童注射，这些服务并没有像它们应该的那样重新创建。

需要帮助来确定这里的问题。

附加信息 -

我在 AppModule 中有一些 App 级别的常用服务。然后每个子模块都有许多该模块使用的服务。应用级服务被注入到子模块服务中。

我有一个 angular 6 项目，结构如下...

src
|- app
|  |- core
|  |  |- layout.component.ts/html/scss
|  |  |- core.module.ts
|  |- views
|  |  |- modules
|  |  |  |- sample
|  |  |  |  |- sample.component.ts/html/scss
|  |  |  |  |- sample-routing.module.ts
|  |  |  |  |- sample.module.ts
|- app.component.ts/html/scss
|- app-routing.module.ts
|- app.module.ts

...示例模块的路由结构看起来像...

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: SampleComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
}) …

我有一个用三个项目创建的 Angular 工作区。以及我刚刚创建了一个库，我希望在其中包含可重用的模块。

通常对于项目（应用程序和库），我运行以下命令来生成模块或组件：

ng g c component componentName --project=UserPortal

ng g c component componentName --project=myLibrary

但是现在我需要向其中的模块添加组件：

例如库： projects myLibrary src lib navigation-module Add Component here

对于应用项目模块： projects UserPortal src app userModule Add Component Here

我能够通过运行在工作区的库项目中创建一个模块：

ng generate module navigation-module --project=myLibrary

目前我必须通过命令行进入该目录才能创建一个组件。但我有一种感觉，我可以像所有其他命令一样从工作区执行此操作。这将是最有益的，而不必在目录之间进行命令行排列或来回切换。

快速概览：

1. 在 Angular 工作区中创建一个库
2. 在 Angular 工作区的库中创建了一个模块
3. 想要从工作区的库中的模块内创建一个组件

我们很清楚，有多种方法可以为导入的模块设置config。我们有“ .forRoot（）”，“ useValue”，“ useClass”，这些将在导入模块中使用。

例如，我们要使用ng2-currency-mask。直接从文档中的示例用法中，我们可以CurrencyMaskModule通过在导入模块（在本例中为AppModule）中进行设置来进行配置：

export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
    align: "right",
    allowNegative: true,
    decimal: ",",
    precision: 2,
    prefix: "Module$ ",
    suffix: "",
    thousands: "."
};

@NgModule({
    imports: [
        ...
        CurrencyMaskModule
    ],
    declarations: [...],
    providers: [
        { provide: CURRENCY_MASK_CONFIG, useValue: CustomCurrencyMaskConfig }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

但是，如果要useValue动态设置config / （例如，“设置”页面），则必须在组件内部进行更改。现在，我使用以下直接在中编写的代码进行了测试AppComponent：

import { Component, OnInit, Inject } from '@angular/core';
import { CURRENCY_MASK_CONFIG, CurrencyMaskConfig } from 'ng2-currency-mask/src/currency-mask.config';

@Component({
  selector: 'app-root', …

I created an internal directive in a module in my project (Angular 8 + Material Design). Following tuto and official doc.

@Directive({
  selector: '[button-confirmation]'
})
export class ButtonConfirmationDirective {

  @Output('bc-confirm')
  confirmAction = new EventEmitter<any>();

  @Input('bc-options')
  options: Option[] = [...];

  constructor(
    private el: ElementRef,
    private confirmationService: ConfirmationService
  ) { }

  @HostListener('mouseup') onMouseUp() {
    this.confirmationService.displayConfirm(this.el, this.options, this.confirmAction);
  }

}

Ok, it's work. BUT, when i create an external library and move my directive (with components, services, ...) i got the error : …