标签: angular13

我刚刚通过运行升级了我的 Angular ionic 应用程序，以使用 Angular 12 中的 Angular v13 ng update。更新成功，但现在我无法运行该应用程序，并出现以下错误

[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIc
on' and 'HTMLStencilElement'.
[ng]   Named property 'ariaHidden' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng]
[ng] 66     interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng]                  ~~~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIc
on' and 'HTMLStencilElement'.
[ng]   Named property 'ariaLabel' of types 'IonIcon' and 'HTMLStencilElement' are not …

我已将 Angular 应用程序从 12 版本升级到 13 版本。我在单元测试运行期间开始收到此错误。

Chrome Headless 94.0.4606.61 (Windows 10) AppComponent should create the app FAILED
        TypeError: Cannot read properties of undefined (reading 'match')
            at extractCommentsWithHash (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:9130:18)
            at ShadowCss.shimCssText (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:8694:34)
            at map (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:22402:26)
            at Array.map (<anonymous>)
            at compileStyles (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:22401:19)
            at compileComponentFromMetadata (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:21948:13)
            at CompilerFacadeImpl.compileComponentFromMeta (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:22570:21)
            at CompilerFacadeImpl.compileComponent (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:22560:21)
            at Function.get (http:###/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:24583:47)
            at getComponentDef (http:###/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:1119:16)
        Failed: Cannot read properties of undefined (reading 'match')

我尝试了这个解决方案，但没有成功。

manually remove package-lock.json
manually remove folder node_modules
npm install

您有任何解决办法吗？与 Angular 版本升级有关吗？

我正在 Angular 13 中创建应用程序。我想调用from 、 usingshow()的方法，但出现错误。旧的问题和答案在这种情况下不起作用。ChildComponentParentComponent@ViewChild

家长：

<app-child #child></app-child>

@ViewChild('child') child: ChildComponent;

showChild() {
   this.child.show();
}

孩子：

show(){
  console.log('show');
}

错误：

属性“child”没有初始值设定项，并且未在构造函数中明确分配。

解决方案一：

家长：

@ViewChild('child') child!: ChildComponent;

错误：

类型错误：无法读取未定义的属性（读取“显示”）

解决方案2：

家长：

@ViewChild('child') child: ChildComponent = new ChildComponent;

没有错误 工作正常，但我怀疑这是否正确？

我是角度新手。我面临重定向到外部路由的问题。我想从我的 Angular 应用程序重定向到其他 MVC 应用程序。喜欢：www.abc.com/angularapp到www.abc.com/mvcapp

请帮助如何重定向到此类路线

我们决定将 ionic 应用程序升级到 Angular v13.2.3 和 @ionic/Angular v6.0.8。升级后，该应用程序在浏览器和 Android 上运行没有任何问题。当我们在 ios 上测试它时，应用程序正在启动，但没有显示任何内容，我们收到此错误：

我怎么解决这个问题？

在升级到角度 13 时，我在管道上的构建步骤失败。我的初始版本是 11，升级到 12 后构建工作正常，但从 12 升级到 13 时，它开始在管道上出现此错误。构建在本地运行良好，但在管道上失败。

我还添加了 package.json 文件代码和依赖项，还添加了显示错误的图像。

[![{
  "name": "app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:prod": "ng serve -c production",
    "start:local": "ng serve -c local",
    "start:test": "ng serve -c local,test",
    "start:ci": "serve -s --no-clipboard --listen ${PORT:-4200} ",
    "build": "ng build",
    "updateVersion": "node ./updateVersion.js",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage --ci",
    "lint": "eslint src --ext .js,.ts,.html",
    "lint:fix": "npm run lint -- --fix",
    "e2e": "ng e2e",
    "e2e:prod": "ng e2e --headless …

我使用命令运行我的服务器应用程序：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; …

我正在将 Angular 13 与 NgRx/数据和实体 (v 13) 结合使用。我已经定义了以下数据服务，我希望在其中覆盖用于检索实体的 URL ...

export class MyObjectService extends DefaultDataService<MyObject> {
    ...  
    getAll(): Observable<FinanceCustomer[]> {
        return this.http.get('http://localhost:8085/myapi/myobjects').pipe(
          map((response: any) => {
            ...
            return data;
          })
        );
      }

这一切都运行良好，但我很好奇是否可以稍微清理一下。如果我重写另一个方法，我不希望对基本 URL“http://localhost:8081/myapi/”进行两次硬编码（一次在getAll()另一个方法中）。NgRx/data 是否允许我为服务定义自定义基本 URL，然后我可以在我要重写的后续服务调用中引用该 URL？

我正在从 Angular 12更新到 13。

看到这个错误，目前还没有找到解决办法。有人能指出我正确的方向吗？

我的package.json

{\n  "name": "test-app",\n  "version": "0.0.0",\n  "scripts": {\n    "ng": "ng",\n    "start": "ng serve",\n    "build": "ng build",\n    "test": "ng test",\n    "testci": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",\n    "testci2": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",\n    "lint": "ng lint",\n    "e2e": "ng e2e"\n  },\n  "private": true,\n  "dependencies": {\n    "@amcharts/amcharts4": "^4.3.13",\n    "@angular/animations": "^12.2.17",\n    "@angular/cdk": "^12.2.13",\n    "@angular/common": "^12.2.17",\n    "@angular/compiler": "^12.2.17",\n    "@angular/core": "^12.2.17",\n    "@angular/forms": "^12.2.17",\n    "@angular/material": "^12.2.13",\n    "@angular/material-moment-adapter": "^12.2.13",\n    "@angular/platform-browser": "^12.2.17",\n    "@angular/platform-browser-dynamic": "^12.2.17",\n    "@angular/router": "^12.2.17",\n    "@mat-datetimepicker/core": …

我收到这个错误

Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". > 

Run Code Online (Sandbox Code Playgroud)

无法绑定到“ngForOf”，因为它不是“a”的已知属性

我已经导入了所有必需的模块： CommonModule、BrowserModule、ReactiveFormsModule

应用程序模块.ts：

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RecipesComponent } from './components/recipes/recipes.component';
import { RecipeListComponent } from './components/recipes/recipe-list/recipe-list.component';
import { FormsModule, ReactiveFormsModule …