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

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:

1. Clone the repo (probably git clone -b feature/add-mask [e-mail]:sharikovvladislav/ng2-diary-book.git is enough)
2. cd ng2-diary-book
3. yarn
4. yarn start (note: it is possible to get ERROR in Error encountered resolving symbol values statically after the compile, read below for instructions)
5. 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]

@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]

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