小编Luk*_*ggy的帖子

I\xc2\xb4m 尝试将我的 Angular 应用程序进行 dockerize 以用于 Cloud Run，然后根据环境变量使用生产或开发配置有条件地构建它。

云构建命令：

gcloud builds submit --tag gcr.io/project-id/image-id --timeout=1200

Dockerfile：

FROM node:14\n\nWORKDIR usr/src/app\n\nCOPY package*.json ./\n\nRUN npm install\n\n# Copy local code to the container\nCOPY . .\n\n# Build app\nRUN if [ "$ENV" = "development" ] ; then npm run build-dev:ssr ; else npm run build-prod:ssr ; fi\n\nCMD ["npm", "run", "serve:ssr"]\n

目前，$ENV\xc2\xb4t 不存在，但是有没有办法通过命令传递它gcloud build submit？

我有两个构建配置“生产”和“开发”。通过选择以下两个命令之一，我可以决定要构建应用程序的配置：

1. ng build --configuration=development
2. ng build --configuration=production

在angular.json我指定每个配置的构建选项：

        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
           .
           .
           .
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "index": {
                "input": "src/index.prod.html",
                "output": "index.html"
              },
              .
              .
              .
            },
            "development": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              .
              .
              .
            }
          }
        },

基本上我根据所选的构建配置更改environment.ts和。index.html

有没有办法在项目文件夹中拥有两个 robots.txt 文件，例如robots.dev.txt，并在构建期间robots.prod.txt有条件地将其中一个添加robots.txt到 dist 文件夹中？我几乎是如何使用索引文件来做到这一点的。目的是防止所有搜索引擎机器人对我的开发版本建立索引，但允许它们对生产版本建立索引。

I\xc2\xb4m 尝试将我的代码部署到两个不同的 Firebase 项目，一个用于开发，一个用于生产。

该my-app-dev项目已包含并正在运行，因此我添加了my-app（用于生产）firebase use --add并选择了my-app.

这就是我的 Firebase 配置现在的样子：

.firebaserc

{\n  "targets": {\n    "my-app-dev": {\n      "hosting": {\n        "app": [\n          "my-app-dev"\n        ]\n      }\n    }\n  },\n  "projects": {\n    "default": "my-app-dev",\n    "prod": "my-app"\n  }\n}\n

firebase.json

{\n  "hosting": [\n    {\n      "target": "app",\n      "public": "dist/app",\n      "ignore": [\n        "firebase.json",\n        "**/.*",\n        "**/node_modules/**"\n      ],\n      "rewrites": [\n        {\n          "source": "**",\n          "destination": "/index.html"\n        }\n      ]\n    }\n  ],\n  "functions": {\n    "predeploy": [\n      "npm --prefix \\"$RESOURCE_DIR\\" run …

介绍：

我有一个 Angular 应用程序，可以使用 ACE 编辑器 ( https://ace.c9.io/ ) 编写自定义 SQL 语句。尽管有模式和主题SQL，但我想根据我的要求创建自定义模式和自定义主题。

设置：

我遵循了本教程：https://blog.shhdharmen.me/how-to-setup-ace-editor-in-angular

• ng new ace-app（角度13.3.2）
• npm install ace-builds（ACE-构建 1.4.14）

component.ts

import * as ace from 'ace-builds';

...

public aceEditor: ace.Ace.Editor;

@ViewChild('editor') private editor!: ElementRef<HTMLElement>;

...

  ngAfterViewInit(): void {
    // I don't understand why we don't set the "basePath" to our installed package
    ace.config.set('basePath', 'https://unpkg.com/ace-builds@1.4.12/src-noconflict');

    this.aceEditor = ace.edit(this.editor.nativeElement);

    if (this.aceEditor) {
      this.aceEditor.setOptions({
        mode: 'ace/mode/sql',
        theme: 'ace/theme/sqlserver',
      });
    }

component.html

<div #editor></div>

结果：

编辑器正在工作，但现在我需要以某种方式添加自定义模式和主题。

问题和疑问： …

版本

• "@angular/common": "~9.0.0"
• "@angular/service-worker": "~9.0.0"

描述

我使用 Service-Worker 实现了ng add @angular/pwa --project [app]，Lighthouse 会将 Web 应用程序识别为 PWA。突然，在部署到 Firebase 托管“安装”通知后没有弹出，所以我检查了开发控制台。

清单仍然像往常一样出现：

但没有缓存任何内容：

运行 Lighthouse-Audit 时，出现以下错误：

start_url does not respond with a 200 when offline

ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

manifest.webmanifest

{ …

我目前在我的 angular 项目中有一个简单的页眉、主要、页脚结构，并希望将主要组件设为一个弹性盒，以便以相等的宽度水平排列所有给定的组件。另外，当屏幕宽度低于 700px 到列时，我想更改 flex-direction。由于我已经使用纯 HTML + CSS 实现了这一点（参见 jsfiddle：http : //jsfiddle.net/aJPw7/443/），我觉得这与 angular 父组件有关。

预期行为：这两个<app-content-section>元素各占 50% 的宽度<app-main-component>和 100% 的高度。当我将 flex-direction 更改为 column 时，它们应该具有 100% 的宽度和 50% 的高度：

Currrent行为：该<app-content-section>元素，当我使用对齐“证明内容”，但不被任何HIGHT或width属性的影响。

样式文件

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

应用程序根 HTML：

<app-main-component>
    <app-content-section></app-content-section>
    <app-content-section></app-content-section>
</app-main-component>

应用程序主组件 HTML：

<div class="main-component"> 
    <ng-content></ng-content>
</div>

应用主组件 CSS：

.main-component {
    display: flex;
    flex-direction: row;
    height: 100%;
}

@media screen and (max-width: 700px) …

介绍：

我有一个 Angular 应用程序，使用 NGXS 作为状态管理模式，使用 Angular Material 作为 UI 组件（例如用于通知的小吃栏）。该应用程序有几个不同的操作，我想在用户单击“保存”按钮时立即分派这些操作。之后我想通知用户所有操作是否已成功分派。

问题：

即使一项操作失败，我仍然会收到消息“更改已成功保存”，但该操作本身会记录发生的错误。有没有办法以不同的方式处理保存函数中的错误？

动作1 - 上传头像

  @Action(UploadAvatar)
  public uploadAvatar(ctx: StateContext<AuthStateModel>, action: UploadAvatar) {
    return this.uploadService.uploadAvatar(ctx.getState().token, action.avatar).pipe(
      tap((result: any) => {
        console.log(result);
      }),
      catchError((error: HttpErrorResponse) => {
        console.error(error);
        return of(ctx.patchState({ responseStatus: error.status }));
      })
    );
  }

操作 1 - 更新用户

  @Action(UpdateUser)
  public updateUser(ctx: StateContext<AuthStateModel>, action: UpdateUser) {
    return this.userService.updateUser(ctx.getState().token, action.user).pipe(
      tap((result: any) => {
        console.log(result);
      }),
      catchError((error: HttpErrorResponse) => {
        console.error(error);
        return of(ctx.patchState({ responseStatus: error.status }));
      })
    );
  }

保存功能

  public …