Uncaught Error: Unexpected value '[object Object]' imported by the module X.

[sharikovvladislav]

Hi!

I am trying to use ngx-mask@2.0.3. By the way whole code is available here: https://github.com/sharikovvladislav/ng2-diary-book/pull/77)

I imported your module this way NgxMaskModule.forRoot(), and I got this error:

compiler.es5.js:1690 Uncaught Error: Unexpected value '[object Object]' imported by the module 'TagsAutoCompleteModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.es5.js:1690)
    at compiler.es5.js:15382
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15365)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleSummary (compiler.es5.js:15307)
    at compiler.es5.js:15380
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15365)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleSummary (compiler.es5.js:15307)
    at compiler.es5.js:15380
syntaxError @ compiler.es5.js:1690
(anonymous) @ compiler.es5.js:15382
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.es5.js:15365
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleSummary @ compiler.es5.js:15307
(anonymous) @ compiler.es5.js:15380
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.es5.js:15365
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleSummary @ compiler.es5.js:15307
(anonymous) @ compiler.es5.js:15380
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.es5.js:15365
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules @ compiler.es5.js:26795
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents @ compiler.es5.js:26768
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync @ compiler.es5.js:26697
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4536
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 69b546962c2a7115b033:54
0 @ tags-common.styles.css:8
__webpack_require__ @ bootstrap 69b546962c2a7115b033:54
webpackJsonpCallback @ bootstrap 69b546962c2a7115b033:25
(anonymous) @ main.bundle.js:1

I did that because of example in your code: https://github.com/NepipenkoIgor/ngx-mask/blob/master/src/app/app.module.ts#L33

What is the problem?

svlad at sharikovvlad in ~/dev/ng2-diary-book on master [!]
$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.3.0
node: 8.4.0
os: darwin x64
@angular/animations: 4.3.5
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.5
@angular/compiler: 4.3.5
@angular/core: 4.3.5
@angular/forms: 4.3.5
@angular/http: 4.3.5
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.5
@angular/platform-browser-dynamic: 4.3.5
@angular/router: 4.3.5
@angular/cli: 1.3.0
@angular/compiler-cli: 4.3.5
@angular/language-service: 4.3.5

svlad at sharikovvlad in ~/dev/ng2-diary-book on feature/add-mask
$ 

svlad at sharikovvlad in ~/dev/ng2-diary-book on feature/add-mask
$ yarn list | grep ngx-mask
├─ ngx-mask@2.0.3

svlad at sharikovvlad in ~/dev/ng2-diary-book on feature/add-mask
$ 

Repro:

0. Clone the repo (probably git clone -b feature/add-mask git@github.com:sharikovvladislav/ng2-diary-book.git is enough)
1. cd ng2-diary-book
2. yarn
3. yarn start (note: it is possible to get ERROR in Error encountered resolving symbol values statically after the compile, read below for instructions)
4. Open http://localhost:4200/ in your browser

Expectations: no errors in the browser console Real world:

If you get this after step 2:

ERROR in Error encountered resolving symbol values statically. Calling function 'InjectionToken', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol config in C:/dev/ng2-diary-book/node_modules/ngx-mask/build/config.d.ts, resolving symbol NgxMaskModule.forRoot in C:/dev/ng2-diary-book/node_modules/ngx-mask/build/ngx-mask.module.d.ts, resolving symbol TagsAutoCompleteModule in C:/dev/ng2-diary-book/src/app/core/features/components/tags-autocomplete/tags-autocomplete.module.ts, resolving symbol TagsAutoCompleteModule in C:/dev/ng2-diary-book/src/app/core/features/components/tags-autocomplete/tags-autocomplete.module.ts

You need to change something in watched files. For example add some 'space' somewhere. If I remember correctly its because of angular/cli problem (I still didn't update it :'( )

[sharikovvladislav]

Any thoughts?

[sougiovn]

I'm having this same issue

[NepipenkoIgor]

@sharikovvladislav @gigioSouza Could you provide additional information for example full package json or link for test repo

[sougiovn]

@NepipenkoIgor I'll create a new project/repo and try to reproduce the error soon.

[sharikovvladislav]

@gigioSouza not needed.

@NepipenkoIgor here is the repo: https://github.com/sharikovvladislav/ng2-diary-book/tree/feature/add-mask (notice feature/add-mask branch)

Here is the package.json: https://github.com/sharikovvladislav/ng2-diary-book/blob/feature/add-mask/package.json#L52

I am adding repro to the topic-start post.

upd: I added. Just reproduce that on my win10 machine.

@gigioSouza well, actually maybe clear repro will be better since we can detect that the problem is not connected with my specific dependencies.

[LimarenkoDenis]

@sharikovvladislav I could not run your project due to other errors, @gigioSouza but try this solution: edit /src/tsconfig.app.json in your project

{
  "compilerOptions": {
    // ...
    // Note: these paths are relative to `baseUrl` path.
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
       ]
    }
  }
}

more detail described here https://github.com/angular/angular-cli/wiki/stories-linked-library, and then give a feedback again, please

[sharikovvladislav]

@LimarenkoDenis hi! What errors did you get? Can you provide full log?

Yesterday I did all steps at my friends PC (Windows 10) and I got my problem.

UPD:

Did you get this error?

ERROR in Error encountered resolving symbol values statically. Calling function 'InjectionToken', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol config in C:/dev/ng2-diary-book/node_modules/ngx-mask/build/config.d.ts, resolving symbol NgxMaskModule.forRoot in C:/dev/ng2-diary-book/node_modules/ngx-mask/build/ngx-mask.module.d.ts, resolving symbol TagsAutoCompleteModule in C:/dev/ng2-diary-book/src/app/core/features/components/tags-autocomplete/tags-autocomplete.module.ts, resolving symbol TagsAutoCompleteModule in C:/dev/ng2-diary-book/src/app/core/features/components/tags-autocomplete/tags-autocomplete.module.ts

To remove it you have to change something in watched files, for example add some space anywhere.

[sharikovvladislav]

@LimarenkoDenis I am trying to understand what a problem did you get...

I just updated @angular/cli and right after ng serve I got this in console:

* NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-10-11T21:09:07.542Z
Hash: 2c859548411ca0dabe82
Time: 4126ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 1.06 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 46 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 338 kB [initial] [rendered]

ERROR in Error: Error encountered resolving symbol values statically. Calling function 'InjectionToken', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol config in /Users/svlad/sandbox/ng2-diary-book/node_modules/ngx-mask/build/config.d.ts, resolving symbol NgxMaskModule.forRoot in /Users/svlad/sandbox/ng2-diary-book/node_modules/ngx-mask/build/ngx-mask.module.d.ts, resolving symbol TagsAutoCompleteModule in /Users/svlad/sandbox/ng2-diary-book/src/app/core/features/components/tags-autocomplete/tags-autocomplete.module.ts, resolving symbol TagsAutoCompleteModule in /Users/svlad/sandbox/ng2-diary-book/src/app/core/features/components/tags-autocomplete/tags-autocomplete.module.ts
    at syntaxError (/Users/svlad/sandbox/ng2-diary-book/node_modules/@angular/compiler/bundles/compiler.umd.js:1725:34)
    at simplifyInContext (/Users/svlad/sandbox/ng2-diary-book/node_modules/@angular/compiler/bundles/compiler.umd.js:24949:23)
    at StaticReflector.simplify (/Users/svlad/sandbox/ng2-diary-book/node_modules/@angular/compiler/bundles/compiler.umd.js:24961:13)
    at StaticReflector.annotations (/Users/svlad/sandbox/ng2-diary-book/node_modules/@angular/compiler/bundles/compiler.umd.js:24391:41)
    at _getNgModuleMetadata (/Users/svlad/sandbox/ng2-diary-book/node_modules/@angular/compiler-cli/src/ngtools_impl.js:138:31)
    at _extractLazyRoutesFromStaticModule (/Users/svlad/sandbox/ng2-diary-book/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26)
    at /Users/svlad/sandbox/ng2-diary-book/node_modules/@angular/compiler-cli/src/ngtools_impl.js:129:27
    at Array.reduce (<anonymous>)
    at _extractLazyRoutesFromStaticModule (/Users/svlad/sandbox/ng2-diary-book/node_modules/@angular/compiler-cli/src/ngtools_impl.js:128:10)
    at /Users/svlad/sandbox/ng2-diary-book/node_modules/@angular/compiler-cli/src/ngtools_impl.js:129:27
    at Array.reduce (<anonymous>)
    at _extractLazyRoutesFromStaticModule (/Users/svlad/sandbox/ng2-diary-book/node_modules/@angular/compiler-cli/src/ngtools_impl.js:128:10)
    at Object.listLazyRoutesOfModule (/Users/svlad/sandbox/ng2-diary-book/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/Users/svlad/sandbox/ng2-diary-book/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (/Users/svlad/sandbox/ng2-diary-book/node_modules/@ngtools/webpack/src/plugin.js:207:44)
    at _donePromise.Promise.resolve.then.then.then.then.then (/Users/svlad/sandbox/ng2-diary-book/node_modules/@ngtools/webpack/src/plugin.js:443:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

webpack: Failed to compile.

Is there any problems in ngx-mask?

[sharikovvladislav]

Do you have Angular 4.4.4 as requirement?

I updated my app to 4.4.4. and its ok...

[LimarenkoDenis]

have you tried that solution that I wrote? , because all results with this issue lead me to an angular-cli issues, and with your angular upgrading, it seems like problem gone

[sharikovvladislav]

Nope I didn't try it.

Actually , I thought you said it to @gigioSouza.

I will be ok with updating my project to newer version of ng

[NepipenkoIgor]

@sharikovvladislav @gigioSouza In my opinion we should use latest version. If it is possibly you should update dependencies . Current version is 4.4.4

[sharikovvladislav]

I am not sure its ok to depend so hardly on specific version of something anyway.

[luanmm]

@NepipenkoIgor this issue still occurs. It's due to the fact that your library depends on a fixed version of Angular (now, as I see in the master branch, is 5.0.0).

My suggestion is to change the library "dependencies" to "peerDependencies" in package.json (that is, dependencies that aren't installed because the main project must have it already, which is the case for any project that uses your library) and do not force any versions strictly as you are doing today. Check what is the minimum version your library depends on and put like this: "^4.0.0".

Hope it helps and my suggestion could be valid for you guys. Everything that I am suggesting here are just good practices for libraries in any Angular environment, that helps to avoid problems like this one.

[sharikovvladislav]

@luanmm Yep. The current version of ngx-mask is not working for users which are running old versions of Angular. Users of old versions of Angular have to find ngx-mask of suitable verision for their Angular version. Thats absolutely not cool :)

[luanmm]

If this is really the idea behind the "how to use", it's wrong from a design point of view. But I'm not thinking that this is the case. I think the problem here was a misuse of the package.json considering that the project is an Angular library.

[NepipenkoIgor]

@luanmm @sharikovvladislav Сould you try latest version and give feedback?

[luanmm]

@NepipenkoIgor I have done that already. The problem is that the library dependencies are conflicting someway with the project dependencies and this is what generates this error. Plus, I cannot change my project dependencies based on the library ones (change the Angular version of my project to match the library Angular version).

The only setup that I see that could solve this problem (and it's proven to work, because is what I'm doing now as a workaround here) is to remove the strictness of the package.json dependencies and correct it to use the "dependencies" as "peerDependencies". This way the project can use any Angular version and the library will still work (at least for a giving range of versions).

If you want to see an example, I have developed a library that depends on Angular (limited from 4.0.0 to 6.0.0, because I cannot be sure it will work in the next major release, that's why the < 6.0.0 rule in package.json). In my case the library just depends on Angular and I really don't have any third party dependencies (note that there is no "dependencies" key in the file). But I'm almost sure that this is your case too (the ngx-mask library doesn't seems to really depend on other libraries besides Angular and just that peer dependency should be enough too to make things work).

[NepipenkoIgor]

@luanmm If you install latest build you will see that module has peerDependencies, and it should work. Please try.

[sharikovvladislav]

@NepipenkoIgor

I installed last one via yarn add ngx-mask@latest. I got:

svlad at sharikovvlad in ~/dev/ng2-diary-book on master [!$]
$ yarn list | grep ngx-mask
├─ ngx-mask@2.1.11

Seems to me it works properly now. I don't have errors anywhere and mask is working properly.

@luanmm can you check this too?

[luanmm]

Sure. I will check the latest version to see if it stops giving that error.

Sorry if it was already using "peerDependencies" when I insisted that this was the solution, but I was looking the source at this repository and, here, the package.json seems to be using just "dependencies" yet. Maybe this is why it got confusing to me.

[NepipenkoIgor]

@luanmm You right i will update master branch soon . Thank you.

[luanmm]

@NepipenkoIgor now it works as expected, indeed.

And I checked that the dependencies of the library (when installed by NPM) are compatible even with lower versions of Angular (which is another requirement for me, as I am using Angular 4):

  ...
  "peerDependencies": {
    "@angular/common": ">=2.4.3",
    "@angular/compiler": ">=2.4.3",
    "@angular/http": ">=2.4.3",
    "@angular/router": ">=2.4.3",
    "@angular/core": ">=2.4.3",
    "@angular/forms": ">=2.4.3",
    "@angular/platform-browser": ">=2.4.3",
    "@angular/platform-browser-dynamic": ">=2.4.3"
  },
  ...

That's what I was talking about, but without the knowledge that it was already right. Sorry for that. I hope that I wasn't rude talking that way.

Lastly, why the source code isn't updated in Github, by the way? This may lead to misconceptions like mine above or even prejudice the project if the objective is to have some kind of collaborative environment. Not that this is of my concern, but just to expose an opinion (not in a critical way) that might help somehow.

[NepipenkoIgor]

@luanmm You are right. I updated repo . Please check . And i will be happy if you will help with mask support.