Components: bug(rc5 and alpha7)url_resolver.js:238Uncaught TypeError: uri.match is not a function

[qdouble]

I'm refiling for this issue: https://github.com/angular/material2/issues/963 as it was not resolved in alpha 7. I've tested it on two fresh seed projects and the error still occurs, so it should be a common problem with Webpack at least, not sure if this shows up in a SystemJS build or not.

[FoodBuster]

I second this. Having the same problem, using the new angular-cli webpack release.

[qdouble]

This seems to be related to how it's dealing with the moduleId, if you comment out the moduleId of the components, they compile without error.

[qdouble]

It appears this pull request will fix this issue https://github.com/angular/angular/pull/10595/commits/f54f9efc0e70eb1c71ac8eb6a8ed690f1e7f09f9. You guys can close this if you want to as it appears to be an angular compiler issue and not specific to material

[FoodBuster]

qdouble, that pull request does fix the "TypeError: uri.match is not a function" problem, but results in another error (BaseException) for me with the following message:

Template parse errors:↵Can't bind to 'md-ripple-trigger' since it isn't a known property of 'div'. ("*ngIf="isRippleEnabled()" class="md-button-ripple" [class.md-button-ripple-round]="isRoundButton()" [ERROR ->][md-ripple-trigger]="getHostElement()" [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)"): MdButton@0:180↵Can't bind to 'md-ripple-color' since it isn't a known property of 'div'. ("ton-ripple" [class.md-button-ripple-round]="isRoundButton()" [md-ripple-trigger]="getHostElement()" [ERROR ->][md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''" md-ripple-background-color="rgb"): MdButton@0:219

Not sure if it's related, and if it's not, happy to open a new issue.

[qdouble]

@FoodBuster that's an unrelated error, it saying 'md-ripple-trigger' isn't defined on the MdButton directive/component.

[FoodBuster]

@qdouble Thanks, got it working.

[jelbourn]

I have released an alpha.7-2 that _should_ fix this.

[aminebizid]

Thanks

[neclepsio]

Maybe I'm doing something wrong, but simply upgrading to alpha.7-2 doesn't fix for me.

[qdouble]

@neclepsio it's possible another component or 3rd party plugin in your application has a moduleId.

[neclepsio]

@qdouble I don't think so. I'm just using BrowserModule, FormsModule and several Ms...Module. How can I check? Thank you.

[neclepsio]

@qdouble You were right! My own app.component had a moduleId!

[some1awesome]

@jelbourn Your fix in alpha.7-2 works for me, but it appears the problem was reintroduced somewhere before alpha.7-9. Can you try to fix it in again?

[qdouble]

@zackporter92 this caused it to pop back up: https://github.com/angular/material2/pull/1101

[some1awesome]

@qdouble interesting. So we should just stick to 7-2 if we have that problem?

[qdouble]

For temporary workaround, you can put this as a preloader in your webpack config, just npm install string-replace-loader

preLoaders: [
      {
        test: /.js$/,
        loader: 'string-replace-loader',
        query: {
          search: 'moduleId: module.id,',
          replace: '',
          flags: 'g'
        }
      },

or on @angular/compiler/src/url_resolver.js line 238, you can change
return uri.match(_splitRe); to return uri.toString().match(_splitRe);

[DerejeKitaw]

I get same error. I am using final release Angular2.
"Uncaught TypeError: uri.match is not a function"

It work when I remove "moduleId: module.id" from contact component.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}