forRoot 方法 Angular 库未触发

Question

我创建了一个带有静态 forRoot 方法的角度库，将静态数据从应用程序传递到库，所以我创建了一个 forRoot 方法来处理这个

export class DynamicFormBuilderModule {
  public static forRoot(config: Configurations): ModuleWithProviders<DynamicFormBuilderModule> {
    console.log('inside forRoot method',config)
    return {
      ngModule: DynamicFormBuilderModule,
      providers: [
        ConfigService,
        {
          provide: Configurations,
          useValue: config,
        },
      ],
    };
  }
}

这是从应用程序传递到库的数据

 DynamicFormBuilderModule.forRoot({
  production: environment.production,
  baseUrl: environment.baseUrl,
  maxMaskCharacterLength: environment.maxMaskCharacterLength,
  rejectedExtentions: environment.rejectedExtentions,
  attachmentImage: environment.attachmentImage,
  attachmentFile: environment.attachmentFile,
  attachmentBoth: environment.attachmentBoth,
  socketAutomaticReconnectIntervals: environment.socketAutomaticReconnectIntervals,
  undoCount: environment.undoCount,
}),

问题是在构建 lib 并将其上传到 devops 工件并下载到 node_module 文件夹之后

我从应用程序收到的所有发送数据都是空白的，所以在库模块内创建的 forRoot 中添加了一些控制台日志后，我发现 forRoot 没有触发我不知道为什么，我花了很多时间尝试调试，但是没运气。

这是上传的工件文件的快照

更新：这是我的 ConfigService 构造函数

constructor(@Optional() config?: Configurations) {
    if (config) {
      this._production = config.production;
      this._baseUrl = config.baseUrl;
      this._maxMaskCharacterLength = config.maxMaskCharacterLength;
      this._rejectedExtentions = config.rejectedExtentions;
      this._attachmentImage = config.attachmentImage;
      this._attachmentFile = config.attachmentFile;
      this._attachmentBoth = config.attachmentBoth;
      this._socketAutomaticReconnectIntervals = config.socketAutomaticReconnectIntervals;
      this._undoCount = config.undoCount;
    }
  }

Answer 1

我做了一个可行的小例子。 我放了所有不同的组件和服务（这是一个非常大的帖子，抱歉）

图书馆

应用程序库模块

import { ModuleWithProviders,NgModule,Optional,SkipSelf } from '@angular/core';

import { AppLibComponent } from './app-lib.component';
import { CommonModule } from '@angular/common'; 
import { AppLibService,UserServiceConfig } from './app-lib.service';


@NgModule({
  declarations: [AppLibComponent],
  imports: [CommonModule
  ],
  exports: [AppLibComponent]
})
export class AppLibModule { 
  constructor(@Optional() @SkipSelf() parentModule?: AppLibModule) {
    if (parentModule) {
      throw new Error(
        'GreetingModule is already loaded. Import it in the AppModule only');
    }
  }

  public static forRoot(config: UserServiceConfig): ModuleWithProviders<AppLibModule> {
    console.log(config)
    return {
      ngModule: AppLibModule,
      providers: [
        {provide: AppLibService, useValue: config }
      ]
    };
  }
}

应用程序库组件

import { Component, OnInit } from '@angular/core';
import { AppLibService } from './app-lib.service';
@Component({
  selector: 'lib-app-lib',
  template: `
  <h1>{{title}}</h1>
  <p *ngIf="user">
    <i>Welcome, {{user}}</i>
  <p>
  `,
  styles: [
  ]
})
export class AppLibComponent implements OnInit {
  title = 'NgModules';
  user = '';

  constructor(userService: AppLibService) {
    this.user = userService.userName;
  }

  ngOnInit(): void {
  }

}

应用程序库服务

import { Injectable,Optional } from '@angular/core';

let nextId = 1;

export class UserServiceConfig {
  userName = 'Philip Marlowe';
}

@Injectable({
  providedIn: 'root'
})
export class AppLibService {
  private id = nextId++;

  constructor(@Optional() config?: UserServiceConfig) {
    if (config) { this._userName = config.userName; }
  }

  get userName() {
    // Demo: add a suffix if this service has been created more than once
    const suffix = this.id > 1 ? ` times ${this.id}` : '';
    return this._userName + suffix;
  }
  private _userName = 'Sherlock Holmes';
}

应用

应用程序模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';  
import { environment } from './../environments/environment';

import { AppComponent } from './app.component';
import { AppLibModule} from 'app-lib'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,CommonModule,AppLibModule.forRoot({userName: environment.userName})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:`
  <lib-app-lib></lib-app-lib>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app-library-use';
}

环境.ts

export const environment = {
  production: false,
  userName:"User Developer"
};

环境.ts

export const environment = {
  production: true,
  userName:"User Production"
};

注意我使用这个SO在本地生成库

注意：我遇到了问题，因为起初我没有将 commonModule 导入到库中

注意：我把这两个项目放在了 github

Answer 2

如果你的库是正确构建的，你应该在本地看到它应该公开的所有组件。 请记住，您要在 lib 之外公开的所有内容都必须在publi-api.ts文件中声明。

我的建议：首先使用位于 /projects 等目录中的 lib 旁边的“沙盒”应用程序在本地测试您的 lib 组件集成。 如果您的 tsconfig.json 确实正确声明了您的库，这必须始终有效：

"paths": {
      "@me/lib-dfb": [
        "dist/lib-dfb/lib-dfb",
        "dist/lib-dfb"
      ],
}

仅当此方法有效时，才以打包/发布模式进行测试。