Angular material is not working on master branch (universal + material)

[thecodr]

Angular material seems to be broken on the master branch. There are other issues mentioning about universal in production and is this still relevant today @qdouble ? We are thinking of using this template in production and angular material is our high priority.

[ShankarSumanth]

I think this workaround should fix the issue. I have not tried this solution myself.

@angular2/material/308

[qdouble]

@thecodr material doesn't currently work with universal out of the box.... the hack in the link @ShankarSumanth posted is for the previous version of Universal before they brought it into the core repo.

They say they will make material compatible with universal soon, so there's nothing I really need to do, it should simply work on a future update of material. I suppose that will be after this is merged: angular/components#4251

[thecodr]

@qdouble angular/components#4251 is merged to master and I have tested locally. But Angular material is still not working in the current template. I am trying to figure out the root cause but want to let you know.

[qdouble]

@thecodr yeah, it appears they just haven't fully fixed material to work with universal yet...other than possibly using a different imports on the server than the browser, it shouldn't require much more than that if the problem is actually fixed on their end

[thecodr]

@qdouble Is there anything we can do on our side ? I am happy to help. This is one of the best starter pack available in terms of angular universal and unfortunately, dependency on another package is spoiling the game :(

[qdouble]

@thecodr The problem with trying to hack it, is every time there is an update to material or angular core, the hack may stop working as you'd be trying to manipulate private apis. I tried to do that early on, but gave up on that, because the project will just keep breaking or become non-upgradable and I don't see the point of using it in production if it's that unstable.

If you see a workable solution in a different project, I can see about implementing it in this project, but for now, I'll just wait for them to solve the problem.

[qdouble]

@thecodr I just tested adding this from what I saw in the material repo thread: 8878c75

seems it will make material components at least render in universal... but it seems they'd have to do some additional updates to make it work fully without other patches

[thecodr]

@qdouble I agree with you regarding the hacks. I pulled your changes and tested. It does look like Angular Material has to catch up a lot!!!!

[alber70g]

Hi, I just stumbled upon this awesome project. The only think is that material isn't working. Of course the issue is already surfaced, but is there any chance it'll be resolved in the near future? Or is there a quick-fix for this?

Or might it be better to use the non-universal?

[qdouble]

@alber70g as far as something production ready, the Angular team says they will fix the compatibility issue "soon," so that can mean next week or several months from now. If you need to launch your project right away and have it use universal, you may want to consider using the bootstrap branch or just not using the material module.

Me personally, I'm just delivering my project with Material using a normal AOT build and will just switch over to Universal as soon as it's compatible.

[alber70g]

@qdouble Thank you for your advice. I'm not in desperate need for Universal, but I figured it'd be nice to start with. I've already installed the non-universal branch, and that one looks fine.
There's only one thing that I stumbled upon. When I go to localhost:3000 the Logout to 192.xxx.xxx.xxx:3000/logout gives a CORS error. But when I go straight to that URL (192.xxx.xxx.xxx:3000) I get Invalid Host header.

[qdouble]

@alber70g if you plan to use universal in the future, it would be better to just use the universal branch and just just run the regular build or compile command instead of the universal command. That way once the material issue is fixed, you'd just have to change build commands.

The other issue is just because you're on the devServer, it should work fine on a normal server (or the prodserver).

[qdouble]

@alber70g in dev, you can use the reverse proxy option here if you need it to contact your actual api: https://github.com/qdouble/angular-webpack2-starter/blob/master/constants.js#L18-L21

[alber70g]

I feel like I'm going off topic from the original issue here. But it seems that the /logout is an absolute URL instead of relative due to the inclusion of ${HOST} in http://${HOST}/logout. Shouldn't it be relative, or at least using the location.hostname?

[qdouble]

@alber70g it'd be dependent on your project, in my real project, the back office api is on a different port, so a relative URL wouldn't work... it's more so just an example, you can point it to where it should go for your actual project