标签: angular12

您好，在我运行“ng update @angular/core@12 @angular/cli@12”从 11 升级到 12，然后运行“ngserve app”后，我不断收到以下错误：“来自 PostCSS 插件的未知错误。您当前的错误PostCSS 版本是 8.2.14，但 postcss-preset-env 使用 7.0.35。也许这就是下面错误的根源。”

我的问题是什么？package.json 中没有 PostCSS。我不知道这件事。提前致谢。

在我的角度项目中，我有一个函数

reloadPage(): void {
  window.location.reload();
}

因此，每当我需要重新加载页面时，我都会调用此函数。

现在我尝试添加此功能的单元测试，但它不起作用。

it("reloadPage: should be validated", () => {
    spyOn(window.location, 'reload').and.callFake(() => {
      //test
    });
    component.reloadPage();
});

它仍然在单元测试中重新加载页面

如何实现该功能的单元测试？任何帮助都将不胜感激。提前致谢

在我创建新的 Angular 12.0.3 项目后，npm audit立即检测到 8 个高漏洞和 40 个中度漏洞。

# npm audit report

css-what  <5.0.1
Severity: high
Denial of Service - https://npmjs.com/advisories/1754
fix available via `npm audit fix --force`
Will install @angular-devkit/build-angular@0.1102.14, which is a breaking change
node_modules/css-what
  css-select  <=3.1.2
  Depends on vulnerable versions of css-what
  node_modules/css-select
    svgo  >=1.0.0
    Depends on vulnerable versions of css-select
    node_modules/svgo
      postcss-svgo  >=4.0.0-nightly.2020.1.9
      Depends on vulnerable versions of svgo
      node_modules/postcss-svgo
        cssnano-preset-default  *
        Depends on vulnerable versions of postcss-svgo
        node_modules/cssnano-preset-default
          cssnano  >=4.0.0-nightly.2020.1.9
          Depends on …

我想将 ApplePay 和 GooglePay 集成到我们的 Angular 应用程序中。

对于GooglePay，google 提供了一个有用的npm 包。https://www.npmjs.com/package/@google-pay/button-angular

我试图为 ApplePay 寻找类似的优质套餐，但没有找到。

我想在 Angular 上实现 ApplePay。有两种方法可以实现它（JS API 和 Payment Request API），我想使用 API 方法，因为我想在服务器端进行尽可能多的处理。通过查看以下页面，很难理解 JS API 和 Payment Request API 之间的区别。 https://applepaydemo.apple.com/

令人惊讶的是，我找不到任何 Angular 使用 ApplePay 的示例代码。我不敢相信以前没有人在 Angular 上使用过 ApplePay。可能还有另一种/更好的方法吗？

在 Angular 中，获取窗口实例甚至很棘手。我已经尝试了这个问题中的解决方案，并设法使用服务提供商注入窗口实例。我可以在适当的设备上显示 ApplePay 按钮，但在调用 ApplePaySession 对象时出现以下错误。显然注入的窗口不是顶级窗口。

错误：尝试从安全源与其顶级框架不同的文档启动 Apple Pay 会话。

根据WebKit 代码，这是它返回错误但不确定如何解决它的时候。

 if (!ancestorDocument->securityOrigin().isSameSchemeHostPort(topOrigin))
      return Exception { InvalidAccessError, "Trying to start an Apple Pay session from a document with an different security origin than its top-level …

我正在开发一个 POC，但我面临着挑战。请帮我解决它。

情况

1. 我有需要在选择下拉列表中显示的类别列表
2. 我有一个门户对象，其中包含选择下拉列表中的类别之一

挑战：我需要在填充选择下拉列表时选择与门户类别匹配的选项

类别选择下拉列表人口和 prtl-类别绑定是，

<!-- Portal Category -->
    <div class="row prtl_field_margin">
        <div class="col-4 prtl_form_field_right">
            <label for="pCategory" class="control-label prtl_form_label">Category</label>
        </div>
        <div class="col-4">
            <select class="form-control" id="pCategory" name="pCategory" [(ngModel)]="prtl.category">
                <option value="" disabled>Choose a Category</option>
                <option *ngFor="let c of categories" [ngValue]="c">{{ c.name }}</option>
            </select>
        </div>
        <div class="col-4"></div>
    </div>

组件 ts 文件中的 prtl 对象数据是，

{
  "name": "Stock Market",
  "id": 10,
  "category": {
    "id": "1",
    "name": "Cricket"
  }
}

组件ts文件中的类别数组数据是，

[
  {
    "id": "1",
    "name": "Cricket"
  },
  {
    "id": "2",
    "name": …

我正在迁移一个库以使用 Angular 和 Material 12（当前版本为 10），Storybook 用于公开该库的各个组件。为此，我使用 Angular 更新指南将 Angular 和 Material 升级到版本 12，将 Storybook 升级到版本 6.3，并按照此处npx sb upgrade描述的步骤完全迁移 Storybook 并使用 webpack5。

不幸的是，以前在故事渲染中全局包含的base.scss文件不再包含在内（故事现在没有任何CSS）。此 base.scss 文件包含在 Typescript 文件中，其中包含：

import \'!style-loader!css-loader!sass-loader!./base.scss\';

使用 Storybook 6.3 和 Angular 10，一切都很完美。

为了解决这个问题，我尝试在main.js中添加此配置，如文档中所述：

webpackFinal: async (config, { configType }) => {\n    config.module.rules.push({\n      test: /\\.scss$/,\n      use: [\'style-loader\', \'css-loader\', \'sass-loader\'],\n      include: path.resolve(__dirname, \'../\'),\n    });\n    return config;\n  }\n

但我的每个故事都遇到了这个错误：

SassError: SassError: expected "{".\n  \xe2\x95\xb7\n1 \xe2\x94\x82 import api …

我正在将 ngx-charts 与 Angular 12 一起使用，并且收到此错误消息，然后我使用以下命令：

colorScheme = {
  domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};

错误信息是：

Type '{ domain: string[]; }' is not assignable to type 'string | Color'.

我怎样才能解决这个问题？

我们在 Angular 12 中的项目中使用 jest 27 来运行我们的单元测试。在本地，这些测试运行正确，但在它们破坏的云代理管道中运行它们，出现以下错误：

抛出：“挂钩超时超过 5000 毫秒。如果这是长时间运行的测试，请使用 jest.setTimeout(newTimeout) 增加超时值。”

这是损坏的代码部分：

const createHost = createHostFactory({
component: Component,    
imports: [
  TranslateModule.forRoot(),
  GridModule,
  MaterialWrapperTestingModule,
  ReactiveFormsModule,
  TooltipModule,
  TableEditionToolbarModule,
],
providers: [
  { provide: ContactsService, useValue: contactsServiceSpy },
  { provide: CustomerService, useValue: customerServiceSpy },
  { provide: CustomerDetailFacade, useValue: customerFacadeSpy },
  { provide: HeaderMenuFacade, useValue: headerMenuFacadeSpy },
  { provide: ContextFacade, useValue: contextFacadeSpy },
  { provide: MatDialog, useValue: dialogMock },
],});

 beforeEach(() => {
  host = createHost('<component-selector></component-selector>', { detectChanges: true, 
  props: { structure } …

当我将 Angular 8 项目升级到 Angular 12 时，我正在研究 Angular 8 项目。由于我完全来自 React 环境，所以在开始之前我并没有想到会这么麻烦。我已经关注Angular 升级指南2 天了，但不断收到以下错误：

\xe2\xa0\x8b Generating browser application bundles (phase: setup)...TypeError: Cannot read properties of undefined (reading \'text\')\n    at NodeObject.getText (C:\\<project_name>\\node_modules\\typescript\\lib\\typescript.js:152697:31)\n    at getRequiredModulePath (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\host\\umd_host.js:519:99)\n    at Object.getImportsOfUmdModule (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\host\\umd_host.js:510:23)\n    at UmdDependencyHost.extractImports (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\dependencies\\umd_dependency_host.js:43:54)\n    at UmdDependencyHost.DependencyHostBase.recursivelyCollectDependencies (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\dependencies\\dependency_host.js:85:32)  \n    at UmdDependencyHost.DependencyHostBase.collectDependencies (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\dependencies\\dependency_host.js:38:22)\n    at DependencyResolver.getEntryPointWithDependencies (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\dependencies\\dependency_resolver.js:75:22)\n    at EntryPointCollector.walkDirectoryForPackages (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\entry_point_finder\\entry_point_collector.js:47:52)\n    at EntryPointCollector.walkDirectoryForPackages (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\entry_point_finder\\entry_point_collector.js:75:103)\n    at C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\entry_point_finder\\program_based_entry_point_finder.js:124:100\nC:\\<project_name>\\node_modules\\@ngtools\\webpack\\src\\ngcc_processor.js:139\n            throw new Error(errorMessage + `NGCC failed${errorMessage ? \', see above\' : \'\'}.`);\n            ^\n\nError: NGCC failed.\n    at NgccProcessor.process (C:\\<project_name>\\node_modules\\@ngtools\\webpack\\src\\ngcc_processor.js:139:19)\n    at …

我在这里提出一个问题。
\n我有一个ParentComponent它有一个 child ChildComponent，\nchildParentComponent里面有它，所以这里有一个循环。
\n这是我面临的错误：

\xe2\x9c\x96 Compiling with Angular sources in Ivy partial compilation mode.\nERROR: projects/api/src/lib/api.component.ts:3:1\nerror NG3003: One or more import cycles would need to be created to \ncompile this component, which is not supported by the current compiler\nconfiguration.\n\nThe component \'ParentComponent\' is used in the template but importing\nit would create a cycle:\n /lib/child/child.component.ts -> /lib/parent/parent.component.ts -> /lib/child/child.component.ts\n

此错误仅发生在 Angular 库中。正如您所看到的， stackblitz示例中没有问题，它只是一个演示。

"compilationMode": "full"这个错误会随着库文件中的设置而消失tsconfig.lib.prod.json，但在这种情况下，我们会失去向后兼容性！\n

官方文档说：