angular - compiler.js :2175 Uncaught Error: The template specified for component . ..Component... 不是字符串

Question

(我在 angular-cli 应用程序版本 8 上)

我正在尝试导入 feature module来自项目一个 进入项目乙 .

(在浏览器中运行项目 B 后的错误)

(compiler.js:2175)
Uncaught Error: The template specified for component CrudTableComponent is not a string
    at syntaxError (compiler.js:2175)
    at DirectiveNormalizer.normalizeTemplate (compiler.js:17649)
    at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:19820)
    at compiler.js:25829
    at Array.forEach (<anonymous>)
    at compiler.js:25828
    at Array.forEach (<anonymous>)
    at JitCompiler._loadModules (compiler.js:25825)
    at JitCompiler._compileModuleAndComponents (compiler.js:25805)
    at JitCompiler.compileModuleAsync (compiler.js:25767)

我从另一个项目导入的原因是我想计划从项目 生成一个库一个 .

项目中一个 一切正常:

(项目功能模块 A )

@NgModule({
  declarations: [
    >>CrudTableComponent,
    >>BulkCrudTableComponent,
  ],
  imports: [
    CommonModule,

    ReactiveFormsModule,

    MatTableModule,
    ...
    MatCardModule,
  ],
  exports: [

    ReactiveFormsModule,
    MatTableModule,
    ...
    MatCardModule,
    >>CrudTableComponent,
    >>BulkCrudTableComponent,
  ]
})
export class CrudTableModule {}

(功能模块项目 B ，我得到错误的项目，你看我离开了我的项目(B)......)

import { CrudTableModule } from '../../../../../../privat/mat-crud-table/src/app/crudTableProject/crud-table.module';
...

@NgModule({
  declarations: [
    loads of declarations ...
  ],
  entryComponents: [
    some entry components ...
  ],
  imports: [
    some imports ...

    CrudTableModule,
  ],
  exports: [
    bazillion exports ....
    CrudTableModule,
   ],
})
export class MyCoreModule {}

可能与:

https://stackoverflow.com/a/57090749/6852937

对我来说，不清楚这对我有什么帮助，不能应用“解决方案”。

当我“玩耍”并改变我的 templateUrl:在 一个 至 template:奇怪的事情正在发生:

compiler.js:2175 Uncaught Error: Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatButton,MatButton ("
    <mat-dialog-actions fxLayout="row nowrap" fxLayoutAlign="space-between center">

            [ERROR ->]<button mat-stroked-button color="primary" (click)="logout()">Ausloggen</button>
            <button "): ng:///MayaCoreModule/LogoutModalComponent.html@12:12
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatButton,MatButton ("       <button mat-stroked-button color="primary" (click)="logout()">Ausloggen</button>
            [ERROR ->]<button mat-stroked-button (click)="close()">Abbrechen</button>

我玩得更多，我知道删除 Material 进口以摆脱 Material 公牛****错误。

该应用程序在浏览器中运行，但我无法使用我的东西(原因很明显)。

Answer 1

我确实有同样的问题。当我们确实使用来自外部项目根目录的组件时，就会发生这种情况。

这一行的错误:https://github.com/angular/angular/blob/master/packages/compiler/src/directive_normalizer.ts#L73

在这一行中，prenormData 的值。 模板 是一个对象而不是字符串，这将引发异常。要解决此问题，您需要检查 prenormData.template 是否为对象并获取默认属性的值。像这样的东西:

if (typeof prenormData.template !== 'string' && ('default' in prenormData.template)) {
   prenormData.template = prenormData.template.default;
}

if (typeof prenormData.template !== 'string') {
   throw syntaxError("The template specified for component " + stringify(prenormData.componentType) + " is not a string");
}

但为此，我们必须为 Angular 打开一个 PR 并等待他们批准 :(