Skip to content

Support Angular Universal (with CI job to test all components) #308

Closed
Closed
Support Angular Universal (with CI job to test all components)#308
Assignees
jelbourn
Labels
P2The issue is important to a large percentage of users, with a workaroundarea: dev-infraIssue related to internal project infrastructurefeatureLabel used to distinguish feature request from other issues

Description

@jeffbcross
jeffbcross
opened on Apr 14, 2016

There's no automated verification that all material components are safe to use in node, i.e. pre-rendering with Angular Universal. See #306.

Proposal

Create a step in the CI process to pre-compile a single root component which contains an instance of each material component. Use one of the Angular Universal pre-render libraries to build: https://github.com/angular/universal/tree/master/modules

Note: I'm planning to submit a Broccoli plugin to that repo which would work well with Angular CLI.

I'm willing to help set this up.

Activity

  1. jelbourn
    changed the title [-]test: add CI step to test each component in pre-render build step with Angular Universal[/-] [+]Add CI job to test all components in pre-render build step with Angular Universal[/+] on Apr 14, 2016
  2. jelbourn
    added
    area: dev-infraIssue related to internal project infrastructure
    on Apr 14, 2016
  3. jelbourn
    added this to the alpha.5 milestone on Apr 14, 2016
  4. jelbourn
    added
    P2The issue is important to a large percentage of users, with a workaround
    featureLabel used to distinguish feature request from other issues
    on Apr 14, 2016
  5. jelbourn
    modified the milestones: alpha.6, alpha.5 on May 19, 2016
  6. jelbourn
    assigned
    kara
    on May 23, 2016
  7. jelbourn
    assigned
    jelbourn
    and unassigned
    kara
    on Jun 27, 2016
  8. jelbourn
    modified the milestones: alpha.6, alpha.7 on Jun 27, 2016

  9. cyrilletuzi commented on Sep 14, 2016

    @cyrilletuzi
    cyrilletuzi
    on Sep 14, 2016
    Contributor

    To report one problem unsolved in #774 and #883, Material is not working with Universal for now because of many reference to window in Material umd bundles.

    As proposed by @orangesoup, adding var window = undefined; in Material umd bundles do the trick for now, and then Universal and Material work very well together in my test app.

    I looked at Material TypeScript source files, and found very few direct reference to window (and it's not the same as in umd bundles). So I think it is just a problem with the umd packaging system (maybe configured to target browsers). It's beyond my skills, but I think it's just a bundling option to change, and Material would already work with Universal.

  10. 131 remaining items

  11. galtalmor commented on Sep 15, 2017

    @galtalmor
    galtalmor
    on Sep 15, 2017

    @BlankHrt see this comment for a solution that works around the issue.

  12. glemiere commented on Sep 16, 2017

    @glemiere
    glemiere
    on Sep 16, 2017

    Same problem than @BlankHrt , hammerjs seems to have nothing to do with this error. I didn't import it anywhere, but I have the exact same error :
    /dist/ngfactory/node_modules/@angular/material/typings/index.ngfactory.ts:9
    import * as i0 from '@angular/core';
    ^^^^^^

    SyntaxError: Unexpected token import

    Any idea?

  13. julienR2 commented on Sep 16, 2017

    @julienR2
    julienR2
    on Sep 16, 2017

    Hi ! I would need some info to help you out.

    • Do you have this error building in AOT ? (seeing the ngfactory folder I guess so). Does it work in JIT ?
    • Does it happen for any module from material you would use ? Or just the ToolBar as it happended also in some comments above
    • Can you share us you tsconfig ?

    Hope we can figure out what's going on !

  14. tomerBZ commented on Sep 16, 2017

    @tomerBZ
    tomerBZ
    on Sep 16, 2017

    @glemiere I am having the exact same issue here:

    import * as i0 from '@angular/core';
    ^^^^^^

    SyntaxError: Unexpected token import

    I didn't import HammerJs anywhere.

  15. glemiere commented on Sep 17, 2017

    @glemiere
    glemiere
    on Sep 17, 2017

    Hey guys!
    For some reasons this repos works with material design, SSR and AOT. You can see it in action right here.

    I think the problem is coming from a misconfiguration of the server side rendering in my (our) setup(s), because I've been able to fix this issue by double checking the official instructions.

    I'm going to use this repo for my own needs, just to earn some time, it's a pretty good seed. Thanks to @JayChase for his answer on my stackoverflow post

  16. atmman9001 commented on Oct 25, 2017

    @atmman9001
    atmman9001
    on Oct 25, 2017

    Hey guys.

    I need to render matDialog on the server side. I see that it's impossible for now because @angular/material uses the document object for the dialogs rendering.

    Could you please tell me will you add possibility to render dialogs on the backend?

    If yes please tell me do you have an idea when this changes will be released?

  17. jelbourn commented on Oct 25, 2017

    @jelbourn
    jelbourn
    on Oct 25, 2017
    Contributor

    We don't have plans to support overlay-based components rendering on the server at this time (dialogs, menus, etc.). For the vast majority of cases, these components are only rendered in response to user interaction

  18. atmman9001 commented on Oct 25, 2017

    @atmman9001
    atmman9001
    on Oct 25, 2017 via email

  19. longhoang2984 commented on Nov 6, 2017

    @longhoang2984
    longhoang2984
    on Nov 6, 2017

    How about the error

    Users/hoangcuulong/website-cli-beecow/dist/server.js:218913
    __extends(LoginFormModel, _super);
    ^

ReferenceError: __extends is not defined
    at /Users/hoangcuulong/website-cli-beecow/dist/server.js:218913:5
    at Object.../../../../../src/app/_models/login.model.ts (/Users/hoangcuulong/website-cli-beecow/dist/server.js:218920:2)
    at __webpack_require__ (/Users/hoangcuulong/website-cli-beecow/dist/server.js:164408:30)
    at Object.../../../../../src/app/_models/index.ts (/Users/hoangcuulong/website-cli-beecow/dist/server.js:218497:10)
    at __webpack_require__ (/Users/hoangcuulong/website-cli-beecow/dist/server.js:164408:30)
    at Object.../../../../../src/app/_shared/utils/beecow.utils.ts (/Users/hoangcuulong/website-cli-beecow/dist/server.js:224130:15)
    at __webpack_require__ (/Users/hoangcuulong/website-cli-beecow/dist/server.js:164408:30)
    at Object.../../../../../src/app/market/popup-location/popup-location.component.ts (/Users/hoangcuulong/website-cli-beecow/dist/server.js:229039:22)
    at __webpack_require__ (/Users/hoangcuulong/website-cli-beecow/dist/server.js:164408:30)
    at Object.../../../../../src/$$_gendir/app/market/popup-location/popup-location.component.ngfactory.ts (/Users/hoangcuulong/website-cli-beecow/dist/server.js:177242:10)

    While I extends two Model?

  20. damienwebdev commented on Nov 23, 2017

    @damienwebdev
    damienwebdev
    on Nov 23, 2017

    @jelbourn In reference to MatDialog, MatMenu, and render-only-on-interaction components, how are we supposed to properly handle this?

    I couldn't quickly find any documentation on SSR with angular material, I checked here: https://material.angular.io/guides as well as on the component itself, https://material.angular.io/components/menu/overview

    Additionally, in the given example, https://material.angular.io/components/menu/examples mat-menu fails on universal.

    If you could give some guidance on what we're supposed to do, I'd happily write the guide and submit a PR.

  21. fdambrosio commented on Nov 24, 2017

    @fdambrosio
    fdambrosio
    on Nov 24, 2017

    I agree with @damienwebdev
    there's no docs about SSR and Material

  22. jelbourn commented on Nov 29, 2017

    @jelbourn
    jelbourn
    on Nov 29, 2017
    Contributor

    Closing this now since everything should mostly work with SRR this this point in time. Individual bugs can be tracked via standalone issues.

  23. jelbourn
    closed this as completedon Nov 29, 2017

  24. angular-automatic-lock-bot commented on Sep 8, 2019

    @angular-automatic-lock-bot
    angular-automatic-lock-botbot
    on Sep 8, 2019

    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.

  25. angular-automatic-lock-bot
    locked and limited conversation to collaborators on Sep 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2The issue is important to a large percentage of users, with a workaroundarea: dev-infraIssue related to internal project infrastructurefeatureLabel used to distinguish feature request from other issues

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions