Scully: Could not connect to server

[oleosjo]

🐞 bug report

Description

Tried running scully on an angular 9 app, got an error.

🔬 Minimal Reproduction

Run scully

💻Your Environment

Angular CLI: 9.0.0-rc.6
Node: 12.8.1
OS: darwin x64

🔥 Exception or Error

started servers in background
Could not connect to server

[jorgeucano]

Can you give me more info?
Can you create a repo for try? i need more description about your environment!

[isaacplmann]

I get the same error in the scully branch of this repo:
https://github.com/isaacplmann/nx-monorepo-sample/tree/scully

I'm trying to get scully working in an nx monorepo, so maybe there's some hard-coded path that is expecting a default Angular CLI set up?

yarn run v1.19.1
$ scully
Cleaned up /Users/isaac/Documents/code/nx-monorepo-sample/dist/static/ folder.
 ☺   new Angular build imported
started servers in background
Could not connect to server
✨  Done in 17.08s.

[isaacplmann]

Could be related to lazy-loading routes with tsconfig path aliases.

yarn scully:serve gives this error:

$ scully serve
starting static server...
Could not start Scully serve Error: Scully could not traverse routes

And AppModule loads its routes like this:

  {
    path: 'home',
    loadChildren: () => import('@ng-cli-app/home/ui').then(m => m.HomeUiModule),
    canActivate: [AuthGuard]
  },

[Splaktar]

Possibly related to https://github.com/scullyio/scully/issues/31 as I saw this first before I saw the extra info from the errors in that issue.

Update: They appear to be separate issues as that issue isn't seeing any problems with reading the routes.

[isaacplmann]

Oops, I missed the first line of getting started that says you need Angular 9.x. I'll upgrade and report back

[isaacplmann]

I've updated that repo to angular 9 and am still getting the same error. I think guess is having trouble with the lazy loaded routes.

I added a console.log to node_modules/@scullyio/scully/node_modules/guess-parser/dist/guess-parser/index.js

var collectRoutingModules = function (root, registry, result, parentPath, currentPath) {
    if (parentPath === void 0) { parentPath = root; }
    if (currentPath === void 0) { currentPath = ''; }
    console.log('root', root);
    var declaration = registry[root];
    var process = function (r) {
        if (r.module) {

And modified node_modules/@scullyio/scully/bin/routerPlugins/traverseAppRoutesPlugin.js

exports.traverseAppRoutes = async (appRootFolder = config_1.scullyConfig.projectRoot) => {
    try {
        const routes = guess_parser_1.parseAngularRoutes(appRootFolder).map(r => r.path);
        return routes;
    }
    catch (e) {
        console.log('e',e)
        throw new Error('Scully could not traverse routes');
    }
};

And this is what shows up when I run yarn scully:serve:

root /Users/isaac/Documents/code/nx-monorepo-sample/apps/ng-cli-app/src/app/app.module.ts
root /Users/isaac/Documents/code/nx-monorepo-sample/apps/ng-cli-app/src/app/@ng-cli-app/home/ui.ts
e TypeError: Cannot read property 'eagerRoutes' of undefined
    at collectRoutingModules (/Users/isaac/Documents/code/nx-monorepo-sample/node_modules/@scullyio/scully/node_modules/guess-parser/dist/guess-parser/index.js:464:17)
    at processLazyRoute (/Users/isaac/Documents/code/nx-monorepo-sample/node_modules/@scullyio/scully/node_modules/guess-parser/dist/guess-parser/index.js:462:9)
    at Array.forEach (<anonymous>)

[isaacplmann]

This line /Users/isaac/Documents/code/nx-monorepo-sample/apps/ng-cli-app/src/app/@ng-cli-app/home/ui.ts is obviously not a valid file path.

[willi84]

could be a problem with host (like at angular cli). I had the same. I created a feature request for this:
https://github.com/scullyio/scully/issues/87

If you try to manually change the host here in your node_modules, does it work then? https://github.com/scullyio/scully/blob/8ce6c13c06e07f0082a2d75936f232e03efb3a98/scully/utils/waitForServerToBeAvailable.ts#L13

Do you have an alternative host then localhost on your machine?

[timdeschryver]

I had the same issue, I thought the problem was the port 1864 but after some debugging this is what I encountered.

It seems like npm run scully (sometimes?) is giving the following error, and because of this some spawned processes are not being shut down correctly and will stay alive.

C:\Users\tdeschryver\dev\throw-aways\bloggy\node_modules\.bin\scully:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at Module._compile (internal/modules/cjs/loader.js:872:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)

lala at Function.Module.runMain (internal/modules/cjs/loader.js:999:10)
    at internal/main/run_main_module.js:17:11

The next time I run scully the express servers are not spawned because the port is already in use. I would have expected this error to be caught by https://github.com/scullyio/scully/blob/master/scully/utils/staticServer.ts#L64, but this is not the case. By listening to errors, the error showed me that the port was already in use.

 ☺   new Angular build imported
Error: listen EADDRINUSE: address already in use 
    at Server.setupListenHandle [as _listen2] (net.js:1228:14)
    at listenInCluster (net.js:1276:12)
    at Server.listen (net.js:1364:7)
    at Function.listen (C:\Users\tdeschryver\dev\throw-aways\bloggy\node_modules\express\lib\application.js:618:24)         at Object.staticServer (C:\Users\tdeschryver\dev\throw-aways\bloggy\node_modules\@scullyio\scully\bin\utils\staticServer.js:31:45)
    at processTicksAndRejections (internal/process/task_queues.js:85:5) {
  code: 'EADDRINUSE',
  errno: 'EADDRINUSE',
  syscall: 'listen',
  address: '::',

After I modified the port to another port (in the bin files) I got it up and running again. After a while I had to repeat this because I was in the same scenario.

I think not swallowing these errors and logging them might be useful,

For spawned processes:

const child = spawn('node', [join(scullyConfig.homeFolder, './node_modules/.bin/scully'), 'serve'], {
          detached: true,
        })

child.stderr.on('data', err => {
  console.log(err.toString())
})

For express:

angularServerInstance = angularDistServer.listen(scullyConfig.appPort, x => {
      log(
        `Angular distribution server started on "${yellow(
          `http://localhost:${scullyConfig.appPort}/`
        )}" `
      );
    }).on('error', err => {
        console.log(err)
    });

Environment:

• Windows 10
• Node.js v12.9.1
• Angular v9 rc6

[xmlking]

@isaacplmann @vsavkin here is a workaround for nx monorepo compatibility issue
https://github.com/xmlking/yeti/commit/7daffcd02de62a69686f053c79d30660633233d3
may be @mgechev can help making guess-parser compatible with nx monorepos

[mgechev]

@isaacplmann yes, the Guess.js parser ~does~ did not know how to handle path mappings currently.

@chrisguttandin did some work towards support for Nx monorepos for his angular-prerender.

[chrisguttandin]

Hi everyone, the changes that I made to guess-parser a while ago to support nx monorepos were related to that line: https://github.com/guess-js/guess/blob/master/packages/guess-parser/src/angular/index.ts#L50.

It is using TypeScript's own module resolution and should therefore respect path prefixes like @my-app. We also added a library with a prefix to the test fixture which is why I'm optimistic that it still works.

Right now I don't know of any issues related to nx monorepos when using angular-prerender. But that does of course not guarantee that there are none. :-)

I hope this somehow helps.

[SanderElias]

@mgechev is there a new version of guess-parser released that includes this fix?

[mgechev]

@SanderElias yes, 0.4.12 includes the fix.

[mgechev]

I opened a PR to handle path mappings in lazy routes here. The integration test is from the repro that @isaacplmann provided.

Feel free to check this out and tell me if it solves the main problem.

[stewones]

don't know why but started facing the same Could not connect to server. It was all working just fine, I'm not even using nx. already tried a fresh install but no luck.

    "@scullyio/init": "0.0.13",
    "@scullyio/ng-lib": "0.0.9",
    "@scullyio/scully": "0.0.55"

[oleosjo]

I was still having exactly the same problems, but was able to get it working by removing an error check in guess-parser. In my case, I found that the issue was that the guess parser was complaining about multiple root routing modules.

Multiple root routing modules found

I'm not sure why it doesn't like my routes, I only have one root routing module with 'forRoot'. I was able to get it running by commenting out the error check in the relevant function in node_modules/guess-parser/dist/guess-parser/index.js

var findRootModule = function (registry) {
    var childModules = new Set();
    var traverseRoute = function (route) {
        if (route.module) {
            childModules.add(route.module);
        }
        route.children.forEach(traverseRoute);
    };
    var allModulePaths = Object.keys(registry);
    allModulePaths.forEach(function (path) {
        var declaration = registry[path];
        declaration.eagerRoutes.forEach(traverseRoute);
        declaration.lazyRoutes.forEach(traverseRoute);
    });
    var roots = allModulePaths.filter(function (m) { return !childModules.has(m); });
    // if (roots.length > 1) {
    //     throw new Error('Multiple root routing modules found ' + roots.join(', '));
    // }
    return roots[0];
};

The commented out portion is what I modified. It then worked as the first in the array is my root module. However, it still doesn't work with just npm run scully, I have to run npm run scully:serve, that works fine. And then I can run npm run scully and it gives me this message: Background servers already running. servers available and is successful.

Thoughts?

[mgechev]

@oleosjo there's another fix that I didn't release yet. Just pushed it in version 0.4.13.

[xmlking]

any update on nx workspace support?
I saw some issues closed with nx
But it still don't work for me. to reproduce:
Apply following change here: https://github.com/xmlking/yeti/blob/develop/apps/webapp/src/app/app.module.ts#L23

import('@yeti/home').then(module => module.HomeModule),
// import('../../../../libs/home/src/lib/home.module').then(module => module.HomeModule),
````

```bash
ng build
npx scully 
npx lite-server

[mgechev]

@xmlking in home.module.ts you can switch your blog route to:

import('@yeti/blog').then(module => module.BlogModule)

from:

import('../../../blog/src/lib/blog.module').then(
  module => module.BlogModule
)

And everything should work as expected.

---

If you look at yeti/libs/home/src/index.ts, the relative path you've used is ../../../blog/src/lib/blog.module, TypeScript will try to resolve this relative path to the modules (notice the missing libs directory after yeti):

yeti/blog/src/lib/blog.module.ts
yeti/blog/src/lib/blog.module.tsx
yeti/blog/src/lib/blog.module.d.ts
yeti/blog/src/lib/blog.module/package.json
yeti/blog/src/lib/blog.module/index.ts
yeti/blog/src/lib/blog.module/index.tsx
yeti/blog/src/lib/blog.module/index.d.ts
yeti/blog/src/lib/blog.module.js
yeti/blog/src/lib/blog.module.jsx
yeti/blog/src/lib/blog.module/package.json
yeti/blog/src/lib/blog.module/index.js
yeti/blog/src/lib/blog.module/index.jsx
yeti/blog/src/lib/blog.module/package.json

None of these files exist. I'll detect this earlier in Guess.js and throw an error when the resolved file does not exit.

[xmlking]

@mgechev not related to this issue but, I noticed the following error while using typescript 3.7.5 when I run ng build --prod
ng build works fine.

ng build --prod                    
92% chunk asset optimization optimize-css-webpack-pluginAn unhandled exception occurred: Parse error on line 1: 
var(--calendar-width) + var(--calendar-weeknumber-width)var(--cale...
--------------------------------------------------------^
Expecting end of input, "RPAREN", "ADD", "SUB", "MUL", "DIV", got unexpected "FUNCTION"
See "/private/var/folders/ym/_jvkpgm51tq_sbrpmny7qqv00000gn/T/ng-u5Vh1E/angular-errors.log" for further details.

[xmlking]

@mgechev I changed as you suggested , still getting error.
I am also locking "guess-parser": "^0.4.13" in my package.json

  "resolutions": {
    "guess-parser": "^0.4.13"
  }

_latest changes are on Github, when you get a chance for testing_

ng build

ng build  
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 153 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 798 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 9.14 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 9.13 kB [entry] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 93.9 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 107 kB [initial] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 3.41 MB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 3.41 MB [initial] [rendered]
chunk {yeti-blog} yeti-blog-es2015.js, yeti-blog-es2015.js.map (yeti-blog) 1.46 MB  [rendered]
chunk {yeti-blog} yeti-blog-es5.js, yeti-blog-es5.js.map (yeti-blog) 1.48 MB  [rendered]
chunk {yeti-dashboard} yeti-dashboard-es2015.js, yeti-dashboard-es2015.js.map (yeti-dashboard) 670 kB  [rendered]
chunk {yeti-dashboard} yeti-dashboard-es5.js, yeti-dashboard-es5.js.map (yeti-dashboard) 673 kB  [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 6.5 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 7.61 MB [initial] [rendered]
chunk {yeti-home} yeti-home-es2015.js, yeti-home-es2015.js.map (yeti-home) 1.29 MB  [rendered]
chunk {yeti-home} yeti-home-es5.js, yeti-home-es5.js.map (yeti-home) 1.31 MB  [rendered]
chunk {yeti-admin} yeti-admin-es2015.js, yeti-admin-es2015.js.map (yeti-admin) 335 kB  [rendered]
chunk {yeti-admin} yeti-admin-es5.js, yeti-admin-es5.js.map (yeti-admin) 338 kB  [rendered]
chunk {common} common-es2015.js, common-es2015.js.map (common) 10.8 kB  [rendered]
chunk {common} common-es5.js, common-es5.js.map (common) 11.5 kB  [rendered]
chunk {yeti-not-found} yeti-not-found-es2015.js, yeti-not-found-es2015.js.map (yeti-not-found) 6.65 kB  [rendered]
chunk {yeti-not-found} yeti-not-found-es5.js, yeti-not-found-es5.js.map (yeti-not-found) 8.07 kB  [rendered]
Date: 2020-01-20T01:11:46.244Z - Hash: a5ea7ea12f9534809a9f - Time: 14192ms

npx scully

npx scully
Cleaned up /Users/schintha/Developer/Work/SPA/yeti/dist/static/apps/webapp folder.
 ☺   new Angular build imported
 ☺   Started servers in background
Could not connect to server

[xmlking]

npx scully only works when I change all routes form
loadChildren: () => import('@yeti/blog').then(module => module.BlogModule)
format to
loadChildren: () => import('../../../blog/src/lib/blog.module').then(module => module.BlogModule)

          {
            path: 'blog',
            loadChildren: () =>
            import('../../../blog/src/lib/blog.module').then(module => module.BlogModule)
          }

[mgechev]

@xmlking I wasn't able to reproduce the route parsing error when using path mapping. For me things keep working with @yeti/blog, etc. as well.

Folks who hit the parsing error can directly report to https://github.com/guess-js/guess with a repro.

[xmlking]

Sorry to bring this issue back, may be this issue is related to my env
I am getting following error after upgrading to the latest version:

ng build

yarn run scully --showGuessError

yarn run v1.21.1
$ scully --showGuessError
Cleaned up /Users/xyz/Developer/Work/SPA/yeti/dist/static/apps/webapp folder.
 ☺   new Angular build imported
 ☺   Started servers in background
servers available
Finding all routes in application.
TypeError: Cannot read property 'eagerRoutes' of undefined
    at collectRoutingModules (/Users/xyz/Developer/Work/SPA/yeti/node_modules/guess-parser/dist/guess-parser/index.js:465:17)
    at processLazyRoute (/Users/xyz/Developer/Work/SPA/yeti/node_modules/guess-parser/dist/guess-parser/index.js:463:9)
    at Array.forEach (<anonymous>)
    at collectRoutingModules (/Users/xyz/Developer/Work/SPA/yeti/node_modules/guess-parser/dist/guess-parser/index.js:466:28)
    at Object.exports.parseRoutes [as parseAngularRoutes] (/Users/xyz/Developer/Work/SPA/yeti/node_modules/guess-parser/dist/guess-parser/index.js:598:9)
    at Object.exports.traverseAppRoutes (/Users/xyz/Developer/Work/SPA/yeti/node_modules/@scullyio/scully/routerPlugins/traverseAppRoutesPlugin.js:16:33)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Object.exports.generateAll (/Users/xyz/Developer/Work/SPA/yeti/node_modules/@scullyio/scully/utils/defaultAction.js:21:33)

We encountered a problem while reading the routes from your applications source.
This might happen when there are lazy-loaded routes, that are not loaded,
Or when there are paths we can not resolve statically.
Check the routes in your app, rebuild and retry.
(You can inspect the error by passing the --showGuessError flag

When there are extraRoutes in your config, we will still try to render those.




We did not find an empty route ({path:'', component:rootComponent}) in your app.
This means that the root of your application will be you normal angular app, and
is not rendered by Scully
In some circumstances this can be cause because a redirect like:
   ({path: '', redirectTo: 'home', pathMatch: 'full'})
is not picked up by our scanner.

By adding '' to the extraRoutes array in the scully.config option, you can bypass this issue


No routes found in application, are you sure you installed the router? Terminating.
error Command failed with exit code 15.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.0.0-rc.10
Node: 13.5.0
OS: darwin x64

Angular: 9.0.0-rc.10
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router, service-worker
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.23
@angular-devkit/build-angular     0.900.0-rc.10
@angular-devkit/build-optimizer   0.900.0-rc.10
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cdk                      9.0.0-rc.8
@angular/fire                     5.3.0
@ngtools/webpack                  9.0.0-rc.10
@schematics/angular               9.0.0-rc.9
@schematics/update                0.900.0-rc.10
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[SanderElias]

@xmlking You have an issue with the Guess parser.
Please make a minimal reproduction, and use that to file an issue as @mgechev said above.

[mgechev]

@xmlking also make sure you're using the latest release of Guess.js. I released yesterday.