angular: Uncaught TypeError: uri.match is not a function

I’m submitting a … (check one with “x”)

[X ] bug report => search github for a similar issue or PR before submitting


**Current behavior** 
When running the application with web pack at start the app throws Uncaught TypeError: uri.match is not a function.

RC.6 or RC.7 both using web pack when I compile and run the app. I get Uncaught TypeError: uri.match is not a function. I do not have module:module.Id in my .ts file.

When I change Split() function under Compiler.ts file, the app works. Two possible workarounds I m doing every time when I do npm install.

Fix this code in compiler.umd.js

function _split(uri) {
// put condition to check if not != ""
return uri.match(_splitRe);
}

or

function componentModuleUrl(reflector, type, cmpMetadata) {
if (isStaticSymbol(type)) {
return staticTypeModuleUrl(type);
}
if (isPresent(cmpMetadata.moduleId)) {
var moduleId = cmpMetadata.moduleId;
var scheme = getUrlScheme(moduleId.toString());
return isPresent(scheme) && scheme.length > 0 ? moduleId :
"package:" + moduleId + MODULE_SUFFIX;
}
return reflector.importUri(type);
}

Can we have permanent fix for this?

**Expected behavior**
The app shouldn't throw this error.

**Reproduction of the problem**

Use the following packages to reproduce the issue. 

Package.JSON

"dependencies": {
    "@angular/common": "2.0.0-rc.7",
    "@angular/compiler": "2.0.0-rc.7",
    "@angular/core": "2.0.0-rc.7",
    "@angular/forms": "2.0.0-rc.7",
    "@angular/http": "2.0.0-rc.7",
    "@angular/platform-browser": "2.0.0-rc.7",
    "@angular/platform-browser-dynamic": "2.0.0-rc.7",
    "@angular/router": "3.0.0-rc.3",
    "angular2-toaster": "0.5.2-rc.6",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "intl": "^1.2.4",
    "jquery": "^3.1.0",
    "jquery-ui": "^1.12.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.5.0",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.24.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.22.0",
    "raw-loader": "^0.5.1",
    "ts-loader": "^0.8.2",
    "typescript": "^1.8.10",
    "typings": "^1.3.2",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  }


**What is the motivation / use case for changing the behavior?**
N/A

**Please tell us about your environment:**
MAC, WEB PACK DEV SERVER

* **Angular version:** 2.0.0-rc.6 & Angular version:** 2.0.0-rc7


* **Browser:** [all] 


* **Language:** [TypeScript ES5]

* **Node (for AoT issues):** `node --version` =   


NPM Version : 3.10.3
Node Version : v6.5.0

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 24 (6 by maintainers)

Commits related to this issue

fix(MetadataResolver): throw Component.moduleId is not a string fixes #11590 — committed to vicb/angular by vicb 8 years ago
fix(MetadataResolver): throw Component.moduleId is not a string fixes #11590 — committed to vicb/angular by vicb 8 years ago

Most upvoted comments

@vicb When this error was very popular a few weeks ago, it was in the midst of the churn as to whether or not it is necessary to specify moduleId: module.id, in a component metadata declaration.

By default (I don’t know if the CLI team has a workaround for this in their stuff), a webpack module ID will be a number, not a string. Thus this exact error - the error is because whoever wrote this piece of Angular 2 code assumed that a module ID is always a string, but there are common JS tools which make the module ID a number… ouch.

I do not have reproduction case in front of me, but I believe the reproduction happens when either a developer manually puts the module line and their component metadata, or uses tooling which inserts it behind the scenes. I suspect this typically happens accidentally, when tools behind the scenes do something unexpected, when a piece of sample code gets copied in and has an unnoticed superfluous line in it, etc.

It would be helpful if this bit of Angular code, instead of simply failing with the error, would emit a more specific error like “expected module ID to be a string, but it was of type ___ and value ____”. Whenever the error happened thereafter, it’s more likely someone would be able to spot what underlying condition caused this to be the case. This would be helpful even if all of the current tooling correctly used never causes an error. The Angular community contains a lot of developers who are freshly learning how to do any of these things, and I suspect that after the final 2.0 release that community will increase greatly in size… Every edge case or minor misuse which can be made to emit a helpful error/warning instead of an unhelpful one will ease the burden from that growth.

kylecordes on Sep 14, 2016

Hi all Remove All module.id It’s working now.

karthikkavin on Sep 16, 2016

@vicb Please check this file:

node_modules\@angular\compiler\bundles\compiler.umd.js Line: 13350

Fix:

 function _split(uri) {
      return uri.toString().match(_splitRe);
 }

Thanks

darkpey on Sep 14, 2016

There you go - by doing that, the webpack module ID (which is a number) gets passed to Angular, and it objects with the opaque error message. This will be a common occurrence as many new people pick up A2 soon.

kylecordes on Sep 14, 2016

If you create a new app using angular-cli@webpack and include moduleId: module.id in a component this error will be thrown.

error_handler.js:45EXCEPTION: Uncaught (in promise): TypeError: uri.match is not a function

If you remove moduleId: module.id from the component all is good in the world.

iamjohnlong on Sep 14, 2016

Instead of module.id you could use __filename

felixfbecker on Sep 18, 2016