compiler.js:2175 Uncaught Error: The template specified for component ...Component... is not a string

Question

(im on an angular-cli app version 8)

Im trying to import a feature module from project A into project B.

(the error after running project B in the browser)

(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)

The reason Im importing from another project is that i want plan to generate a library from project A.

In project A everything works fine:

(feature module of project A)

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

    ReactiveFormsModule,

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

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

(feature module project B, project where I get the error, you see I leave my project (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 {}

might be related to:

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

for me its unclear how this could help me, cant apply the "solution".

when I "play-around" and change my templateUrl: in A to template: weird stuff is happending:

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>

I play around even more and I know remove the material imports to get rid of the material bull**** error.

The app runs in the browser but I cant use my stuff (for obvious reasons).

probably as per the error message you import `Template/html` file path is wrong, check that. — Pardeep Jain, Sep 24 '19 at 15:29
`In project A everything works fine:[OP]` the path of my project A modules are correct. The path `import { CrudTableModule } from '../../../../../../privat/mat-crud-table/src/app/crudTableProject/crud-table.module';` is also correct since I get a autocomplete. I also tried an absolute path. — Andre Elrico, Sep 24 '19 at 15:35
if importing a module from library use `import { CrudTableModule } from 'mylib'` - an alias will have been added to your root `tsconfig`. Also you can only share modules between a library and one or more apps - not between apps — jenson-button-event, Oct 01 '19 at 07:10

score 1 · Answer 1 · answered Dec 27 '19 at 18:19

I did have same problem. This occours when we did work with components from outside project root.

The mistake in this line: https://github.com/angular/angular/blob/master/packages/compiler/src/directive_normalizer.ts#L73

In this line, the value of prenormData.template is a Object instead of string, and this will raise an exception. To fix this problem, you need to check if prenormData.template is an object and get the value of the default property. Something like this:

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");
}

But for that, we have to open a PR for Angular and wait for them to approve :(

compiler.js:2175 Uncaught Error: The template specified for component ...Component... is not a string

(im on an angular-cli app version 8)

1 Answers1