标签: angular13

运行时ng deploy我收到以下错误：

An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID
See "C:\Users\theoh\AppData\Local\Temp\ng-Nv0wMh\angular-errors.log" for further details.

错误的完整日志如下：

[error] Error: NOT SUPPORTED: keyword "id", use "$id" for schema ID
    at Object.code (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\vocabularies\core\id.js:6:15)
    at keywordCode (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:454:13)
    at D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:222:17
    at CodeGen.code (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\codegen\index.js:439:13)
    at CodeGen.block (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\codegen\index.js:568:18)
    at iterateKeywords (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:219:9)
    at groupKeywords (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:208:13)
    at D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:192:13
    at CodeGen.code (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\codegen\index.js:439:13)
    at CodeGen.block (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\codegen\index.js:568:18)

我ng add @angular-eslint/schematics@next按照这里的建议进行了尝试，但没有成功。我使用的版本如下：

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.3
@angular-devkit/build-angular   13.0.3
@angular-devkit/core            13.0.3
@angular-devkit/schematics      13.0.3 …

将我的 Angular 10 升级到 Angular 13 后，使用命令后出现此错误ng serve。

\xe2\xa0\xa7 Generating browser application bundles (phase: building)...events.js:377\n      throw er; // Unhandled 'error' event\n      ^\n\nError [ERR_WORKER_OUT_OF_MEMORY]: Worker terminated due to reaching memory limit: JS heap out of memory\n    at new NodeError (internal/errors.js:322:7)\n    at Worker.[kOnExit] (internal/worker.js:276:26)\n    at Worker.<computed>.onexit (internal/worker.js:203:20)\nEmitted 'error' event on Worker instance at:\n    at Worker.[kOnExit] (internal/worker.js:276:12)\n    at Worker.<computed>.onexit (internal/worker.js:203:20) {\n  code: 'ERR_WORKER_OUT_OF_MEMORY'\n}\n

已经尝试增加 Node 的内存限制并安装最新版本的 Node。

我的节点版本是 v14.18.1，我的 npm 版本是 6.14.15。\nAngular 12 或 11 不会出现此问题。

我已将我的项目从 Angular 12 更新为 Angular 13，但遇到此错误：

Error: node_modules/@types/ws/index.d.ts:328:18 - error TS2315: Type 'Server' is not generic.

328         server?: HTTPServer<V> | HTTPSServer<V> | undefined;
                     ~~~~~~~~~~~~~


Error: node_modules/@types/ws/index.d.ts:328:34 - error TS2315: Type 'Server' is not generic.

328         server?: HTTPServer<V> | HTTPSServer<V> | undefined;
                                     ~~~~~~~~~~~~~~

我尝试安装npm i @types/ws但没有成功。

我为我的项目定制了主题托盘，它可以与^12.2.13Angular 材质版本配合使用，但不能与^13.2.3. 以下是我的自定义主题 SCSS：

客户垫主题.scss

@import '~@angular/material/theming';\n@include mat-core();\n\n$cust-blue: (primary: #002a5c, contrast: (primary: #ffffff));\n$cust-gold: (accent: #989100, contrast: (accent: #ffffff));\n$primary: mat-palette($cust-blue, primary);\n$accent: mat-palette($cust-gold, accent);\n\n$theme: mat-light-theme($primary, $accent);\n\n@include angular-material-theme($theme);\n

角度.json

"styles": [\n  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",\n  "./node_modules/ngx-toastr/toastr.css",\n  "src/styles.css",\n  "src/assets/css/custom-mat-theme.scss"\n]\n

错误

\n

./src/assets/css/custom-mat-theme.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6]。规则[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0]。 use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/ cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/assets/css/custom-mat-theme.scss

\n

\n
• 错误：模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）：SassError：'色调“100”在调色板中不存在。可用色调有：原色、对比度' \xe2\x95\xb7 55 \xe2\x94\x82\nlighter: _get-color-from-palette($base-palette, $lighter), \xe2\x94\x82 \n
  ^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\xe2\ x95\xb5
  \nnode_modules@angular\\material\\core\\theming_theming.scss 55:14
  \ndefine-palette()
  \nnode_modules@angular\\material\\core\\theming_theming-deprecated.scss\n16:11 调色板( ) src\\assets\\css\\custom-mat-theme.scss 6:11
  \n根样式表
\n

\n

谁能告诉我这有什么问题吗？

所以。我使用 ASP.NET Core 模型和 Angular使用 Visual Studio Pro 2019 (v16.11.9) 创建了一个全新的项目。我将身份验证选项设置为“个人用户帐户”。
我得到了一个使用Angular 8、ASP.NET Core 3.1（没有深入研究为什么这些版本，只是接受了事实）、Entity Framework和Identity 的工作脚手架项目，这正是我想要的，除了框架版本。我想使用最新的Angular 13和ASP.NET Core 6.0。

所以我开始逐个版本升级我的 Angular 版本，检查每一步应用程序是否仍然有效。到了 Angular 13，没有发现问题，身份验证工作正常。
然后，我按照非常复杂（此处具有讽刺意味）的 Microsoft 教程来更新您的 .NET Core 版本：从 ASP.NET Core 3.1 迁移到 6.0并更新.csproj。和繁荣，当我尝试访问应用程序受身份验证保护的部分时，我收到以下错误：

InvalidOperationException: The default Identity UI layout requires a partial view '_LoginPartial' usually located at '/Pages/_LoginPartial' or at '/Views/Shared/_LoginPartial' to work. Based on …

我从角度 12 移动到角度 13，并且出现了新错误。所以基本上我曾经通过导入区域设置文件来加载用户的文化。

 const localeUri = `@angular/common/locales/${localeId}.js`;
return import(localeUri).then((module) => {
    logger.debug("Culture Angular : '" + localeId + "'");
    registerLocaleData(module.default);
}).catch((err) => {
    logger.fatal("culture not defined for angular", err);
});

该解决方案过去适用于 Angular12，但不再适用于 Angular13。Webpack 找不到任何语言环境。我尝试了 github 上找到的一些解决方案，但没有任何积极的结果
https://github.com/highlightjs/highlight.js/issues/3223#issuecomment-953337602

https://github.com/angular/angular-cli/issues/22154

有什么解决办法吗？

升级到 Angular 13 后，我的 Jest 单元测试失败，我不明白为什么以及如何修复它们。我\xc2\xb4已经搜索了一段时间，我找到了一些类似案例的信息。此类失败的原因似乎是 Angular 13 中的更改，这使得 Jest 有点不兼容，即使 I\xc2\xb4m 使用最新版本的 Jest (27.5)。

这是我的 package.json：

 {\n  "name": "app-angular",\n  "version": "6.67.1",\n  "scripts": {\n    "ng": "ng",\n    "start": "ng serve",\n    "build": "ng build",\n    "serve-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve",\n    "serve-open-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve --open",\n    "dev-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build -c dev",\n    "dev-test-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build -c dev-test",\n    "staging-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build -c staging",\n    "release-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build -c release",\n    "prod-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build -c production",\n …

我收到此错误：

C:\Users\myname\Projects\ConfigEditor\MesConfiguration.WebClient\node_modules\tslib\tslib.es6.js:24
    export function __extends(d, b) {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

我的 jest-esm.config.mjs 看起来像这样

const jestConfig = {
  preset: 'jest-preset-angular/presets/defaults-esm',
  extensionsToTreatAsEsm: ['.ts'],
  globals: {
    'ts-jest': {
      useESM: true,
      stringifyContentPathRegex: '\\.(html|svg)$',
      tsconfig: '<rootDir>/tsconfig-esm.spec.json',
    },
  },
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
  resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
  transform: {
    '^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
  },
  globalSetup: 'jest-preset-angular/global-setup',
  moduleNameMapper: {
    //tslib: 'tslib/tslib.mjs',
    tslib: 'tslib/tslib.es6.js',
    "@shared/(.*)": "<rootDir>/src/app/shared/$1",
    "@editors/(.*)": "<rootDir>/src/app/editors/$1",
    "@dashboard/(.*)": "<rootDir>/src/app/dashboard/$1",
    "@env": "<rootDir>/src/environments/environment",
  },
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
}

export default jestConfig;

package.json 有

"type": "module",

我开始测试 …

我正在尝试按照本教程使用 Angular 前端设置 ASP.NET Core 应用程序。我已经能够成功创建项目，并且还能够完美地运行和调试它们。问题是，由于某种原因，我无法将后端调用代理到 ​​ASP.NET Core 后端来工作。当我尝试从 Angular 应用程序调用控制器内的操作时，出现 404 错误。

这是我的 proxy.conf.js 文件：

const PROXY_CONFIG = [
  {
    context: [
      "/api/*",
    ],
    target: "https://localhost:7139",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

这是我TestController为了测试目的而创建的：

[Authorize]
[ApiController]
[Route("api/[controller]")]
public class TestController : ControllerBase
{
    private readonly ILogger<TestController> _logger;

    public TestController(ILogger<TestController> logger)
    {
        _logger = logger;
    }

    [HttpGet("{id}")]
    public string Get(int id)
    {
        return "Test response";
    }
}

以下是我尝试从 Angular 应用程序中调用它的方法：

this.http.get<string>(`api/test/1`).subscribe((value) => {
  alert(value);
},
(error) => …

我刚刚按照本教程中所述使用 Angular 创建了 ASP.NET Core 应用程序。\n创建 ASP.NET Core 项目时，我选中了启用 Windows 身份验证的选项。只要我添加[AllowAnonymous]到 ASP.NET Core 项目中的控制器，一切就都工作得很好，但一旦我将其替换为[Authorize]，来自 Angular 应用程序的请求就不再到达后端的代码。相反，网络服务器会返回400 Bad Request错误。以下是一个包​​含发生此问题的响应标头的请求:\n

proxy.conf.json经过我自己的一些研究，我发现我可能需要在后端启用 CORS，因为我在开发过程中在 Angular 应用程序中使用代理。以下是 的内容proxy.conf.json：

{\n  "/api/*": {\n    "target": "https://localhost:7139",\n    "secure": false,\n    "changeOrigin": true\n  }\n}\n

因此，我尝试添加到我的ASP.NET Core 项目UseCors()中。Program.cs这是Program.cs当前的样子：

using Microsoft.AspNetCore.Authentication.Negotiate;\n\nvar builder = WebApplication.CreateBuilder(args);\n\n// Add services to the container.\n\nbuilder.Services.AddCors(setup =>\n{\n    setup.AddDefaultPolicy(builder =>\n    {\n        builder.WithOrigins("http://localhost:4200")\n          .AllowAnyHeader()\n          .AllowAnyMethod()\n          .AllowCredentials();\n    });\n});\n\nbuilder.Services.AddAuthentication(NegotiateDefaults.AuthenticationScheme)\n   .AddNegotiate();\n\nbuilder.Services.AddAuthorization(options =>\n{\n    // By …