标签: angular14

我使用命令运行我的服务器应用程序：ng serve并在浏览器控制台中收到错误：

Firefox 无法连接到 wss://dev.domain.com/ws 服务器。

[webpack-dev-server] 正在尝试重新连接...

或者在镀铬物上：

与“wss://dev.domain.com/ws”的 WebSocket 连接失败

[webpack-dev-server] 已断开连接！

[webpack-dev-server] 正在尝试重新连接...

我的 nginx 配置是：

location ^~ / {
    proxy_pass         http://localhost:4200;
    proxy_set_header   X-Forwarded-For $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
   
    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
}

location ^~ /sockjs-node/ {

    proxy_pass http://localhost:4200;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;

    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
}

location ^~ /ws/ {

    proxy_pass http://localhost:4200;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;

    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade; …

表单：表单组；

  createMyForm() {
    this.form = new FormGroup<any>({
      firstName: new FormControl<any>('', [Validators.required]),
      lastName: new FormControl<any>('', { nonNullable: true }),
    });
  }

如何将 { nonNullable: true } 添加到firstName

我正在尝试将 {nonNullable: true } 添加到表单控件。

姓氏：新 FormControl('', { nonNullable: true }),

我可以将 {nonNullable: true } 添加到没有验证的控件，但对于有验证的表单控件，我无法添加 {nonNullable: true }。

名字：new FormControl('', [Validators.required]),

我有一个非常简单的用例，但我似乎找不到方法来做到这一点。我的应用程序有一个应用程序部分（角度）和一个 API 部分（nodejs）。从 UI 来看，虽然我将 api 称为/api/*，但 api 服务器本身没有/api前缀。因此，我需要重写对/apito的任何请求/。

在开发环境中，我的角度应用程序只有一个代理配置来进行重写：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "pathRewrite": {
      "^/api/": ""
    },
    "secure": false,
    "logLevel": "debug"
  }
}

因此，对于生产环境，我需要针对以下场景配置GCP负载均衡器：

虽然我能够配置简单的路由规则来将主机和路径映射到 ui-backend-service，但重写/api.

我能找到的任何 URL 重写示例都显示了经典负载平衡，它似乎不再适用。

我尝试修改Advanced host and path rules，但它告诉我我可以提供pathRules或routeRules，而不是两者都提供。我无法创建单独的规则，因为主机（*在我的例子中）不能多次使用。

我不想为此在我的 api 服务器上设置 nginx。还有其他方法吗？

假设我要上传 100 张图像，因此我的 Angular 前端必须进行 100 个 API 调用。然而，由于后端限制，我希望在任何给定时间点最多同时有 5 个 API 请求。每当队列中的一个 http 请求完成时，就应该添加并执行另一个请求。

我怎样才能实现这个目标？

我尝试以下方法

    new FormControl<boolean | undefined>({ value: true }, Validators.required),

overloads并得到 no for存在的错误boolean。使用

    new FormControl<string | null>({ value: null, disabled: false }));

有效 ==> 那么，Angular 14 中 Typed FormControls 的正确语法是什么boolean？

我正在使用 Angular 14。我有一个独立组件，我想在其中包含另一个模块的子组件。独立组件看起来像

<div>
    <child-component></child-component>
</div>

它的服务文件是

@Component({
  selector: 'my-parent-component',
  templateUrl: './parent.component.html',
  standalone: true,
  imports: [
    MyModule
  ]
})
export class ParentComponent {
  ...
}

子组件位于另一个模块中——MyModule。my.module.ts 文件看起来像

/* imports */

@NgModule({
  declarations: [
    ChildComponent
  ],
  imports: [
    ...
  ]
})
export class MyModule { 
  constructor(entityDefinitionService: EntityDefinitionService) {
    ...
  }
}

但我父母的 HTML 给了我错误

    <child-component></child-component>    

线 ...

'app-child-component' is not a known element:
1. If 'app-child-component' is an Angular component, then verify that it is included in the '@Component.imports' of this …