标签: angular-ivy

我将我的项目从 Angular 8 升级到 9，并重构了我的代码以利用延迟加载组件的能力。对于我的大多数组件来说，这都非常有效，但我有一个组件抛出错误，我需要帮助解决该问题。

这是我的组件代码，后面是错误。该模块与组件在同一文件中定义。

\n    import { Component, OnInit, OnDestroy, NgModule } from \'@angular/core\';\n    import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from \'@angular/forms\';\n    import { switchMap, debounceTime, tap, filter } from \'rxjs/operators\';\n    import { MatFormFieldModule, MatInputModule, MatAutocompleteModule, MatButtonModule, MatProgressSpinnerModule, MatIconModule, MatDialogModule } from \'@angular/material\';\n\n    import { SearchService } from \'./search.service\';\n    import { SuggestResult } from \'./suggest-result\';\n    import { CommonModule } from \'@angular/common\';\n    import { HttpClientModule } from \'@angular/common/http\';\n    import { SharedModule } from \'src/app/shared/shared.module\';\n\n    @Component({\n        selector: …

从 Angular 10 开始，我们在 Angular 库中设置了以下内容：

"angularCompilerOptions": {
  "enableIvy": false
}

我现在尝试在升级到 Angular 12 时使用 Ivy 编译器。从我读到的所有内容来看，由于 Ivy 是默认编译器，删除enableIvy或设置它true应该会导致构建使用 Ivy。然而，通过这些更改，我仍然看到：

Compiling with Angular in legacy View Engine compilation mode.

为了进行比较，我启动了一个新库，在那里我看到：

Compiling with Angular sources in Ivy full compilation mode.

我不明白还有什么不同导致 Angular 仍然使用 View Engine。我还应该寻找什么？

我在这里提出一个问题。
\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

官方文档说：

我应该如何解决以下错误消息：

无法编译 /.../SoftwareLicenseCodes/index.tsx (14,20)：“any”的类型声明失去类型安全性。考虑用更精确的类型替换它。此错误发生在构建期间，无法消除。

请看下面的代码：

import * as React from 'react';
import './SoftwareLicenseCodes.css';

interface SoftwareLicenseCodesProps {
}

interface SoftwareLicenseCodesState {
    count: string;
    oneTimeUsage: boolean;
    duration: string;
    validFrom: string;
    validTo: string;
    distributor: string;
    [key: string]: any;
}

class SoftwareLicenseCodes extends React.Component<SoftwareLicenseCodesProps, SoftwareLicenseCodesState> {
    constructor(props: SoftwareLicenseCodesProps) {
        super(props);

        this.state = {
            distributor: '',
            count:'',
            oneTimeUsage: false,
            duration: '',
            validFrom: '',
            validTo: ''
        };

        this.onInputChange = this.onInputChange.bind(this);
    }

    handleSubmit(event: React.FormEvent<HTMLFormElement>) {
        alert('submit');
        event.preventDefault();
    }

    onInputChange = (event: React.FormEvent<HTMLInputElement>) => {
        const value = …

我正在尝试将此库https://github.com/flauc/angular2-notifications从 Angular 2+迁移到 Angular 9。

最初的错误是关于ModuleWithProviders已经成为泛型类型的，所以我修复了它。我也在这里描述了一个错误https://github.com/angular/angular/issues/32352我修复了它require('@angular/compiler-cli');，现在我面临另一个错误：

../node_modules/@angular/common/common.d.ts:115:22 - 错误 NG6002：出现在 SimpleNotificationsModule 的 NgModule.imports 中，但无法解析为 NgModule 类

我很难理解发生了什么，因为我以前从未构建过库，并且使用 gulp 构建似乎有点 hacky，因为这一行ngc = require('@angular/compiler-cli/src/main').main引用了一个不属于公共 API 的函数。

编辑：

按照评论中的想法（以及我自己的感觉），我尝试在没有吞咽的情况下进行构建：

• 创建了一个angular.json文件
• 分离index.ts成public_api.ts和simple-notifications.module.ts
• 对文件和文件夹结构做了一些更改

但我仍然有同样的确切错误......

我的尝试：https : //github.com/youkouleley/angular2-notifications 我尝试用 构建它ng build，其中的脚本package.json尚未更新

我使用命令在新的 angular 9 项目上生成了一个库

ng g 库多选

现在我想添加 Angular Material 的 MatButton，所以我将“MatButtonModule”添加到库的主模块中。我还在库的 package.json 中添加了 "@angular/material": "^9.0.0" 作为依赖项，并将其列入了 ng-package.json 的白名单。当我尝试构建库（ng build multi-select）时，它说

Compiling TypeScript sources through ngc
ERROR: node_modules/@angular/material/button/button.d.ts:22:22 - error NG6002: Appears in the NgModule.imports of MultiSelectModule, but could not be resolved to an NgModule class

22 export declare class MatButton extends _MatButtonMixinBase implements OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
                        ~~~~~~~~~
node_modules/@angular/material/button/button.d.ts:22:22 - error NG6003: Appears in the NgModule.exports of MultiSelectModule, but could not be resolved to an NgModule, Component, …

假设我们定义了以下路由：

const routes: Routes = [
  {
    path: '',
    component: WelcomeComponent
  },  
  {
    path: 'start',
    component: StartComponent
  }

有没有办法告诉 Scully 跳过生成路由的静态页面start？

我创建了一个 Angular-Library，它在我的 App-Workspace 之外。结果是我有两个不同的工作区。

我的第一种方法是构建我的库并将/dist文件夹与我的应用程序链接起来。这在 ng serve 上效果不佳，但无论如何我在渲染我的 Library-Component-Templates 时遇到了问题。

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'bindingStartIndex' of null
TypeError: Cannot read property 'bindingStartIndex' of null
[...]

在做我的第一次研究时，我发现了这个 github 问题帖子

基本上给定的解决方案是在我的 tsconfig.json 中添加我的库public-api.ts中的路径，该路径可以导入到我的应用程序源中。像这样：

    "paths": {
    "@app/*": ["src/app/*"],
      "@core": ["src/app/@core"],
    "@core/*": ["src/app/@core/*"],
    "@shared": ["src/app/@shared"],
    "@shared/*": ["src/app/@shared/*"],
      "@env/*": ["src/environments/*"],
      "@myLibrary/*": ["../myLibrary/projects/myLibrary/src/public-api"]
  }

不知何故，我在渲染模板时仍然遇到同样的问题。

因此，我的最后一种方法只是直接从我的 app.module.ts 导入我的 lib-Component

import { TestComponent } from '../../../../myLibrary/projects/myLibrary/src/lib/components/testComponent/test.component';
   @NgModule({
     imports: [
       FlexLayoutModule,
       CelNgZuiModule,
       CommonModule
   ],
   declarations: [FactoryModelComponent, TestComponent,]
   }) …