Uncaught TypeError: uri.match is not a function #11590

Closed
robinkedia opened this Issue Sep 14, 2016 · 23 comments

Comments

Projects
None yet
@robinkedia

robinkedia commented Sep 14, 2016

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
@3du4

This comment has been minimized.

Show comment
Hide comment
@3du4

3du4 Sep 14, 2016

what are you using _split for?
Looks like it is another issue to me.

3du4 commented Sep 14, 2016

what are you using _split for?
Looks like it is another issue to me.

@vicb

This comment has been minimized.

Show comment
Hide comment
@vicb

vicb Sep 14, 2016

Member

please provide either a stack trace or a minimal repro

Member

vicb commented Sep 14, 2016

please provide either a stack trace or a minimal repro

@robinkedia

This comment has been minimized.

Show comment
Hide comment
@robinkedia

robinkedia Sep 14, 2016

I'm not using _split for anything. I just see this as fix if i google across web. This is only breaking when compiling with web pack. System JS no issues.

_split @ vendor-angular.bundle.js:13648 getUrlScheme @ vendor-angular.bundle.js:13491 componentModuleUrl @ vendor-angular.bundle.js:14902 CompileMetadataResolver.getDirectiveMetadata @ vendor-angular.bundle.js:14342 (anonymous function) @ vendor-angular.bundle.js:14465 CompileMetadataResolver.getNgModuleMetadata @ vendor-angular.bundle.js:14459 RuntimeCompiler._compileComponents @ vendor-angular.bundle.js:17101 RuntimeCompiler._compileModuleAndComponents @ vendor-angular.bundle.js:17039 RuntimeCompiler.compileModuleAsync @ vendor-angular.bundle.js:17030 PlatformRef_._bootstrapModuleWithZone @ vendor-angular.bundle.js:25216 PlatformRef_.bootstrapModule @ vendor-angular.bundle.js:25198 (anonymous function) @ app.bundle.js:90 __webpack_require__ @ pollyfills.bundle.js:51 (anonymous function) @ app.bundle.js:6 __webpack_require__ @ pollyfills.bundle.js:51 webpackJsonpCallback @ pollyfills.bundle.js:22 (anonymous function) @ app.bundle.js:1

I'm not using _split for anything. I just see this as fix if i google across web. This is only breaking when compiling with web pack. System JS no issues.

_split @ vendor-angular.bundle.js:13648 getUrlScheme @ vendor-angular.bundle.js:13491 componentModuleUrl @ vendor-angular.bundle.js:14902 CompileMetadataResolver.getDirectiveMetadata @ vendor-angular.bundle.js:14342 (anonymous function) @ vendor-angular.bundle.js:14465 CompileMetadataResolver.getNgModuleMetadata @ vendor-angular.bundle.js:14459 RuntimeCompiler._compileComponents @ vendor-angular.bundle.js:17101 RuntimeCompiler._compileModuleAndComponents @ vendor-angular.bundle.js:17039 RuntimeCompiler.compileModuleAsync @ vendor-angular.bundle.js:17030 PlatformRef_._bootstrapModuleWithZone @ vendor-angular.bundle.js:25216 PlatformRef_.bootstrapModule @ vendor-angular.bundle.js:25198 (anonymous function) @ app.bundle.js:90 __webpack_require__ @ pollyfills.bundle.js:51 (anonymous function) @ app.bundle.js:6 __webpack_require__ @ pollyfills.bundle.js:51 webpackJsonpCallback @ pollyfills.bundle.js:22 (anonymous function) @ app.bundle.js:1

@robinkedia

This comment has been minimized.

Show comment
Hide comment
@robinkedia

robinkedia Sep 14, 2016

   * Splits a URI into its component parts.
   *
   * Each component can be accessed via the component indices; for example:
   * <pre>
   * goog.uri.utils.split(someStr)[goog.uri.utils.CompontentIndex.QUERY_DATA];
   * </pre>
   *
   * @param uri The URI string to examine.
   * @return Each component still URI-encoded.
   *     Each component that is present will contain the encoded value, whereas
   *     components that are not present will be undefined or empty, depending
   *     on the browser's regular expression implementation.  Never null, since
   *     arbitrary strings may still look like path names.

Error is in this line -
function _split(uri) { **return uri.match(_splitRe);** }

robinkedia commented Sep 14, 2016

   * Splits a URI into its component parts.
   *
   * Each component can be accessed via the component indices; for example:
   * <pre>
   * goog.uri.utils.split(someStr)[goog.uri.utils.CompontentIndex.QUERY_DATA];
   * </pre>
   *
   * @param uri The URI string to examine.
   * @return Each component still URI-encoded.
   *     Each component that is present will contain the encoded value, whereas
   *     components that are not present will be undefined or empty, depending
   *     on the browser's regular expression implementation.  Never null, since
   *     arbitrary strings may still look like path names.

Error is in this line -
function _split(uri) { **return uri.match(_splitRe);** }

@mbnsoft

This comment has been minimized.

Show comment
Hide comment
@mbnsoft

mbnsoft Sep 14, 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

mbnsoft commented Sep 14, 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

@robinkedia

This comment has been minimized.

Show comment
Hide comment
@robinkedia

robinkedia Sep 14, 2016

I already know the fix. But i should not be doing this. This should be a
permanent fix.

On Wednesday, 14 September 2016, MBN notifications@github.com wrote:

@vicb https://github.com/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


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#11590 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJ6mG2YaQ8M7zJA0AREkAtBFX2Km4cDHks5qp-YDgaJpZM4J8eFN
.

Cheers!

I already know the fix. But i should not be doing this. This should be a
permanent fix.

On Wednesday, 14 September 2016, MBN notifications@github.com wrote:

@vicb https://github.com/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


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#11590 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJ6mG2YaQ8M7zJA0AREkAtBFX2Km4cDHks5qp-YDgaJpZM4J8eFN
.

Cheers!

@kylecordes

This comment has been minimized.

Show comment
Hide comment
@kylecordes

kylecordes Sep 14, 2016

Although I'm not motivated enough to create a separate issue for the following feature request... I think it would be a very good idea if the small chunk of Angular's source code above was enhanced to fail safely and/or emit an appropriate warning if it is called with incorrect parameters, rather than crash with "uri.match is not a function". A few minutes of enhancement by the core team will probably save (estimating, not exaggerating) thousands of developers scattered across the world from having to track down this error over the next year.

Although I'm not motivated enough to create a separate issue for the following feature request... I think it would be a very good idea if the small chunk of Angular's source code above was enhanced to fail safely and/or emit an appropriate warning if it is called with incorrect parameters, rather than crash with "uri.match is not a function". A few minutes of enhancement by the core team will probably save (estimating, not exaggerating) thousands of developers scattered across the world from having to track down this error over the next year.

@vicb

This comment has been minimized.

Show comment
Hide comment
@vicb

vicb Sep 14, 2016

Member

@kylecordes if you can spend a few minutes trying to track when this function is called with something else than a string, the core team would very much appreciate.

Unfortunately random fixes fine without understanding the for cause seldom work.

Thanks

Member

vicb commented Sep 14, 2016

@kylecordes if you can spend a few minutes trying to track when this function is called with something else than a string, the core team would very much appreciate.

Unfortunately random fixes fine without understanding the for cause seldom work.

Thanks

@kylecordes

This comment has been minimized.

Show comment
Hide comment
@kylecordes

kylecordes Sep 14, 2016

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

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

@robwormald

This comment has been minimized.

Show comment
Hide comment
@robwormald

robwormald Sep 14, 2016

Member

If you're using Webpack, the better option is something like https://github.com/TheLarkInn/angular2-template-loader which plugs into your webpack pipeline and inlines the HTML/CSS in JiT mode. This has the added benefit of not having to use moduleId and being portable to AoT mode.

Member

robwormald commented Sep 14, 2016

If you're using Webpack, the better option is something like https://github.com/TheLarkInn/angular2-template-loader which plugs into your webpack pipeline and inlines the HTML/CSS in JiT mode. This has the added benefit of not having to use moduleId and being portable to AoT mode.

@kylecordes

This comment has been minimized.

Show comment
Hide comment
@kylecordes

kylecordes Sep 14, 2016

@robwormald Of course you are right, and I think that is perfectly compatible with what I wrote. There's going to be a pile of people walking into this community even faster once final ships, and not all of them are going to use the right loader the first time, so a more helpful error message will make some macroscopic number of people have an easier time making their way into Angular 2.

@robwormald Of course you are right, and I think that is perfectly compatible with what I wrote. There's going to be a pile of people walking into this community even faster once final ships, and not all of them are going to use the right loader the first time, so a more helpful error message will make some macroscopic number of people have an easier time making their way into Angular 2.

@vicb

This comment has been minimized.

Show comment
Hide comment
@vicb

vicb Sep 14, 2016

Member

@kylecordes really appreciate your details.

Could someone come up with a minimal repo & clear steps to reproduce.

We definitely need a better error message (which is why the suggested fix was probably not a good idea).

Member

vicb commented Sep 14, 2016

@kylecordes really appreciate your details.

Could someone come up with a minimal repo & clear steps to reproduce.

We definitely need a better error message (which is why the suggested fix was probably not a good idea).

@vicb vicb self-assigned this Sep 14, 2016

@iamjohnlong

This comment has been minimized.

Show comment
Hide comment
@iamjohnlong

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

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.

@kylecordes

This comment has been minimized.

Show comment
Hide comment
@kylecordes

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

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.

@robinkedia

This comment has been minimized.

Show comment
Hide comment
@robinkedia

robinkedia Sep 14, 2016

I do not have moduleId: module.id in my code anymore. The issue is still
there. Web pack dynamically still appends in bundled version.

On Thursday, 15 September 2016, John Long notifications@github.com wrote:

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.


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#11590 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJ6mGzCXhqcFcsxB5dBnViQEyrdFXGKqks5qqHOqgaJpZM4J8eFN
.

Cheers!

I do not have moduleId: module.id in my code anymore. The issue is still
there. Web pack dynamically still appends in bundled version.

On Thursday, 15 September 2016, John Long notifications@github.com wrote:

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.


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#11590 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJ6mGzCXhqcFcsxB5dBnViQEyrdFXGKqks5qqHOqgaJpZM4J8eFN
.

Cheers!

@vicb

This comment has been minimized.

Show comment
Hide comment
@vicb

vicb Sep 14, 2016

Member
  • Could someone please check if the update in the 2nd commit of #11617 fixes the issue,
  • @robinkedia could you please try to put a breakpoint in the code and figure out why the error is happening ?

Thanks for your help

Member

vicb commented Sep 14, 2016

  • Could someone please check if the update in the 2nd commit of #11617 fixes the issue,
  • @robinkedia could you please try to put a breakpoint in the code and figure out why the error is happening ?

Thanks for your help

@robinkedia

This comment has been minimized.

Show comment
Hide comment
@robinkedia

robinkedia Sep 15, 2016

@vicb - As @kylecordes mentioned, it's a number and .match and scheme is undefined.It throws up error. See attached.
scheme
split

@vicb - As @kylecordes mentioned, it's a number and .match and scheme is undefined.It throws up error. See attached.
scheme
split

@robinkedia

This comment has been minimized.

Show comment
Hide comment
@robinkedia

robinkedia Sep 15, 2016

@robwormald - I'm using angular2-template-loader but without awesome typscript loader. Awesome typscript loader throws bunch of other errors which I do not have time to fix.

module: {
loaders: [
{
test: /.ts$/,
loaders: ['ts', 'angular2-template-loader']
},
{
test: /.html$/,
loader: 'raw-loader',
exclude: [root('src/index.html')]
},
{
test: /.css$/,
loader: 'raw-loader'
}

]
},

@robwormald - I'm using angular2-template-loader but without awesome typscript loader. Awesome typscript loader throws bunch of other errors which I do not have time to fix.

module: {
loaders: [
{
test: /.ts$/,
loaders: ['ts', 'angular2-template-loader']
},
{
test: /.html$/,
loader: 'raw-loader',
exclude: [root('src/index.html')]
},
{
test: /.css$/,
loader: 'raw-loader'
}

]
},

vicb added a commit to vicb/angular that referenced this issue Sep 15, 2016

@alexeagle alexeagle closed this in bd4045b Sep 15, 2016

@karthikkavin

This comment has been minimized.

Show comment
Hide comment
@karthikkavin

karthikkavin Sep 16, 2016

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

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

@robinkedia

This comment has been minimized.

Show comment
Hide comment
@robinkedia

robinkedia Sep 18, 2016

Still not resolved... Can anyone share how to permanently fix this?

robinkedia commented Sep 18, 2016

Still not resolved... Can anyone share how to permanently fix this?

@felixfbecker

This comment has been minimized.

Show comment
Hide comment
@felixfbecker

felixfbecker Sep 18, 2016

Instead of module.id you could use __filename

Instead of module.id you could use __filename

@bastienJS

This comment has been minimized.

Show comment
Hide comment
@bastienJS

bastienJS Sep 19, 2016

When I removed the module.id from all my angular 2 RC4 created components in my new angular 2 RC7 cli created app the error message is gone :-)

When I removed the module.id from all my angular 2 RC4 created components in my new angular 2 RC7 cli created app the error message is gone :-)

@mpeguero

This comment has been minimized.

Show comment
Hide comment
@mpeguero

mpeguero Feb 24, 2017

This works for me:
moduleId: module.id.toString(),

The property is expecting a string. I just converted to string and is solve the compiler error.

This works for me:
moduleId: module.id.toString(),

The property is expecting a string. I just converted to string and is solve the compiler error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment