标签: ng-modules

我目前正在开发一个使用独立组件的 Angular 应用程序（版本 16.1.3）。该应用程序还依赖于使用 NgModules 的 Angular 库。我正在尝试将此库中的组件导入到我的应用程序中，其中该库还包含一个从应用程序中检索环境数据的函数。

这是ui-lib.module.ts图书馆的

export class UiLibModule {
    public static forRoot(environment: any): ModuleWithProviders<UiLibModule> {
        return {
            ngModule: UiLibModule,
            providers: [
                {
                    provide: 'environment',
                    useValue: environment,
                },
            ],
        };
    }
}

在我的主应用程序中，我将库导入到我的main.ts文件中，如下所示：

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
    ...
    UiLibModule.forRoot(environment),
    ...)
    ]
...});

但是，当我尝试使用库中的组件时遇到问题：

• 如果我在主应用程序内但在 之外使用库组件<router-outlet></router-outlet>，则一切都会按预期工作。
• 如果我在 中路由的组件中使用我的库中的相同组件<router-outlet></router-outlet>，我就会遇到问题。组件显示正确，但离开页面时，路由器无法从页面中删除该组件。此外，控制台中不会显示任何错误。

以下是我在独立组件中导入 UiLibModule 的方法：

...
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  imports: [
    UiLibModule
  ]

.forRoot()我已经使用使用该函数的库和不使用该函数的库对此进行了测试。似乎未使用的库.forRoot()按预期工作，而使用的库则遇到了上述问题。

我的问题涉及我的图书馆的正确和完整包含。我不确定当前导入库的方式是否准确且全面。具体来说，我很好奇是否有一种方法可以通过独立组件直接添加环境。

此外，我不确定是否需要在独立组件中再次声明环境，因为它已经在 …

我有一个名为GoComponent的共享组件,我想在2个模块中使用:FindPageModule和AddPageModule.

当我在"FindPageModule"的声明和我的"AddPageModule"中添加它时,我收到一个错误:

find:21错误:(SystemJS)类型GoComponent是2个模块的声明的一部分:FindPageModule和AddPageModule!请考虑将GoComponent移动到导入FindPageModule和AddPageModule的更高模块.您还可以创建一个新的NgModule,它导出并包含GoComponent,然后在FindPageModule和AddPageModule中导入该NgModule.

所以我把它们从它们中取出并将它添加到AppModule声明中,它确实导入了FindPageModule和AddPageModule,并且在FindPageModule声明中使用"GoComponent"的组件中出现了一个名为"FindFormComponent"的组件中的错误:

zone.js:355 Unhandled Promise rejection: Template parse errors:
'go' is not a known element:
1. If 'go' is an Angular component, then verify that it is part of this module.
2. If 'go' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" style="height:64px;">
            <div style="position: relative; display: inline-block; width: 100%;">
                [ERROR ->]<go></go>
            </div>
        </div>
"): FindFormComponent@101:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) …

我尝试导入FromGroup,FormBuilder并对FormControl我CustomModule:

import { FormsModule, FormGroup }   from '@angular/forms';

@NgModule({
  imports: [
    FormsModule,
    FormGroup
  ]
})

但它抛出一个错误:

EXCEPTION:未捕获(在承诺中):错误:模块'CustomModule'导入的意外值'FormGroup'

如果我只导入FormsModule它工作正常.

有任何想法吗？

我刚刚开始学习Angular.我ngModule在空的时候遇到了几个使用装饰器的例子class.

我想知道的是...... class直接在ngModule装饰器下面声明的是仅用于初始化模块还是用于任何其他目的？

所以我正在使用Angular 2 final(2.0.0),让我说我创建了一个WidgetsModule,其中包含一些指令和组件,可以帮助我构建我的应用程序,然后将其导入我的AppModule中

import { NgModule }      from '@angular/core';
import { UniversalModule } from 'angular2-universal';

import { WidgetsModule } from '../../../widgets';
import { App, appRouting } from './';

@NgModule({
  imports:      [
    UniversalModule,
    WidgetsModule,
    appRouting
  ],
  providers:    [ AppPresenter ],
  declarations: [ App ],
  exports:      [ ],
  bootstrap:    [ App ]
})
export class AppModule { }

然后我想在子模块中使用小部件,如HomeModule,CartModule等.如何在不必在每个其他模块中导入WidgetsModule的情况下使小部件可用？

import { NgModule }      from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'

import { WidgetsModule } …

下面是我创建动态模块的初始代码:

protected createComponentModule(componentType: any) {

    @NgModule({
        imports: [
            ComponentModule 
        ],
        declarations: [
            componentType
        ],
    })
    class RuntimeComponentModule {
    }
    return RuntimeComponentModule;

}

虽然我将在下面的代码上实现AOT,但它会给我一个错误:

找不到'RuntimeComponentModule'的NgModule元数据

我通过更改下面的代码找到了一些Articals的解决方案,我的错误消失了:

default class RuntimeComponentModule 
{
}

但是它提出了新的错误:

修饰符不能出现在这里

它不允许我在方法中装饰@NgModule.

我创建了一个共享模块，并在其他模块中声明并导出了我需要的组件。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DateslideComponent } from './dateslide/dateslide.component';
import { IonicModule } from '@ionic/angular';
import { TimeslideComponent } from './timeslide/timeslide.component';
import { AddtimeComponent } from './addtime/addtime.component'

@NgModule({
   declarations: [DateslideComponent, TimeslideComponent, AddtimeComponent],
   imports: [
       CommonModule,
       IonicModule
   ],
   exports: [DateslideComponent, TimeslideComponent, AddtimeComponent]
})
export class TimeModule { }

在另一个模块中，我导入了共享模块。

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } …

我的应用程序的组件使用重量级外部包(ag-grid,大约1MB),作为angular2模块(AgGridModule)提供.我想只在需要使用它的组件时加载包,所以我ContentModule和它的所有子模块都是延迟加载的.整个结构看起来像这样:

然而,当我导入AgGridModule到两个Submodule1及Submodule3,它最终被纳入编制JS两次,使得无论1.chunk.js和3.chunk.js大.我尝试将其导入ContentModule,但子模块无法识别包含在其中的组件AgGridModule,即使我将它们列在exports属性中也是如此ContentModule.

@NgModule({
  imports: [
    ContentRoutingModule,
    SomeOtherModule,
    AgGridModule.withComponents([])
  ],
  exports: [
    // this is the component from AgGridModule that I use
    AgGridNg2
  ]
})
export class ContentModule { }

有没有办法在延迟加载的模块之间共享模块,或者将导入模块的某些组件暴露给延迟加载的子模块？

UPD:创建共享模块并将其导入子模块没有帮助,仍然有两个块,每个块大约1MB:

UPD2:我通过将Submodule1和Submodule3合并到一个模块中来临时解决了这个问题.

我是Angle 2的新手。

什么是真正@NgModule的角2？我通过角度通过官方文档。但是我并不清楚。

谁能帮我 ？

我对“platformBrowserDynamic().bootstrapModule(app.app_module)”调用有问题，错误消息是“未捕获的错误：断言错误：传入的类型不是 NgModuleType，它没有 '?mod' 属性”。但是我可以在调试过程中看到这个属性： AppModule NgModule proto emod property

app.app_module 是一个新的 @NgModule 实例，用于引导我的自定义应用程序组件。我使用了打字稿。有没有人知道为什么会发生这种情况？

另外这里还有源 JS 代码https://gist.github.com/sunnygleason/74e84acd0a03a925ec901594723ce876 我正在将它转换成 Typescript Angular CLI 项目。这是 https://github.com/AnatoliYatskevich/WIA

我更改的特定文件是： https: //github.com/AnatoliYatskevich/WIA/blob/master/src/main.ts https://github.com/AnatoliYatskevich/WIA/blob/master/src/index.html https： //github.com/AnatoliYatskevich/WIA/blob/master/src/app/app.component.ts https://github.com/AnatoliYatskevich/WIA/blob/master/src/app/app.module.ts

工具 WebStorm，来自https://www.pubnub.com/docs/angular2-javascript/pubnub-javascript-sdk 的示例格式。

谢谢