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

[julienR2]

Hi !
I'm using angular4 with serverside rendering and material2 together. They've improve quite a lot the compatibility, and I know run in few and few problems with it.
Few tricks are still needed to use it like:

• faking navigator and document on server side
  webpack.server.config

module: {
    rules: [
      {
        test: /@angular(\\|\/)material/,
        loader: 'imports-loader',
        options: {
          window: '>global',
          'CSS': '>null',
          navigator: '>{get userAgent(){ return \'Chrome\'; }}',
          document: '>global.document'
        }
      }
    ]
  }

• NOOP the ObserveContent relying on MutationObserver only available on Browser
  __workaround

import { ObserveContent } from '@angular/material';
ObserveContent.prototype.ngAfterContentInit = function () {}

I hope this help !

[qdouble]

@julienR2 what file are you putting the ObserveContent stuff on?

[julienR2]

Oups sorry wasn't that clear indeed.
I include the workaround in the main.server.ts

[qdouble]

@julienR2 could you show how your version of that file?

[julienR2]

Of course. However I have to specify I'm not using your repo, I landed on this issue looking for materials2 info, and though these info it could help.
But checking your repo it seems to be quite similar so it should possible to reproduce (I used https://github.com/FrozenPandaz/ng-universal-demo/ to migrate to angular 4)

Anyway here is the main.server.ts

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import 'rxjs/Rx';
import './__workaround.server.ts'

import * as path from 'path';
import * as express from 'express';
import * as bodyParser from 'body-parser';
import * as cookieParser from 'cookie-parser';

import { enableProdMode } from '@angular/core';
import { platformServer, renderModuleFactory } from '@angular/platform-server';

import { ServerAppModule } from './app/server.module';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { routes } from './server.routes';

if (process.env.NODE_ENV === 'production') {
  Raven.config(process.env.SENTRY_API_KEY).install();
}

enableProdMode();

const app = express();
const port = process.env.PORT || 3000;
const baseUrl = `http://0.0.0.0:${port}`;

app.engine('html', ngExpressEngine({
  bootstrap: ServerAppModule
}));

app.set('port', port);
app.set('view engine', 'html');
app.set('views', 'src');
app.set('json spaces', 2);

app.use(cookieParser());
app.use(bodyParser.json());

// Serve static files
app.use('/assets', express.static('src/assets', {maxAge: 30}));
app.use('/', express.static('dist', {index: false}));

function ngApp(req, res) {
  res.render('../dist/index', {
    req: req,
    res: res,
    cookies: req.cookies
  });
}

/**
 * use universal for specific routes
 */
routes.forEach(route => {
  app.get(`/${route.url}`, route.guard, ngApp);
  if (!route.index) {
    app.get(`/${route.url}/*`, route.guard, ngApp);
  }
});

app.listen(port, () => {
  console.log(`Listening at ${baseUrl}`);
});

with the workaround included linde 4 that only contained

import { ObserveContent } from '@angular/material';

ObserveContent.prototype.ngAfterContentInit = function () {}

[qdouble]

@julienR2 thanks. yes, the projects are similar as far as the server implementation... with that patch, I notice that some material elements work just fine, but others give this message on the console:

ERROR { Error: Uncaught (in promise): TypeError: Cannot read property 'createElement' of undefined
TypeError: Cannot read property 'createElement' of undefined

do you experience that as well? And what version of material are you using?

[julienR2]

I'm using the last version of material, 2.0.0-beta.5.
On which components do you experience this ? The last changes should have fixed most of these problems. (I only get on error using MdTabs for now)

[qdouble]

@julienR2 I'm experiencing it even with MdInput. I just tested it out on the repo you're using and it gives the same results....(it shows the error in the server console, not the browser, so the input doesn't render until after the page is fully loaded).

I did the webpack patch here: https://github.com/qdouble/ng-universal-demo-material-test/blob/master/webpack/webpack.server.js
and the server patch here: https://github.com/qdouble/ng-universal-demo-material-test/blob/master/src/main.server.ts
and here:
https://github.com/qdouble/ng-universal-demo-material-test/blob/master/src/__workaround.server.ts

did I overlook anything or set something wrong?

[julienR2]

Arg, I'm not using MdInput.. And Since they refactored it few release ago it probably use createElement now.. Still some trouble so..
Sorry for the noise and the time..
I'll add mdInput to the list of components needing a refactor (with mdTab) and open an issue on the subject.

[qdouble]

@julienR2 np, thanks for looking into it, keep me updated if you encounter any more workarounds...

hopefully the material team will start catching up on these compatibility issues soon

[julienR2]

I will 👍
Yes I hope so too.. Fingers crossed.

[NickvdMeij]

I'm currently using @angular/material version 2.0.0-beta.7 in combination with AOT and Universal and it works perfectly, no error with the production build or any AOT/JIT dev or production builds

[IAMtheIAM]

Hey you should make a branch using Materialize - its way better than angular material. Stable, easy to use, many features, only jQuery dependency but thats easy with webpack ProvidePlugin.

[nhutcorp]

By using pure Angular & Material Design on your project, you can create a performance app.
See this repo https://github.com/nhutcorp/angular-webpack2-starter

[qdouble]

material and universal should work together fine now