angular/universal-starter

Can not find module "zone.js/dist/zone-node"

sskhokhar opened this issue · 9 comments

I cloned the fresh Universal Starter project. After building with SSR I deployed dist directory in AWS and running node server.js it says "zone.js/dist/zone-node"

I think the problem lies in bundling the dependencies. This universal starter uses typescript to compile the server and it does not resolve dependencies unlike webpack.
Here are my files:

server.ts

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { enableProdMode } from '@angular/core';
// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

import * as express from 'express';
import { join } from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./server/main');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine(
  'html',
  ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [provideModuleMap(LAZY_MODULE_MAP)]
  })
);

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Server static files from /browser
app.get(
  '*.*',
  express.static(join(DIST_FOLDER, 'browser'), {
    maxAge: '1y'
  })
);

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

tsconfig.server.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    // Set the module format to "commonjs":
    "module": "commonjs",
    "types": [
      "node"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  // Add "angularCompilerOptions" with the AppServerModule you wrote
  // set as the "entryModule".
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

Package.json scripts:

"build:client-and-server-bundles": "ng build --prod && ng run Uninama:server:production",
        "build:prerender": "npm run build:client-and-server-bundles && npm run compile:server && npm run generate:prerender",
        "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
        "compile:server": "tsc -p server.tsconfig.json",
        "generate:prerender": "cd dist && node prerender",
        "serve:prerender": "cd dist/browser && http-server",
        "serve:ssr": "node dist/server"

As far as I run npm run serve:ssr from my project directory, it works fine. But as soon as I upload the dist folder on AWS and run node server it throws error.

i have same error with Azure

@Horizont77 You need to create webpack config file, change the package.json scripts and change some lines in server.ts file then it will work fine.
You can try going back to universal-starter commits and then you will know what to change.

I think they are missing either the file or the proper fix for this if they want to remove the dependency of any webpack configuration. Trouble is the current state of the repo is kind of half way through the process - I get the exact same result.

For those that are still struggling with similar issues (I'm dealing with a similar project that is being deployed in Azure and it started to fail when I added SSR with i18n following official documentation and looking at this repo as a guide)

Well, I found hints are here thanks to latest @sskhokhar`s comment :

7d59edf

I created a webpack.server.config.js at my repo's root with that content
I changed the scripts in package.json to use webpack to build the server
I copied the entire dist folder to other location in my dev machine and it worked as expected and now I'm deploying it to Azure (From VSTS with a pipeline similar than the one done by John Papa here (https://johnpapa.net/deploy-angular-to-azure-vsts-angular-cli/ very simple, npm install -g angular/cli -> npm install -> npm run build:i18n-ssr -> deploy dist folder to Azure App Service) and....

(In addition, I had to add few packages like ts-loader and webpack-cli)
(Another hint: in Azure I had to use var DIST_FOLDER = process.cwd(); in order to be able to run the app by executing "node server.js" from working path)

A question for the active developers in this repo:
When are you planning to fix this by using tsc instead of webpack? As @CarlosTorrecillas said this seems to be partially accomplished ("the repo is kind of half way through the process").

I hope this help anyone.

To provide an update on this: the process is supposed to work out of the box with Angular CLI's bundleDependencies option. However, that option currently doesn't work. At some point when I have some time we'll revert back to the Webpack setup, since that's what works for most people right now.

If anyone else wants to throw together a PR for it, I'd be happy to approve.

I am facing the same issue. Please help. I run it locally node server.js from dist folder and it shows the same error.

I have copied node_modules folder and the server works. I dont think its a good thing to put node_modules in production source and im getting a new error.

Error: Failed to lookup view "index" in views directory

@shansana my workaround was to go back to previous versions of the universal starter where there is a webpack config that is involved in the process. Using that it works for me.

I reverted back to webpack method.
After applying i18n with SSR, my server.js turned to 17MB.