Cannot find module environments/environment

[iberodev]

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

• Do you want to request a feature or report a bug?
  No

• What is the current behavior?
  When using nodeJs server side rendering it cannot compile because it cannot find the module environment

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.
  I followed steps here and after that I tried to use environments as described here

• What is the expected behavior?
  It should work same as if I use ng serve and my app should have access to the specified environment properties

• What is the motivation / use case for changing the behavior?
  Being able to use angular universal and environments

• Please tell us about your environment:

• Angular version: 4.X
• Browser: all
• Language: TypeScript 2.3.3
• OS: Windows
• Platform: NodeJs

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Error:

> ts-node src/server.ts

Error: Cannot find module 'environments/environment'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Dev\code-carama\src\app\auth.service.ts:3:1)
    at Module._compile (module.js:571:32)
    at Module.m._compile (C:\Dev\code-carama\node_modules\ts-node\src\index.ts:385:23)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .ts] (C:\Dev\code-carama\node_modules\ts-node\src\index.ts:388:12)
    at Module.load (module.js:488:32)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! code-carama@0.0.0 start: `ts-node src/server.ts`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the code-carama@0.0.0 start script 'ts-node src/server.ts'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the code-carama package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ts-node src/server.ts
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs code-carama
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls code-carama
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\dima\AppData\Roaming\npm-cache\_logs\2017-06-05T12_15_11_531Z-debug.log

My server.ts

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory';
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';

const PORT = 4000;

enableProdMode();

const app = express();

let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  //it serves html from the compiled angular app from the server
  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

app.set('view engine', 'html');
app.set('views', 'src')

app.get('*.*', express.static(join(__dirname, '..', 'dist')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`listening on http://localhost:${PORT}!`);
});

The simple service that tries to access environments auth.service.ts:

import { Injectable } from '@angular/core';
import { environment } from 'environments/environment';

@Injectable()
export class AuthService {

  private userManager = null;
  constructor() { 
    console.log('AuthService instantiated in environment ' + environment.envName);
  }
}

[iberodev]

Never mind, it seems the problem is that although for client side rendering the line:
import { environment } from 'environments/environment';
works well, for server side rendering the line must be:
import { environment } from '../environments/environment';

and by the way, I don't know why but by default for server-side rendering it will pick the PROD environment file..

AuthService instantiated in environment prod

[mchambaud]

Yup @iberodev is right, server side and client side do not have the same environment.

[aukris]

Server side rendering works flawlessly on my local machine. But when i try to push to heroku and build i get TS2307: Cannot find module '../../../environments/environment'. The relative path is perfectly right and works in my local machine. Env in angular-cli.json is the same for both server side and client side app.

"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"staging": "environments/environment.staging.ts"

I have gitignored my environments/environment.ts so each of our developers can use their own copy of it. This used to work fin until i moved to universal. Could this be the culprit ?

[collindutter]

@abhijithmannath did you ever find a solution to this?

[erpardeepjain]

@iberodev
so you mean to say Server side rendering doesn't support "paths" property of tsconfig.json file ?
it only supports relative path ?

[idileepd]

try this

import {environment} from 'src/environments/environment';

[shansana]

Facing the same issue. :(

[aemonge]

Have any of you tried to include in it in the paths from the tslint.config file ?

[JuliCardenasG]

I had to change the tsconfig.server.json basepath from './' to '../src'

[nolafs]

This is just nuts, it works fine on my computer at work but my laptop won't compile the server.

[aemonge]

Check if your local machine has any ~/.tsconfig.json file that is using by default, and which the server might lack.

[tzachov]

Just happened to me after upgrading to Angular 7.2.8 & CLI 7.3.5.
@JuliCardenasG solution didn't work for me. Also tried deleting node_modules and reinstall - nothing...

Downgrading to 7.2.0 solves this but a proper solution is required.

[benmed00]

try:
import {environment} from 'environments/environment';

[angular-automatic-lock-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.}