beta.4/5 cannot resolve client classes (nor window) in environment.dev.ts

[sgbeal]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Windows 10 (running in admin mode)

1. Versions. Please run ng --version. If there's nothing outputted, please
2. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

we import client-side classes in environment.dev.ts. In angular-cli versions newer than 1.0.0-beta.1, those imports cannot be resolved at build-time. It also cannot resolve 'window', so it's not a problem with our classes.

Log

with 1.0.0-beta.1:

    $ ng build
    (node:9540) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
    Built project successfully. Stored in "dist/".

    stephan@Curie MINGW64 /d/src/.../nms-gui (my-branch)
    $ ng --version
    (node:6200) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
    angular-cli: 1.0.0-beta.1
    node: 6.1.0
    os: win32 x64

with 1.0.0-beta.4: (edit: same result with beta.5)

    stephan@Curie MINGW64 /d/src/.../nms-gui (my-branch)
    $ npm install
    npm WARN deprecated lodash-node@2.4.1: This package has been discontinued in favor of lodash@^4.0.0.
    npm WARN deprecated cross-spawn-async@2.2.4: cross-spawn no longer requires a build toolchain, use it instead!
    npm WARN deprecated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.

    > nms-gui@0.0.0-alphalpha postinstall D:\src\...\nms-gui
    > typings install


    ├── es6-shim (ambient)
    ├── angular-protractor (ambient dev)
    ├── jasmine (ambient dev)
    └── selenium-webdriver (ambient dev)

    nms-gui@0.0.0-alphalpha D:\src\...\nms-gui
    `-- angular-cli@1.0.0-beta.4
      `-- broccoli-uglify-js@0.1.3
        +-- broccoli-filter@0.1.14
        | +-- broccoli-kitchen-sink-helpers@0.2.9
        | | +-- glob@5.0.15
        | | `-- mkdirp@0.5.1
        | +-- mkdirp@0.3.5
        | `-- walk-sync@0.1.3
        `-- uglify-js@2.4.24
          +-- async@0.2.10
          +-- source-map@0.1.34
          `-- yargs@3.5.4
            `-- wordwrap@0.0.2

    npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
    npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.12
    npm WARN optional Skipping failed optional dependency /browser-sync/chokidar/fsevents:
    npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.12

    stephan@Curie MINGW64 /d/src/.../nms-gui (my-branch)
    $ ng --version
    (node:8100) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
    angular-cli: 1.0.0-beta.4
    node: 6.1.0
    os: win32 x64

    stephan@Curie MINGW64 /d/src/.../nms-gui (my-branch)
    $ ng build
    (node:10520) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
    Cannot find module './services/core/logger'
    Error: Cannot find module './services/core/logger'
        at Function.Module._resolveFilename (module.js:438:15)
        at Function.Module._load (module.js:386:25)
        at Module.require (module.js:466:17)
        at require (internal/module.js:20:19)
        at Object.<anonymous> (D:\src\...\nms-gui\config\environment.dev.ts:5:16)
        at Module._compile (module.js:541:32)

it's complaining about the first import it finds. It also cannot resolve 'window' or 'console'.

1. The log given by the failure. Normally this include a stack trace and some
   more information.

see above.

1. Mention any other details that might be useful.

Works fine with 1.0.0-beta.1.

[sgbeal]

i tried removing all references to our classes, but then it died on a reference to 'window'.

[filipesilva]

I think I know what's happening. The env files are being compiled in place instead of in the target directory, and because of that they can't find relative module paths.

I'm working on a solution for this issue, using conditional module mapping via SystemJS rather than moving files around, I hope to have the PR ready later this week.

[sgbeal]

To reproduce, simply add this to one of the env files:

if(window.location){ console.log("!!!"); }

leads to:

ReferenceError: window is not defined
    at Object.<anonymous> (D:\src\...\nms-gui\config\environment.prod.ts:6:5)

[sgbeal]

@filipesilva a declare unfortunately doesn't suffice...

environment.prod.ts:

    //import {Injector} from '@angular/core';
    //noinspection TypeScriptCheckImport
    //import {LogService} from "./services/core/logger";
    declare var LogService: any;
    //declare var Injector: any;
    export const environment = {
        production: true,
        // No-op in prod build.
        addEnvironmentProviders: function (providers:any[]/*ignored*/){},
        // LogService default logging level config...
        LogService:{
            enabled: {
                debug: true,
                info: true,
                warn: true,
                error: true
            }
        },
        // called by the app bootstrapping process.
        doEnvironmentSetup: function(injector:any){
            injector.get(LogService).setPrefix('LogService').enable(this.LogService.enabled)
                .debug("Please turn off debug logging in production mode (see environment.prod.ts).");
        }
    };
    LogService.setEnabledDefaults(environment.LogService.enabled);

Build result:

    ReferenceError: LogService is not defined
        at Object.<anonymous> (D:\src\...\config\environment.prod.ts:24:1)

line 24 is the call to injector.get()

[filipesilva]

Yeah I don't think that the env files can be used to import services stuff in right now, due to how the module resolution is configured.

I'm thinking of reworking it this week, but in the meanwhile the best advice I can give to use the newer betas is to set a variable for your environment in environment.*.ts and use it somewhere else (like main) in an if to choose which init logic to run.

[sgbeal]

It did work until beta.5 :/. The problem with simply setting a flag is that we are forced to send all of our client-side mock data in prod builds if we do that. We could live with that if there's no other way, but... it worked fine before b5 :/. This setup allowed us to import the client-side mock (and its data) only in dev builds.

Okay, i'll rework it to use no imports in environment, but that sorely limits the true utility of env.xxx.ts (as they're now effectively limited to holding only constant values).

[filipesilva]

If you can wait a week-ish, I think I'll be able to have better env file support that should be able to fully cover your use-case.

[sgbeal]

i can, but the project can't - we go in ~13 working days. i just discovered that 1.0.x doesn't work for us at all (-prod build succeeds but is missing files: see #847 for details), and am currently rolling back to 0.0.34. i will refactor our env to simply include everything and toggle it on or off - not a major problem.

[filipesilva]

I haven't had a change to work more on this, but just want to link here a related issue: #933

[filipesilva]

Closed via #1455. Environments are now in the right folder. window and console are also included via the tsconfig libs option.

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