Universal: Parse5DomAdapter#getCookie error

[cyrilletuzi]

• I'm submitting a ...
• [X] bug report
• What modules are related to this Issue?
• [X] universal
• What is the current behavior?
  My app works fine with Universal (2.0.5) without Material. But with Material (alpha.8-2), I get this error :

Error: This method is not implemented in Parse5DomAdapter: Parse5DomAdapter#getCookie
    at _notImplemented (/app/node_modules/angular2-platform-node/parse5-adapter.js:22:12)
    at Parse5DomAdapter.getCookie (/app/node_modules/angular2-platform-node/parse5-adapter.js:625:15)
    at CookieXSRFStrategy.configureRequest (/app/node_modules/@angular/http/bundles/http.umd.js:1597:92)

• Please tell us about your environment:
• Angular version: 2.0.0
• Universal 2.0.5
• Material alpha.8-2
• Browser: [all]
• Language: [TypeScript 2.0.2 ]
• Platform: [ NodeJs]

cc @gdi2290

[PatrickJS]

make sure in the node entry file that you don't include HttpModule

[cyrilletuzi]

My Universal app module is not including HttpModule, just UniversalModule, as in Universal starter. But maybe Material modules do it.

import { NgModule } from '@angular/core';
import { UniversalModule } from 'angular2-universal';

import './rxjs-extensions';

import { OVERLAY_PROVIDERS }            from '@angular2-material/core';
import { MdIconModule, MdIconRegistry } from '@angular2-material/icon';
import { MdMenuModule }                 from '@angular2-material/menu';
import { MdToolbarModule }              from '@angular2-material/toolbar';

import { appRouterModule }  from './app.routes';
import { MoviesModule }     from './movies/index';
import { AccountModule }    from './account/index';
import { AppComponent }     from './app.component';
import { AppMenuComponent } from './shared/index';

@NgModule({
  imports:      [
    UniversalModule,
    MdIconModule,
    MdMenuModule,
    MdToolbarModule,
    appRouterModule,
    MoviesModule,
    AccountModule
  ],
  declarations: [ AppComponent, AppMenuComponent ],
  providers: [ OVERLAY_PROVIDERS, MdIconRegistry ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

[PatrickJS]

ok the problem is with MdIconModule

[PatrickJS]

it seems like the icon module uses http to fetch icons for the MdIconRegistry

@NgModule({
  imports: [HttpModule],
  exports: [MdIcon],
  declarations: [MdIcon],
})
export class MdIconModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MdIconModule,
      providers: [MdIconRegistry],
    };
  }
}

  /**
   * The CSS class to apply when an <md-icon> component has no icon name, url, or font specified.
   * The default 'material-icons' value assumes that the material icon font has been loaded as
   * described at http://google.github.io/material-design-icons/#icon-font-for-the-web
   */
  private _defaultFontSetClass = 'material-icons';

  constructor(private _http: Http) {}

  /** Registers an icon by URL in the default namespace. */
  addSvgIcon(iconName: string, url: string): this {
    return this.addSvgIconInNamespace('', iconName, url);
  }

[cyrilletuzi]

@gdi2290 yep, I tried without MdIcon and it's working.

[cyrilletuzi]

@gdi2290 Tried to only use local assets (CSS, font and SVG), but still the same error. Seems weird to me for such a module to do http requests, as an application will need to work offline too.

Also tried to remove MdIconRegistry from my app module providers, but it seems to be required.

[cyrilletuzi]

Works now by loading UniversalModule last (so it can override Http providers of MdIcon). I think it's an important point that should be mentioned and emphasized in docs and reflected in universal-starter.

[DoubleExposure]

Why does UniversalModule have to be loaded last? It works this way but seems slower.
Can someone explain? Thanks

[MarkPieszak]

Well it depends on what Modules you're using, usually it can be first, but depending on if other Modules are overriding Http as well, sometimes you need to re-position it. I can't remember why Material is using Http, but in Universal we override it because we need to keep track of all requests, so we can determine when the App is stable, to then serialize it.

[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._}