CODEWITHSUNDEEP
angularwebpackcompiler-errors
Andre Elrico
Andre Elrico

Reputation: 11500

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

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

(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

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.

Upvotes: 0

Views: 581

Answers (1)

Eric Ferreira
Eric Ferreira

Reputation: 31

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

Upvotes: 1

Related Questions