标签: angular14

刚刚升级到 Angular 14，出现错误：

Types of property 'pathMatch' are incompatible.
        Type 'string' is not assignable to type '"full" | "prefix"'.

呼叫来自：

import { Routes as routes } from './routes';
@NgModule({
  imports: [
    RouterModule.forChild(routes)
    ]...})

路线是

export const Routes = [
  {
    path: '',
    redirectTo: '/signup',
    pathMatch: 'full'
  }]

整个事情在 Angular 10 上运行得非常完美。有什么想法吗？

我正在尝试学习 Angular 14 中的变化，特别inject()是我能够将模块注入到函数中的功能，并且我不需要为此创建特殊服务..但我认为我弄错了。

我正在尝试创建一些静态函数来使用 package 发送小吃消息ngx-toastr，但这个包与我的问题无关。我如何正确实现显示小吃消息的功能，同时向它们注入它们需要操作的所需模块。

这是我的messages.ts文件：

import {inject} from '@angular/core';
import {ToastrService} from 'ngx-toastr';


export const snackMsgSuccess = (msg: string, title?: string) => {
  const toaster = inject(ToastrService);
  toaster.success(msg, title, {
    easeTime: 1000
  });
};


export const snackMsgInfo = (msg: string, title?: string) => {
  const toaster = inject(ToastrService);
  toaster.info(msg, title, {
    easeTime: 1000
  });
};

export const snackMsgWarn = (msg: string, title?: string) => {
  const toaster = inject(ToastrService);
  toaster.warning(msg, title, …

我正在尝试将我的 Angular 13 NX 工作区升级到 Angular 14，但不知何故我无法让我的笑话单元测试正常工作。我从零开始尝试了以下方法：

安装@angular/cli并nx全局：

npm install --global @angular/cli@latest\nnpm install --global nx@latest\n

在不带空格的路径中打开并cmd

npx create-nx-workspace\n> test\n> angular\n> demo\n> scss\n

结果：

\n

Nx 正在创建您的 v13.10.5 工作区

\n

所以现在我可以迁移到最新的 NX 工作区版本

cd test\nnx migrate latest\n

版本@angular/cli仍然是13，所以我在根中将其更改package.json为14.0.1（nx删除版本注释~并^...）

npm install不成功。在工作区中jest-preset-angular@11.1.2需要这是一个固定的依赖项：@angular-devkit/build-angular@">=0.1002.4"@angular-devkit/build-angular@"14.0.1"

npm ERR! Found: @angular-devkit/build-angular@13.3.7\nnpm ERR! node_modules/@angular-devkit/build-angular\nnpm ERR!   dev @angular-devkit/build-angular@"14.0.1" from the …

我正在使用 nvd3 图表（nvd3-1.8.5，d3-3.5.17），从角度 12 升级到角度 14 后面临以下问题。当它处于角度 12 时，我没有遇到任何问题。

Uncaught TypeError: Cannot read properties of undefined (reading 'document')
    at d3.js:8:26
    at 83064 (d3.js:1:2)
    at __webpack_require__ (bootstrap:19:1)
    at 54058 (index.ts:8:44)
    at __webpack_require__ (bootstrap:19:1)
    at 84096 (settings.saveview.html:41:141)
    at __webpack_require__ (bootstrap:19:1)
    at 70299 (UserServiceResolver.ts:18:33)
    at __webpack_require__ (bootstrap:19:1)
    at 64349 (viewlogmessage.html:65:57)

即使我尝试使用 nvd3 1.8.5 和 d3 4.0.0（使用 Angular 14）也会遇到以下问题。

core.mjs:6397 ERROR TypeError: nv.dispatch.render_start is not a function
    at Object.render (nv.d3.js:93:17)
    at nv.addGraph (nv.d3.js:145:12)
    at ViewActionsComponent.ts:169:17
    at Array.forEach (<anonymous>)
    at ViewActionsComponent.onGetMessageSuccessCallback (ViewActionsComponent.ts:140:11)
    at SafeSubscriber._next (ViewActionsComponent.ts:83:36) …

我正在尝试将 FULLCALENDAR 添加到我的 Angular v14 项目中。

但在所有设置之后我突然面临这个错误

知道如何处理这个错误吗？

包.json

"@fullcalendar/angular": "^5.11.0",
"@fullcalendar/daygrid": "^5.11.0",
"@fullcalendar/interaction": "^5.11.0",

应用程序模块.ts

...
import { FullCalendarModule } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

FullCalendarModule.registerPlugins([ // register FullCalendar plugins
dayGridPlugin,
interactionPlugin
]);

imports:[
      ...
      FullCalendarModule
     ]

抛出错误

Compiled with problems:X

ERROR in ./node_modules/@fullcalendar/common/main.css 4:0

Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are 
configured to process this file. See https://webpack.js.org/concepts#loaders
| …

我最近开始学习使用 Angular 14，但是我遇到了一个问题。我想使用在组件中创建的属性“total”，但收到错误“类型‘字符串’不可分配给类型‘数字’”。

app.component.html代码是：

<div>
  <app-header></app-header>
  <app-total mensaje="Total por pagar: " total="5000"></app-total>
  <app-items></app-items>
</div>

虽然组件具有“total”属性，total.component.ts 是：

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-total',
  templateUrl: './total.component.html',
  styleUrls: ['./total.component.css']
})
export class TotalComponent implements OnInit {

  @Input() total:number = 0;
  @Input() mensaje:string = '';

  constructor() { }

  ngOnInit(): void {
  }
}

我正在使用 Angular 14 和模块联合。在我的远程应用程序中，我有这个文件结构

- package.json
- webpack.config.js
+ src
    - settings.json
    + app
        + services
            - app.service.ts

在我的 app.service.ts 文件中，我访问一个静态 JSON 文件，如下所示

@Injectable({
  providedIn: 'root'
})
export class AppService {
    ...
     public init() {
        const request = new XMLHttpRequest();
        request.open('GET', this.configUrl, false);
        request.send(null);
        ...
    }

在我的 webpack.config.js 文件中，我尝试像这样公开我的模块和文件

module.exports = withModuleFederationPlugin({

  name: 'productlist',

  exposes: {
    './Component': './src/app/app.component.ts',
    './dashboard':'./src/app/my-product-list/my-product-list.module.ts'
  },

  shared: {
    '.settings.json': {
      singleton: true,
      eager: true,
      import: './src/settings.json',
      requiredVersion: 'auto',
    },
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' …

我有以下 Angular AuthGuard：

@Injectable({\n    providedIn: \'root\',\n})\nexport class AuthGuard implements CanActivate, CanLoad {\n    constructor(private authService: AuthService, private router: Router) {}\n\n    canActivate(\n        next: ActivatedRouteSnapshot,\n        state: RouterStateSnapshot,\n    ): | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {\n        return this.isAuthenticated();\n    }\n\n    canLoad(\n        route: Route,\n        segments: UrlSegment[],\n    ): | boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {\n        return this.isAuthenticated();\n    }\n\n    isAuthenticated(): | boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {\n        return this.authService.isAuthenticated$.pipe(\n …

我已使用 Angular 12 应用程序将 Angular 12 应用程序更新为 Angular 14 ng update。构建成功，可以看到我的应用程序运行得很好，但我的测试失败了。我遇到的错误之一是：

TestBedStatic 类型上不存在属性“configureTestingModule”

有人知道这个问题有什么解决方法吗？我需要更新我的测试库吗？

@angular/core: ^14.2.0
jasmine-core: ~3.8.0
jasmine-marbles: ^0.8.3
karma: ~6.3.0
protractor: ^7.0.0

样品测试：

beforeEach( () => {
    TestBed.configureTestingModule({
        providers: []
    });
})

我想将新的独立组件注入CrashReportsComponent到我的项目中。但是，当我尝试从模块路由连接组件时，出现错误，该组件类型与 NgModule 不同 NgModule 'CrashReportsComponent' is not a subtype of 'NgModuleType'。

按照开发人员的计划，我可以连接一个独立的组件而不是模块，并且这应该可以在模块中不进行任何更改的情况下工作。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonLayoutComponent } from './common-layout.component';
import { FilterKind } from '../core/services/filter.service';

const routes: Routes = [
    {
        path: '',
        component: CommonLayoutComponent,
        children: [
            {
                path: 'crash-reports',
                loadChildren: () =>
                    import('../pages/crash-reports/crash-reports.component').then((m) => m.CrashReportsComponent),
            },
        ],
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
})
export class CommonLayoutRoutingModule {}

import { Component } from …