Using paths inside tsconfig causing error on JIT: field 'browser' doesn't contain a valid alias configuration

[PierreDuc]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

While using the paths object inside tsconfig.json, module resolution doesn't seem to work anymore since the latest release. It did work on 1.3.0-rc.5. Ahead of Time does work. This seems to happen when you reference the src folder or anything lower down the tree

Versions.

@angular/cli: 1.3.0
node: 8.2.1
os: win32 x64
@angular/animations: 4.3.3
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.3.0
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3

Repro steps.

0. Upgrade cli to version 1.3.0, this used to work in 1.3.0-rc.5 and before
1. Create a project
2. Set a paths property to "@root/*": ["./*"] inside tsconfig.app..json
3. Change the import of AppComponent inside AppModule to import { AppComponent } from '@root/app/app.component';
4. Run ng serve
5. Run ng serve --aot to see that this does work

The log given by the failure.

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@root/app/app.component' in 'C:\Projects\angular-cli-v130-bug\src\app'
resolve '@root/app/app.component' in 'C:\Projects\angular-cli-v130-bug\src\app'
  Parsed request is a module
  using description file: C:\Projects\angular-cli-v130-bug\package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\Projects\angular-cli-v130-bug\package.json (relative path: ./src/app)
    resolve as module
      C:\Projects\angular-cli-v130-bug\src\app\node_modules doesn't exist or is not a directory
      C:\Projects\angular-cli-v130-bug\src\node_modules doesn't exist or is not a directory
      C:\Projects\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\Projects\angular-cli-v130-bug\node_modules
        using description file: C:\Projects\angular-cli-v130-bug\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: C:\Projects\angular-cli-v130-bug\package.json (relative path: ./node_modules)
          using description file: C:\Projects\angular-cli-v130-bug\package.json (relative path: ./node_modules/@root/app/app.component)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Projects\angular-cli-v130-bug\node_modules\@root\app\app.component doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Projects\angular-cli-v130-bug\node_modules\@root\app\app.component.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Projects\angular-cli-v130-bug\node_modules\@root\app\app.component.js doesn't exist
            as directory
              C:\Projects\angular-cli-v130-bug\node_modules\@root\app\app.component doesn't exist

Desired functionality.

I would like to see no errors, obviously ;)

Mention any other details that might be useful.

Created a repo showing this issue

[karptonite]

My guess is that this is related to this commit:
cb0cc08
It was a last minute addition, and seems to have made it into 1.3, despite a commit message that says "This is a feature because we do not want it in 1.3.0".

[strizzaflex]

I'm getting the same errors in my application. I followed the recreate steps and and I get the error without the aot flag so that confirms for me that it is not my app setup but something that changed in 1.3

[hieuxlu]

@PierreDuc et al: Fix the @angular/cli version in package.json to 1.3.0-rc.5 resolves the issue for me. This only occurs in ^1.3.0.
@filipesilva FYI. Maybe the reason is what @karptonite has said.

[beeman]

My project does not build anymore after upgrading to 1.3.0 with this same error:

https://travis-ci.org/ngx-plus/ngx-forms/builds/263376710#L3634
https://github.com/ngx-plus/ngx-forms/commit/e7eefe0054ff7509c72ef99d0b0d6314230f8b1e

[tacman]

Is this something that can be fixed quickly? It's a show-stopper for us.

[beeman]

@tacman for me downgrading the local cli version is the workaround

[karptonite]

@hansl just bringing this to your attention, since you are the author of the commit that may be related to this issue. See: #7341 (comment)

[bastienJS]

I get the same error: Field 'browser' doesn't contain a valid alias configuration

with v1.3.0 but I do not use AOT or paths in tsconfig.json!

[PierreDuc]

@bastienJS check if you have an import from @angular/src/.../..., this can also cause this error. Make sure to import only from @angular/core etc. Nothing from src. Thereby the issue I mentioned is only present in JIT and -not- in AOT

[sishuoyang]

For me 1.3.0-rc.5 doesn't work. I downgraded to 1.2.1 and i can build finally.

[hsinyu-chen]

I get the same error,
and I checked my code, nothing import from @anguar/src/* only import from @angular/core and @angular/core/testing

1.3.0-rc.5 works fine