Universal: After upgrade to angular 5 components that are only part of browser route still being counted as server and produce errors

[yosigolan]

Note: for support questions, please use one of these channels: https://github.com/angular/universal/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports. Also, Preboot has moved to https://github.com/angular/preboot - please make preboot-related issues there.

• I'm submitting a ...

- [x ] bug report
- [ ] feature request
- [ ] support request => Please do not submit support request here, see note at the top of this template.

• What modules are related to this Issue?

- [ ] aspnetcore-engine
- [x ] express-engine
- [ ] hapi-engine

Hello.
i have a project with many modules and components. i am using lazy loaded modules in my project and for universal i am using the ModuleMapLoaderModule.
some of the routes in my project are relevant to seo and also users might navigate to them directly however some routes are user specific routes and therefore not relevant to seo. the routes which are user specific include complicated components with many 3rd parties which does not support angular universal so in my project i have different root modules for the server side and browser side (as shown here: "https://github.com/samvloeberghs/ng-universal-demo/tree/master/src/app") with different routes for each one of them. in the server module i only include the routes which are relevant to seo and for all other routes i display some general "please wait" route. the browser module include all routes off course.
this project works great in angular 4 how ever after upgrading to angular 5 suddenly i am receiving errors when i start the node server regarding the components which are not part of the server routes. i receive the "window is not defined" errors and so on from the 3rd parties. the error appears even before i navigate to the any route (as soon as i start the node server). it seems that when running the node server it tries to run or read all the components in the project and it encounter the problematic components.
i cant use the regular approach of isBrowser because i am using many 3rd parties and it will force me to make too many changes in the user specific components. since these components are not relevant to server i just want to ignore then i server side rendering.

is this is a change in angular 5 or that this is a bug (that components which are not relevant to server side rendering raise issues)?
is there a way to work as in angular 4 where these components are not relevant until the app is running in the browser?

• Please tell us about your environment:

• Angular version: 5.0

• Browser: [all ]
• Language: [all ]
• OS: [all ]
• Platform: [NodeJs]

[yakirgot]

Hi, I am seeing the same behavior. Any news regarding this?

[CaerusKaru]

This may be better suited for the main angular repo since it sounds like it’s a compiler issue. Either way, you’ll need to provide a more detailed minimal reproduction repo since the one you linked doesn’t adequately detail your issue.

[yosigolan]

Thank you for your answer @CaerusKaru .
i dont think its related to angular compiler since compilation goes smooth. the errors appear when starting the node server (even before navigation to the pages). i will post it on the angular repo anyway and i will prepare a minimal reproduction as you suggest. i will update once its ready.
yosi

[yosigolan]

Hey @CaerusKaru
as you requested i prepared a project reproducing the bug. the project can be found here: "https://github.com/yosigolan/ng5-universal-refernce-bug"
there are 2 packages files. the regular packages file which currently holds angular 4 references and another packages file called: packageng5.json which holds angular 5 references.

in order to reproduce the bug do as follows:

1. clone the project.
2. run "npm install". now you have the version with angular 4 which works great.
3. run "npm run build-server"
4. run "node server"
5. the app is running in server mode. browse to http://localhost:3000 and you will see it
6. the component with the problematic 3rd party (that does not support universal) in in the route http://localhost:3000/browser-only . browse to it to see it runs
7. now that you saw that it runs in angular 4 delete the node modules and change the angular 5 packages file (packageng5.json) name to pacakge.json
8. run "npm install" again to receive the angular 5 packages
9. run "npm run build-server"
10. run "node server" - you will see the bug

short explanation on whats happening:
i have a module with some component that includes an import to a 3rd party that does not support angular universal (dragula). this module is loaded in lazy mode. since it is not supported in universal, i have server module with its own routes which does not include this module. in addition, i have a browser module with its own routes which do include the module. as i understand, in server mode the problematic module should be ignored as happening in angular 4. in angular 5 it is not ignored...
please tell me if you think i should publish it in the angular repo as well.
Thanks

[naveedahmed1]

@yakirgot take a look at https://github.com/angular/angular-cli/issues/8749 and see if it helps.

[yosigolan]

Thanks @naveedahmed1 ! i will check it.

[yosigolan]

Thanks to @naveedahmed1 i found the solution.
it seems that there was a change in angular 5 that the compiler builds all the project files regardless if they have some root from some module in the build. therefore, even if you have a specific server routing module with less modules than in your browser routing module, all the modules from the browser routing module will be counted for the server build as well (and then if they include unsupported universal modules you will get errors). the solution in angular 5 is to exclude the problematic modules in the tsconfig.server.json file as follows:
"exclude": [
"test.ts",
"/.spec.ts",
"main.browser.ts",
"app/app.browser.module.ts",
"app/app.browser.routing.module.ts",
"app/browser-only-module//.*"
],

Enjoy

[tomschreck]

@yosigolan I've tried adding modules to the exclude section of tsconfig.server.json, however, the server build is ignoring the exclusion and I am still receiving 'Unexpected token import' error. I'm using Angular CLI version 1.7.3 and Angular version 5.2.4.

Do you know if by excluding the module file (services.module.ts) the build process will also exclude all files referenced therein?

Any ideas on what I'm doing wrong? I've tried every variation of pathing and globs for the target module to exclude.

Thanks for your time.

[yosigolan]

Hey @tomschreck . i cant tell.
please show your tsconfig.server.json file content and your angular-cli.json content and i will have a look.
Yosi

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