小编ngf*_*ixl的帖子

目前，我正在尝试使用新的NgRX 创建器功能构建Angular + NgRX 8应用程序。但是，当我将其构建用于生产时，会出现以下错误：

装饰器不支持函数调用，但在“ reducers”中调用了“ createReducer”。

在开发模式下，完全没有问题。

请求减少器看起来像

export interface State extends EntityState<Request> {
  loading: boolean;
  error: any;
}
export const initialState = adapter.getInitialState({
  loading: false,
  error: null
});

export const reducer = createReducer(
  initialState,
  on(RequestsActions.loadRequestsSuccess, (state, { requests }) => adapter.addAll(requests, {...state, loading: false})),
  on(RequestsActions.loadRequestsFailed, (state, { error }) => ({...state, error, loading: false})),
  on(RequestsActions.deleteRequestSuccess, (state, { id }) => adapter.removeOne(id, state))
);

并与其他reducer一起包含在index.ts文件中

export const reducers = {
  requests: reducer
  // …

昨天我遇到了一个似乎mat-drawer与 Angulars相关的 CSS 问题router-outlet。我有一个带两个孩子的整页 flexbox。mat-toolbar顶部的A和app-sidenav底部的自定义组件。这工作正常并且 app-sidenav 填充页面的其余部分，因为 flexbox 是有弹性的。在继续之前看看这个简化的设置：

<div class="flex">
  <mat-toolbar></mat-toolbar>
  <app-sidenav></app-sidenav>
</div>

相关的css是

.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; }
mat-toolbar { flex: 0 0 auto; }
app-sidenav { flex: 1 1 0; }

在app-sidenav组件中，我现在有以下模板

<mat-drawer-container>
  <mat-drawer></mat-drawer>
  <mat-drawer-content>
    <main><router-outlet></router-outlet></main>
  </mat-drawer-content>
</mat-drawer-container>

相关的样式是

mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }

这工作正常并且高度是合适的，除非没有大于app-sidenav高度的内容。滚动条出现在外部 flexbox 组件而不是 …

在使用NgRX 8时，我和我的同事在实现效果时经常会遇到奇怪的错误消息。

类型'Observable <未知>'不可分配给类型'Observable <动作> | （（... args：any []）=> Observable <Action>）'

它与类型问题有关。消息如此具体，真是令人讨厌，它标志着完整的效果。这经常出现，而且确实很难解决。

我们想知道是否可以做些事情以便快速发现问题，或者我们是否能够以某种方式破坏消息的结构。我不是在这里寻找特定的解决方案，而是在寻找一种“如何快速确定问题出在哪里”的方法。

谢谢和欢呼！

可能性的集合

这是我们到目前为止所做的，也是来自评论和答案的想法。

• 在大多数情况下，动作可能不是问题
• switchMap参数的错误解构可能是错误的
• RxJS运算符之一未导入
• 服务中的参数和返回值错误可能是原因
• 服务和操作类型不一致也可能是原因
• 如果没有帮助，并且您确定没有问题，请执行以下操作：重新加载TypeScript

我们仍然希望有一个技巧来分解错误消息。

导入共享库 (.so) 似乎不是一件容易的事。我试图按照这篇文章中的说明进行操作，但我真的无法让它工作。没有库RF24 的构建正在运行。按照他们的构建说明在/usr/local/lib文件夹中生成以下文件集

librf24-bcm.so        librf24.so        librf24.so.1     librf24.so.1.3  
librf24.so.1.3.1      node_modules      python2.7        python3.5

在我的 .cpp 文件中，我包含这样的库

librf24-bcm.so        librf24.so        librf24.so.1     librf24.so.1.3  
librf24.so.1.3.1      node_modules      python2.7        python3.5

我的binding.gyp看起来像这样

#include <RF24.h> // also tested "" instead of <>

编译错误是

myfile.cpp:2:18: fatal error: RF24.h: No such file or directory

我还尝试使用库部分中的文件完整名称，例如librf24.so.1.3.1，不带-l标志。还将 library_dirs条目切换为include_dirs。还是一样的错误。

根据 NestJS 文档，我已经实现了 websockets 网关并将其提供在AppModule. 服务器正常启动，我可以通过 http 成功提供静态资源。但我根本无法让 websockets 运行，ws 服务器不可用，ws://localhost:3333并且该afterInit函数根本没有执行。即使在我定义@SubscribeMessage.

网关实现为

@WebSocketGateway()
export class SocketGateway implements OnGatewayInit {
  afterInit() {
    console.log('Gateway initialized');
  }
}

AppModule 正确提供网关

@Module({
  providers: [SocketGateway]
})
export class AppModule {}

这是引导程序的实现

export async function bootstrap() {
  let app = await NestFactory.create(AppModule);

  await app.listen(process.env.port || 3333, () => {
    console.log(`Listening at http://localhost:${port}`);
  });
}

bootstrap();

我的依赖是

"socket.io-client": "^2.2.0",
"@nestjs/common": "5.5.0",
"@nestjs/core": "5.5.0",
"@nestjs/platform-socket.io": "^6.1.0",
"@nestjs/websockets": "^6.1.0"

也许你直接看到了问题。感谢您的帮助，干杯！

有没有办法使用 TypeScript 用 Jest 测试未导出的函数？我已经看到 SO 答案推荐了一些库，rewire但似乎它们还不是真正兼容 TypeScript。另一种方法是导出这些私有函数，但我认为必须有一个解决方案，而不只是为了测试目的而导出。

设置如下。有两种功能，一种是导出，一种不是。

export function publicFunction() {
  privateFunction();
}

function privateFunction() {
  // Whatever it does
}

在我的单元测试中，我希望解决两种情况。测试privateFunction自身并模拟它进行publicFunction测试。

我在测试时使用ts-jest来编译打字稿文件。该jest.config.json模样

{
  "transform": {
    "^.+\\.(t|j)sx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(tsx?)$",
  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
  "testEnvironment": "node",
  "globals": {
    "ts-jest": {
      "tsConfig": "test/tsconfig.spec.json"
    }
  }
}

我熟悉jest.fn()但我不知道如何覆盖或提取私有函数。并且单元测试将类似于

import { publicFunction } from '../src';

describe('publicFunction', () => {
  it('should call "privateFunction" once', …

我正在尝试构建一个受本文启发的上传表单：

https://malcoded.com/posts/angular-file-upload-component-with-express/

我使用的是 angular 9 和 ngx-bootstrap，我没有使用对话框或有角的材料。所以，我征收了这样的上传服务：

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import {
  HttpClient,
  HttpRequest,
  HttpEventType,
  HttpResponse,
} from '@angular/common/http';

import { environment } from '@environments/environment';

@Injectable({
  providedIn: 'root',
})
export class UploadService {
  private url: string = `${environment.apiUrl}/halls/file`;

  constructor(private http: HttpClient) {}

  public upload(
    files: Set<File>
  ): { [key: string]: { progress: Observable<number> } } {
    // this will be the our resulting map
    const status: { [key: string]: { …

根据typescript装饰器文档,替换构造函数的装饰器示例不会将任何参数传递给装饰器函数.我怎么能做到这一点？

这就是文档所说的

function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {
  return class extends constructor {
    newProperty = "new property";
    hello = "override";
  }
}

@classDecorator
class Greeter {
  property = "property";
  hello: string;
  constructor(m: string) {
    this.hello = m;
  }
}

但我现在想传递像使用装饰器这样的参数,如下所示

@classDecorator({
  // some object properties fitting DecoratorData type
})

我只是尝试添加第二个数据参数

function classDecorator<T extends {new(...args:any[]): {}}>(constructor: T, data: DecoratorData)

但是这只需要 tslint 2参数,得到1.插入null占位符也不起作用.我也尝试使用constructor参数作为第二个可选参数.这导致签名失配错误.

我有ProfileModule以下路由：

// profile-routing.module

const routes: Routes = [
  {
    path: ':id',
    component: ProfilePageComponent,
    children: [
      {
        path: '',
        redirectTo: 'feed',
        pathMatch: 'full'
      },
      {
        path: 'feed',
        component: NewsFeedComponent
      },
      {
        path: 'gallery',
        component: MediasGalleryComponent
      }
    ]
  }
];

它的工作原理如下：

1. ProfilePageComponent 获取路由参数中的配置文件 ID 并将其发送到 ProfilePageService
2. NewsFeedComponent并MediasGalleryComponent从ProfilePageService

现在，这两个页面已移入两个单独的模块（分别为NewsModule和MediasModule），我希望在此路由中延迟加载。我不能再使用 ProfilePageService。我想出了这个解决方案：

// profile-routing.module

const routes: Routes = [
  {
    path: ':id',
    component: ProfilePageComponent,
    children: [
      {
        path: '',
        redirectTo: 'news/:id/feed', …

在我当前的项目中，我试图摆脱路由时跳过的 Angular 动画。在我的模板中，我在 css 网格布局中有不同的带有mat-card 的“小部件” ，我想让它们平滑地出现和消失。

我的子组件中的动画（路线指向的）看起来像

animations: [
  trigger('cardAnimation', [
    state('void', style({ opacity: 0, transform: 'scale(0.5)' })),
    state('*', style({ opacity: 1, transform: 'scale(1)' })),
    transition('void => *', animate('500ms ease-in')),
    transition('* => void', animate('500ms ease-in'))
  ])
]

简化后的模板如下所示

<mat-card @cardAnimation>
</mat-card>

<mat-card @cardAnimation>
</mat-card>

卡片会显示动画，但路线会直接更改为下一条路线，而无需等待动画。我还测试了animateChild()在query过渡内部使用，但这没有帮助。如何让路由器等待它们？

谢谢并欢呼！

我的角度版本是 7。我正在创建一个表单，其中有一个下拉选择来选择一个选项。我的列表适用于选择，但是当我加载页面时，它没有显示预定义的值。该页面处于编辑用户数据的形式。下面是我的html代码，

<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Server Name</mat-header-cell>
    <mat-cell *matCellDef="let row; let index = index" [formGroupName]="index">
        <mat-form-field>
            <!-- <input class="jminput" matInput formControlName="name" autocomplete="off"> -->
            <mat-select matSelect [formControl]="name">
                <mat-option *ngFor="let item of arr" value="item">{{item}}</mat-option>
            </mat-select>
            <mat-error *ngIf="name.touched && !name.required">
                Server Name is required
            </mat-error>
        </mat-form-field>
    </mat-cell>
</ng-container>

当我代替<input>时<mat-select>，它会工作并显示作为初始值的值。所以我认为formControlName="name"工作正常。但它不适用于<mat-select>.

请建议。