动态创建/编译组件和模块时出错

编程问答 2022-08-15

问题描述

我将跟踪一些示例，并在运行时使用以下版本的Angular创建和编译组件

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.1
@angular-devkit/build-angular     0.901.9
@angular-devkit/build-optimizer   0.901.9
@angular-devkit/build-webpack     0.901.9
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@angular/cdk                      9.2.0
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.2.0
@ngtools/webpack                  9.1.9
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

我有一个创建模块和组件并进行编译的方法。我从角度cli收到了一条编译成功的消息

private createModule(template: string,imports = [],providers = []) {
    @Component({
        selector: 'app-table-cell-content',template,providers
    })
    class CustomComponent {};

    @NgModule({
        imports: imports ? imports : [],declarations: [ CustomComponent ]
    })
    class CustomModule {};

    return this._compiler.compileModuleAndAllComponentsSync(CustomModule);
}

当应用运行时，它实际上可以工作，并且我在组件中看到了我的自定义内容。但是，当代码实际运行时，在我的VSCode控制台（不是chrome控制台）中，我看到以下错误。即使该应用程序运行良好/正常运行，该错误也会阻止CI之类的东西正常工作，但是编译器实际上直到它在运行时编译时才捕获它

    ERROR in src/app/shared/table/table.component.ts:128:14 - error NG1010: template must be a string
    
    128                 template
                        ~~~~~~~~
    src/app/shared/table/table.component.ts:134:13 - error NG1010: Expected array when reading the NgModule.imports of CustomModule
    
    134                 imports
                        ~~~~~~~

编辑 我已将angular更新为以下内容，但得到的结果相同：

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.12
@angular-devkit/build-angular     0.901.12
@angular-devkit/build-optimizer   0.901.12
@angular-devkit/build-webpack     0.901.12
@angular-devkit/core              9.1.12
@angular-devkit/schematics        9.1.12
@angular/cdk                      9.2.0
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.2.0
@ngtools/webpack                  9.1.12
@schematics/angular               9.1.12
@schematics/update                0.901.12
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularcompilationcomponentscomponents