working with angular 4

[liorbashan]

After updating my project to angular 4, I get this error when trying to use custom validators:

ERROR in ./~/ng2-validation/dist/uuid/validator.js Module not found: Error: Can't resolve '{project path}\node_modules@angular\core\src\facade\lang.js' in '{project path}\node_modules\ng2-validation\dist\uuid'

when reinstalling ng2-validators I get this: +-- UNMET PEER DEPENDENCY @angular/[email protected] +-- UNMET PEER DEPENDENCY @angular/[email protected] +-- [email protected] `-- UNMET PEER DEPENDENCY [email protected]

any advise on how to handle this?

[acostaf]

+1

Also I am getting lots of errors during build

ERROR in ./~/ng2-validation/dist/base64/validator.js Module not found: Error: Can't resolve '/Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js' in '/Users/xxxx/projects/web-app/node_modules/ng2-validation/dist/base64' resolve '/Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js' in '/Users/xxxx/projects/web-app/node_modules/ng2-validation/dist/base64' using description file: /Users/xxxx/projects/web-app/node_modules/ng2-validation/package.json (relative path: ./dist/base64) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/xxxx/projects/web-app/node_modules/ng2-validation/package.json (relative path: ./dist/base64) using description file: /Users/xxxx/projects/web-app/node_modules/@angular/core/package.json (relative path: ./src/facade/lang.js) as directory /Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js doesn't exist no extension Field 'browser' doesn't contain a valid alias configuration /Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration /Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration /Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js.json doesn't exist [/Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js] [/Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js] [/Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js.ts] [/Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js.js] [/Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js.json] @ ./~/ng2-validation/dist/base64/validator.js 3:13-38 @ ./~/ng2-validation/dist/base64/index.js @ ./~/ng2-validation/dist/index.js @ ./compiled/src/app/app.module.ngfactory.ts @ ./src/main.browser.aot.ts

[yuyang041060120]

update to v3.9.1

[acostaf]

Still having the issue "Field 'browser' doesn't contain a valid alias configuration"

Module not found: Error: Can't resolve '/Users/xxxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js' in '/Users/xxx/projects/web-app/node_modules/ng2-validation/dist/credit-card' resolve '/Users/xxx/projects/web-app/node_modules/@angular/core/src/facade/lang.js' in '/Users/xxxx/projects/web-app/node_modules/ng2-validation/dist/credit-card' ....

[AmirAliSobhGol]

any update on this?

[yuyang041060120]

I create a project with angular-cli. And the new version works well, Can you show more details?

[AmirAliSobhGol]

here is my package.json:

    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "angular2-jwt": "^0.2.0",
    "angular2-notifications": "^0.4.53",
    "awesome-bootstrap-checkbox": "^0.3.7",
    "bootstrap-sass": "^3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "ie-shim": "^0.1.0",
    "jasmine-core": "^2.5.2",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "ng2-slim-loading-bar": "^2.4.0",
    "ng2-validation": "^3.9.1",
    "reflect-metadata": "^0.1.9",
    "rxjs": "5.0.2",
    "zone.js": "^0.8.5"

and here is the err: ERROR in ./~/ng2-validation/dist/url/validator.js Module not found: Error: Can't resolve 'C:\Users\Amirali\Projects\XXX\node_modules@angular\core\src\facade\lang.js' in 'C:\Users\Amirali\Projects\XXX\node_modules\ng2-validation\dist\url' ...

[acostaf]

the same issue @yuyang041060120 Any update on this ?

[netopolit]

me too. on custom webpack setup. If specific details are needed please ask. Thanks

[mnasyrov]

In my case, a following workaround helps me: I had to add all 'index.d.ts' files from 'dist' dir to my tsconfig.json.

"include": [
    "./node_modules/ng2-validation/dist/**/index.d.ts"
],

[netopolit]

@mnasyrov Doesn't help in my case. Still the same errors about node_modules/@angular/core/src/facade/lang.js

[BallisticPain]

@mnasyrov I tried that as well, and it didn't work for me... :(

@yuyang041060120 Any other help/ideas?

Also, I'm using the AngularClass Webpack Seed... if that makes any difference. I could really use some help!!! :(

[mnasyrov]

@netopolit @BallisticPain Can't help with it :( My final tsconfig has a next tweak which is compiled by ngc 2.2.1:

"include": [
  "./node_modules/ng2-validation/dist/**/*.d.ts"
],
"exclude": [
  "./node_modules/ng2-validation/dist/index.d.ts"
]

[BallisticPain]

Okay... so after some research it seems highly likely that there is a possibility of a couple of things going wrong...

1. Deep Import can no longer be done in Angular v4 ... I'm not 100% certain that a deep import is what's causing this...
2. I believe a require statement isn't resolving properly. (Not sure if that's related to point 1 or not) Here's why I think that may be the case... Look closely at the error (of which I have one of these in my output for each and every validator whether I'm using it or not).

ERROR in ./~/ng2-validation/dist/range-length/validator.js
Module not found: Error: Can't resolve '/Users/ballisticpain/Development/project-indian-ng/node_modules/@angular/core/src/facade/lang.js' in '/Users/ballisticpain/Development/project-indian-ng/node_modules/ng2-validation/dist/range-length'
 @ ./~/ng2-validation/dist/range-length/validator.js 4:13-38
 @ ./~/ng2-validation/dist/range-length/index.js
 @ ./~/ng2-validation/dist/index.js
 @ ./src/app/hotel-search/hotel-search.component.ts
 @ ./src/app/hotel-search/index.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.browser.ts

Notice the module it cannot find... it's looking in @angular/core and deep in there. However, I've been unable to find anywhere that it might actually be importing at that level. What I have found in the dist/*/validator.js file(s) is this line var lang_1 = require('../facade/lang'); (which this always happens to be on line 4 as the error indicates).

I hope this helps get this resolved. I really don't want to have to take the validators out, but that's my next step if this cannot be resolved in a timely manner. I wish I could help, but I don't know how to fix it.

[BallisticPain]

@mnasyrov I'm still learning all these config files... Where in the tsconfig do I put these keys/values? I've also got a separate tsconfig file for webpack...

I've been trying them outside the compilerOptions.

[niboac]

this issue +1 , I am using latest version 3.9.1, but still return errors:

ERROR in ./~/ng2-validation/dist/base64/validator.js Module not found: Error: Can't resolve '/Users/cb/repo/structure-product-ui/node_modules/@angular/core/src/facade/lang.js' in '/Users/cb/repo/structure-product-ui/node_modules/ng2-validation/dist/base64' @ ./~/ng2-validation/dist/base64/validator.js 4:13-38 @ ./~/ng2-validation/dist/base64/index.js @ ./~/ng2-validation/dist/index.js @ ./src/app/app.module.ts @ ./src/app/index.ts @ ./src/main.browser.ts @ multi (webpack)-dev-server/client?http://localhost:3100 ./src/main.browser.ts

ERROR in ./~/ng2-validation/dist/credit-card/validator.js Module not found: Error: Can't resolve '/Users/cb/repo/structure-product-ui/node_modules/@angular/core/src/facade/lang.js' in '/Users/cb/repo/structure-product-ui/node_modules/ng2-validation/dist/credit-card' @ ./~/ng2-validation/dist/credit-card/validator.js 4:13-38 @ ./~/ng2-validation/dist/credit-card/index.js @ ./~/ng2-validation/dist/index.js @ ./src/app/app.module.ts @ ./src/app/index.ts @ ./src/main.browser.ts @ multi (webpack)-dev-server/client?http://localhost:3100 ./src/main.browser.ts `

[BallisticPain]

Also to add... I'm on v3.9.1 as well.

[BallisticPain]

Wooohoo... I have a fix for anyone that's using @AngularClass, and likely enough information that you will hopefully be able to fix yours...

I was digging around in my webpack.common.js file (located in the config folder the AC Seed) trying to fix another warning I was seeing in the compiler... I happened to notice the following code (I commented the lines to FIX this issue)...

      // Fix Angular 2
      // new NormalModuleReplacementPlugin(
      //   /facade(\\|\/)async/,
      //   helpers.root('node_modules/@angular/core/src/facade/async.js')
      // ),
      // new NormalModuleReplacementPlugin(
      //   /facade(\\|\/)collection/,
      //   helpers.root('node_modules/@angular/core/src/facade/collection.js')
      // ),
      // new NormalModuleReplacementPlugin(
      //   /facade(\\|\/)errors/,
      //   helpers.root('node_modules/@angular/core/src/facade/errors.js')
      // ),
      // new NormalModuleReplacementPlugin(
      //   /facade(\\|\/)lang/,
      //   helpers.root('node_modules/@angular/core/src/facade/lang.js')
      // ),
      // new NormalModuleReplacementPlugin(
      //   /facade(\\|\/)math/,
      //   helpers.root('node_modules/@angular/core/src/facade/math.js')
      // ),

Someone mentioned to me that @angular/core no longer had a facade directory. So when I was looking to fix my other issue, I saw this one screaming at me, and right after I had just removed the module from my project. lol

I hope this gets someone the ability to move forward!

[hzitoun]

@BallisticPain your solution worked great!

[jigarpt]

Hi, I am facing below issue while AOT build.

• Using ng2-validation - 4.2.0 version.
• Using bundles/ng2-validation.umd.js for system.js.

AOT build error:

Error on fetch for ng2-validation/dist/base64.js - No such file or directory.

Looking forward for your inputs.

Best regards, Jigar.

[jigarpt]

@yuyang041060120 Facing exactly same issue in angular-seed https://gitter.im/mgechev/angular2-seed/archives/2017/02/16

ng2-validation version 3.1.2 works fine.

[roni-frantchi]

Hi @jigarpt any luck figuring this one out?..