Solvedangular "Expression form not supported." when compiling library project with InjectionToken

413

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request

Current behavior

When trying to build a new Angular CLI library that uses an InjectionToken, I get the following error:

Error encountered in metadata generated for exported symbol 'TestLibComponent':
Metadata collected contains an error that will be reported at runtime: Expression form not supported.

Expected behavior

No error.

Minimal reproduction of the problem with instructions

ng new cli-test
cd cli-test
ng g library test-lib
Change test-lib.component.ts to this:

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';

@Component({
  selector: 'lib-test-lib',
  template: `
    <p>
      test-lib works!
    </p>
  `,
  styles: []
})
export class TestLibComponent implements OnInit {
  public x: object;

  constructor(@Inject(PLATFORM_ID) appId: object) {
    this.x = appId;
  }

  ngOnInit() {}
}

ng run test-lib:build

Then the build error will appear.

Full error output

BUILD ERROR
C:/Users/.../code/Playground/cli-versions/cli-error/projects/test-lib/src/lib/test-lib.component.ts:3:1: Error encountered in metadata generated for exported symbol 'TestLibComponent':
 C:/Users/.../code/Playground/cli-versions/cli-error/projects/test-lib/src/lib/test-lib.component.ts:15:43: Metadata collected contains an error that will be reported at runtime: Expression form not supported.
  {"__symbolic":"error","message":"Expression form not supported","line":14,"character":42}
Error: C:/Users/.../code/Playground/cli-versions/cli-error/projects/test-lib/src/lib/test-lib.component.ts:3:1: Error encountered in metadata generated for exported symbol 'TestLibComponent':
 C:/Users/.../code/Playground/cli-versions/cli-error/projects/test-lib/src/lib/test-lib.component.ts:15:43: Metadata collected contains an error that will be reported at runtime: Expression form not supported.
  {"__symbolic":"error","message":"Expression form not supported","line":14,"character":42}
    at C:\Users\...\code\Playground\cli-versions\cli-error\node_modules\@angular\compiler-cli\src\metadata\collector.js:707:31
    at Array.forEach (<anonymous>)
    at validateMetadata (C:\Users\...\code\Playground\cli-versions\cli-error\node_modules\@angular\compiler-cli\src\metadata\collector.js:695:46)
    at MetadataCollector.getMetadata (C:\Users\...\code\Playground\cli-versions\cli-error\node_modules\@angular\compiler-cli\src\metadata\collector.js:550:21)
    at MetadataCache.getMetadata (C:\Users\...\code\Playground\cli-versions\cli-error\node_modules\@angular\compiler-cli\src\transformers\metadata_cache.js:86:41)
    at Object.getSourceFileMetadata (C:\Users\...\code\Playground\cli-versions\cli-error\node_modules\@angular\compiler-cli\src\transformers\compiler_host.js:112:56)
    at Object.readMetadata (C:\Users\...\code\Playground\cli-versions\cli-error\node_modules\@angular\compiler-cli\src\transformers\metadata_reader.js:46:37)
    at TsCompilerAotCompilerTypeCheckHostAdapter.getMetadataFor (C:\Users\...\code\Playground\cli-versions\cli-error\node_modules\@angular\compiler-cli\src\transformers\compiler_host.js:464:38)
    at StaticSymbolResolver.getModuleMetadata (C:\Users\...\code\Playground\cli-versions\cli-error\node_modules\@angular\compiler\bundles\compiler.umd.js:19516:45)
    at StaticSymbolResolver._createSymbolsOf (C:\Users\...\code\Playground\cli-versions\cli-error\node_modules\@angular\compiler\bundles\compiler.umd.js:19304:29)

I had similar problems with the usage of own InjectionTokens.

What is the motivation / use case for changing the behavior?

Environment

Angular version: 6.0.0
Angular CLI version: 6.0.0

For Tooling issues:
- Node version: 9.4.0
- Platform:  Windows 10

14 Answers

Original

✔️Accepted Answer

GeorgeKnap

I am getting this in my library build and problem is in this component constructor:

constructor(
    @Inject(MAT_DIALOG_DATA) public data: { widget:  GridsterWidget }
  ) { }

when I change it to this form, build succeeeds!

 constructor(
    @Inject(MAT_DIALOG_DATA) public data: DialogInputData
  ) { }     
 interface DialogInputData {
  widget: GridsterWidget;
}

Related Issues:

608

angular Angular5.x lazyLoad problem, undefined is not a function

For others that find this issue via Google as i did: I had the same problem when trying to lazy load...

348

angular Cyclic dependency error with HttpInterceptor

I resolved simply not setting authService in constructor but getting in the intercept function. ...

277

angular Uncaught Error: Can't resolve all parameters for ...

You are missing an @Injectable() annotation on your ApiService Support requests like these should li...

266

angular Force reload/refresh current route with RouteReuseStrategy

Hi If you really need to trick the Router into reloading the component on each routerLink click ...

260

angular Misleading error message "Cannot find a differ supporting object '[object Object]'"

I just ran into the same issue I'm not sure if the recommended solution will work for my case ...

224

angular update 2 to 4 has problem [ts] Property 'map' does not exist on type 'Observable<Response>'.

I met the same problem with the angular cli 6.0.0 and rxjs 6.1.0 And I solved the problem by replaci...

170

angular Angular2 AoT Compiler Errors

pls try /cc @chuckjaz When I try to compile my project with ngc it throws the below error: Error: Er...

152

angular HttpClient.delete() cannot handle a body in its request

It would be great to have body param in .delete() We just migrated our project to HttpClient and for...

140

angular Http - Observable completed function not firing

Third callback haven't been called when error occures ES6 promises hasn't method finally only then a...

133

angular Using multiple components in different modules causing "Type X is part of the declarations of 2 modules" error

as @brandonroberts saids create a shared module like this: then use the SharedModule like this.. ...

112

angular Unsupported platform for fsevents@1.0.14: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

@DzmitryShylovich did you edit package.json only? if npm-shrinkwrap.json is still there please remov...

angular Angular v5 ngc compiler: Error encountered in metadata generated for exported symbol 'Subscription'

Got this problem I'm submitting a.. Current behavior Building an Angulary library using 5.0.0-beta.4...

angular 404 on route refresh in angular 4

Got it working Just adding .htaccess in root I'm submitting a.. Current behavior I created a new com...

angular routerLinkActive not updating when routerLink changed

I have a hack that seems to work After looking at the source code it looks like this.update() is als...

angular No provider for HttpClient!

If you are using angular v5 version import HttpClientModule in your app.module.ts after HttpModule T...

angular ɵDomAnimationEngine and ɵNoopAnimationEngine module missing in animations 4.2.1

@dubedoy I installed @angular/animations@4.1.3 and it worked again. I'm submitting a .. ...

angular Error: Runtime compiler is not loaded in angular6 --prod mode

Do not and i repeat do not import your feature modules in app module and also when addressing featur...

angular appending header in HttpHeaders from '@angular/common/http' doesn't work

@trotyl I didn't understand your comment I'm submitting a.. ...

angular Can't bind to 'formGroup' since it isn't a known property of 'form'

did you import ReactiveFormsModule? I'm submitting a .. ...

angular AOT Compiler requires public properties, while non-AOT allows private properties

@aluanhaddad you have a big misunderstanding in here There is no subset of Typescript in here No one...

angular [Bug] angular/elements: Failed to construct 'HTMLElement': Please use the 'new' operator

Hi I have solved this issue by changing the target:es5 in the tsconfig.json to target:es2015 these i...

angular Cannot run angular 2+ from file:/// - looks like 'base href="/"' is the issue

Thanks @Markovy @audrummer15 I got it working completely in a fairly complex angular 2 app with mult...

angular HttpClient fails to parse an empty 200 response in IE11

For my error I was able to fix the problem by setting the responseType: to 'text' in the options ...

angular Function calls are not supported in decorators when fullTemplateTypeCheck is not specified and @dynamic has no effect

Regarding Ward's repro: @wardbell The build will succeed / fail depending on the combination of angu...

angular error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'

had to add this line in the main tsconfig I'm submitting a.. ...

angular Problem with ngFor

Wouldn't [(ngModel)]=testItems[i] do the trick? I think that the error is saying that you can assign...

angular Issue with importing Observable from rxjs/Rx (import-blacklisted)

You shouldn't import from 'rxjs' or 'rxjs/Rx' since either import will import the whole of rxjs whic...

angular After upgrading to Angular 8, production builds can't load: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

You must change the property target in the file tsconfig.json to es5 Read this blog entry ...

angular [RC5]: Minified bundle breaks

@robertoforlani Hopefully someone will have time to write a comprehensive explanation soon In the me...

angular router-outlet is appending rather than replacing when using BrowserAnimationsModule

Trying this solved the problem for me: this.zone.run(() => { this.router.navigate(['/main']); }); Re...

angular Lazy loaded module in named outlet throws error

We have this Where proxy route component is simply [x] bug report [ ] feature request [ ] support re...

angular IVY Error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

Not sure this will provide anyone relief or assist with figuring out what the root cause is but clea...

angular How to run angular 2 application on apache hosting server

Sorry to rock the boat I hope this doesn't attract more questions I'm only going to comment once :) ...

angular Support adding rel=canonical link tags using an included service

Eventually there will be some DocumentService part of Core that will handle both Meta/Link elements ...

angular Concept of Angular (ngZone + ChangeDetection) better than concept React, Vue (Virtual DOM)?

Concept of Angular (ngZone + ChangeDetection) better than concept React Vue (Virtual DOM)? If you ca...

angular I'd like to be able to use ngModel without specifying a name

Thank you all for the great feedback - very helpful! Here's how we are thinking about it: In the cas...

angular Model values not trimming automatically in angular 2

@laskoviymishka White space it already something If you are a programmer and think globally - yes ...

angular HttpClient - HttpErrorResponse not json but blob

I created this interceptor as a temporary solution until this one is fixed: I'm submitting a.. ...

angular Router's ActivatedRoute data returns empty {} if module is lazy

data is available only with this hell-like construction: And this is if you have children: ...

angular Misleading errormessage when using HostBinding with @animation trigger but no defined animations

The error message is not fine The error message says you're importing BrowserAnimationsModule incorr...

angular Memory leak when FormControlName created/destroyed few times

This issue has been around for nearly 3 years now (I usually don't like to start a message this way ...

angular Remove System.import() usage in favor of import()

I use a parser rule in my webpack configuration to disable the warning: https://webpack.js.org/confi...

angular Async event subscriber not updating UI after async call

Hi! The issue is that the async call result is outside ngZone thus not triggering the UI update You ...

angular Using router.navigate to navigate to another component does not invoke the onInit method

I have the same issue Angular is running in a Cordova app for iOS I tried the router-version 4.1.3 (...

angular Router: AoT compilation fails when using a function with loadChildren

Calling functions or calling new is not supported in metadata when using AoT This includes things li...

angular Document what is <ng-content> tag and how content projection works

If it helps I'm submitting a .. ...

angular Provide a mock service using TestBed

I was having this issue as well however I noticed that my @component metadata still had the provider...

angular Angular2 download excel file from Web API, file is corrupt

@healkar01 I had the same issue and I resolved using native angular2 http request in this way: Backe...

angular 4.0.0-rc.6 [platform-server] - Cannot find module '@angular/animations/browser'. & other errors

(Just incase others find it) Make sure @angular/animations is installed as a dependency and the erro...

angular HttpClient mapping to typescript types not working

I agree with all the previous comments I find the syntax misleading widget.service.zip widget.servic...