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

PierreDuc · 2017-08-10T12:49:56Z

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.

Upgrade cli to version 1.3.0, this used to work in 1.3.0-rc.5 and before
Create a project
Set a paths property to "@root/*": ["./*"] inside tsconfig.app..json
Change the import of AppComponent inside AppModule to import { AppComponent } from '@root/app/app.component';
Run ng serve
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

The text was updated successfully, but these errors were encountered:

karptonite · 2017-08-10T18:33:19Z

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 · 2017-08-10T18:45:05Z

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 · 2017-08-10T19:51:40Z

@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 · 2017-08-11T06:54:16Z

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 · 2017-08-11T11:33:46Z

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

beeman · 2017-08-11T14:29:22Z

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

karptonite · 2017-08-12T18:23:44Z

@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 · 2017-08-15T16:53:42Z

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 · 2017-08-15T18:26:23Z

@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 · 2017-08-16T02:56:17Z

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

hsinyu-chen · 2017-08-16T06:50:39Z

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

karptonite · 2017-08-18T17:56:25Z

I can no longer confirm this bug. What I thought was related to the paths config was actually related to having some import statements that explicitly included .ts in the path name. When I removed the .ts at the end of the import path name, the imports worked fine, as before.

If you are seeing the bug described in this issue, check to see whether you are including the .ts extension in your import statements. If you are, try removing it.

ismcagdas · 2017-08-21T07:24:00Z

I have the same problem as @PierreDuc described. I have tried v1.3.1 and 1.4.0-beta.2, both resulted the same error message.
Can anyone from the team respond to this issue ?

Thanks.

GarryBrown · 2017-08-21T10:44:54Z

The same error (project https://github.com/ngrx/platform.git works with another version cli)
@angular/cli: 1.3.1
node: 6.11.2
os: win32 x64
@angular/cdk: 2.0.0-beta.8
@angular/animations: 4.3.5
@angular/cli: 1.3.1
@angular/common: 4.3.5
@angular/compiler: 4.3.5
@angular/compiler-cli: 4.3.5
@angular/core: 4.3.5
@angular/forms: 4.3.5
@angular/http: 4.3.5
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.5
@angular/platform-browser-dynamic: 4.3.5
@angular/platform-server: 4.3.5
@angular/router: 4.3.5

fachammer · 2017-08-21T12:15:49Z

Having the same issue with version 1.3.1:
ERROR in ./src/main/web/app/app.module.ts
Module not found: Error: Can't resolve '@module/api'

and

Field 'browser' doesn't contain a valid alias configuration

where @module/api is defined in tsconfig.app.json

filipesilva · 2017-08-21T12:53:27Z

@hansl can you take a look?

nekkon · 2017-08-21T18:33:55Z

@hansl @filipesilva @PierreDuc I had the same issue with the library repo and managed to find a workaround. Not sure what is causing this and didn't have much time to look into it. Maybe my workaround helps you out. I have updated @PierreDuc repo ( there are pending pull requests ) with the solution. Now ng serve and aot works properly.

My main changes were to change tsconfig.json to:

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths":{
      "@app/*": ["src/app/*"]
    },
    "baseUrl": ".",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

and tsconfig.app.json to:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "paths":{
      "@app/*": ["app/*"]
    },
    "outDir": "../out-tsc/app",
    "baseUrl": ".",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Some path mappings (see issue) were not resolving properly when they were used in deep paths. Fixes #7341

GerbenRampaart · 2017-08-31T12:51:37Z

I have this error too. cli 1.3.2

playground · 2017-09-07T20:20:56Z

I'm still getting this error in 1.4.0-rc.2. Will this be fixed soon?

playground · 2017-09-07T20:46:17Z

Same errors after upgraded to 1.4.0...
ng build works fine.

it's failing for "ng build -prod", it's not seeing any of my share modules.

ERROR in /Users/angular/proj/src/$$_gendir/app/app.module.ngfactory.ts (38,22): Cannot find module 'module-one'.
ERROR in /Users/angular/proj/src/$$_gendir/app/app.module.ngfactory.ts (57,22): Cannot find module 'module-two'.

mark-holmes · 2017-09-08T00:07:56Z

Same here - 1.4.0

playground · 2017-09-08T03:19:08Z

I found the answer, it turns out that flatModuleId needs to be set to @scope such as

"flatModuleId": "@myscope/my-module" in tsconfig.es5.json.

Thanks to @jdjuan #75

nishesj · 2017-09-08T09:17:42Z

Was working until 1.3.0-rc.5.
"paths" was used for aliasing and overwriting some 3rd party imports but it no longer works.
Guessing its because of this check

angular-cli/packages/@ngtools/webpack/src/paths-plugin.ts

Line 126 in 2c82663

    
           if (!request.contextInfo.issuer || !request.contextInfo.issuer.endsWith('.ts')) {

hieuxlu · 2017-09-08T09:58:42Z

Guys, I confirm this have been fixed and merged to 1.3.2 and 1.4.0. Please update & double-check your @angular/cli version with ng -v and open another issue if it still persists in your case. This issue has been closed since.

dherges · 2017-09-08T11:16:12Z

@hieuxlu It is not. There are use cases where the paths mapping is not resolved correctly.

PierreDuc · 2017-09-08T11:53:17Z

@dherges Try to create a repo where the mapping still doesn't work. Like I mentioned before, an import like @angular/src/.../... will trigger the same error, which is not a bug, but a wrong import

nishesj · 2017-09-08T12:01:04Z

I don't have a public repo but example where it was working but is broken now is
if some third party script has:

let a=require('**some-module**');

we could alias some-module in paths like

"paths": { "some-module": ["./different-import.ts"] }

which was working until 1.3.0-rc.5. This now resolves the original some-module instead of the alias defined.

dherges · 2017-09-08T12:32:24Z

@PierreDuc

Repro: https://github.com/dherges/ng-packaged/tree/146323597324337e435ad0f6d6a0fdad876603da

Commit history: https://github.com/dherges/ng-packaged/commits/146323597324337e435ad0f6d6a0fdad876603da

Started breaking in 1.3.0

It never turned back green again even w/ 1.3.2 as seen in Circle CI build 79: https://circleci.com/gh/dherges/ng-packaged/79?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link

Neither did it in Curcle CI build 92, when upgrading to 1.4.2-rc.2: https://circleci.com/gh/dherges/ng-packaged/93?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link

Eventually, I changed my configuration. By changing my configuration, the build no works again. Considering that it stopped working in the way it was being used before, there were regressions / breaking changes introduced to tsconfig paths mapping in Angular CLI.

dherges · 2017-09-08T12:33:58Z

Essentially the same matter from 14 days ago

hieuxlu · 2017-09-08T17:05:55Z

@dherges You're correct. It seems like the fix did not cover resolving paths for commonjs module. For the mean time, you should either change reference to require '../..dist/my-lib' or change paths to my-lib, or downgrade the cli to 1.3.0-rc.5 or 1.2.x.
@hansl @filipesilva You might want to have a look at this. The repro is not minimal, but clearly this issue only happens since 1.3.0.

miguelramos · 2017-09-13T23:29:39Z

After fighting some days to put an "emulated" type monorepo, i got working and compiling in AOT mode with paths mappings in the current version (1.4.1) of the CLI.

So my approach have some config time. First, i'm using multi app support and let's start on angular-cli.json. For the test project, called playground and you can see on the screenshot bellow i've use two configs for the same project, this only to have different tsconfig.app.json for resolving ts path maps.

I've a shared code on lib, and want to share between the multiple apps. On tsconfig.json in the root my config is like this:

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
      "@foursource/*": ["src/lib/*"],
      "@foursource/common": ["src/lib/common/public_api.ts"],
      "@foursource/core": ["src/lib/core/public_api.ts"],
      "@foursource/ui": ["src/lib/ui/public_api.ts"],
      "@foursource/ui/button": ["src/lib/ui/button/public_api.ts"]
    },

    "outDir": "./dist/out-tsc",
    "baseUrl": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "exclude": [
    "tmp"
  ]
}

Then inside the playground project i have two tsconfig for dev mode and for aot compilation.

tsconfig.dev.json (DEV)

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "paths": {
      "@foursource/common": ["../lib/common/public_api.ts"],
      "@foursource/core": ["../lib/core/public_api.ts"],
      "@foursource/ui": ["../lib/ui/public_api.ts"],
      "@foursource/ui/button": ["../lib/ui/button/public_api.ts"]
    },
    "outDir": "../../out-tsc/app",
    "baseUrl": "",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

tsconfig.play.json (AOT)

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "paths": {
      "@foursource/common": ["lib/common/public_api.ts"],
      "@foursource/core": ["lib/core/public_api.ts"],
      "@foursource/ui": ["lib/ui/public_api.ts"],
      "@foursource/ui/button": ["lib/ui/button/public_api.ts"]
    },
    "outDir": "../../out-tsc/app",
    "baseUrl": "",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

And for this to work package.json scripts have to done some things before compile it, special on AOT mode. For this i copy folder lib to inside the playground app and that's the action that is needed for resolve paths in path mapping.

package.json

"ng": "node --max_old_space_size=8192 ./node_modules/.bin/ng",
"start:website": "npm run ng serve -- --app=website --aot=false --progress=true --verbose=true --port=3000 --host=www.foursource.dev --sourcemaps=true",
"start:platform": "npm run ng serve -- --app=platform --aot=false --progress=true --verbose=true --port=4000 --host=app.foursource.dev --sourcemaps=true",
"start:play": "npm run ng serve -- --app=playground-dev --aot=false --progress=true --verbose=true --port=5000 --host=www.playground.dev --sourcemaps=true",
"test:play": "ng test --app=playground",
"build": "ng build",
"build:play:aot": "cpr ./src/lib ./src/playground/lib -o && npm run ng build -- --app=playground --aot=true --target=production --environment=prod --sourcemaps=true --vendorChunk=true --output-hashing=all --progress=true  && rimraf ./src/playground/lib",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"

As you can see on start:play i call playground-dev to have dev mode and on build:play:aot the playground for AOT.

With this configs, i have multi apps like website, b2b app, mobile and so on emulating monorepo, sharing code, components and styles on my company.

An extensive temporary fix to use path maps of ts. Main value copy my shared lib to the project that i'm compiling.

The only problem that i'm facing is on run test, but i think it's a different thing from this thread. Current error on karma:

Help on this.

Cheers.!!

nekkon · 2017-09-14T06:17:13Z

@miguelramos Hey, I noticed you have followed a similar path with me. I have an open source repo https://github.com/nekkon/angular-cli-library which follows a similar logic with yours.

miguelramos · 2017-09-14T10:15:18Z

@nekkon Nice! Thanks for the tip.

miguelramos · 2017-09-14T10:17:46Z

Related to the test error on karma i was able to fix it putting on tsconfig app related the lib as : "lib": ["es2015", "dom"].

Bam! Everything rolling.

penghuili · 2017-10-19T13:14:56Z

I fixed this by removing
"include": [ "node_modules/@types" ]
from my tsconfig.json file.

By the way, i added the "include", because i run into Cannot find name 'expect' error, but now after i removed it, this error also doesn't show, wired.

AlexeiBlue · 2018-02-22T13:30:43Z

I had this issue which was caused by the following in tsconfig.json:

"paths": {
  "@angular/*": [
    "./node_modules/@angular/*"
  ]
}

Not sure why it was added or what changed that caused this to break everything, our project had been building fine up until 22/02/18 with this in that file. I've removed it and now it's working.

Some path mappings (see issue) were not resolving properly when they were used in deep paths. Fixes angular#7341

Tahiche · 2019-02-22T11:51:09Z

Similar to @miguelramos, in my case in tsconfig I had compilerOptions -> "target": "es2015", but compilerOptions -> lib: ["dom", "es2018"]
This is for a project to be used as a library by other projects.
I kept getting all kinds of "Field ‘browser’ doesn’t contain a valid alias configuration" and module/blabla not found errors when trying production build (no errors on dev)
My very uneducated guess is that is there´s a discrenpancy between "target" and "lib" routes get screwed up. The "host" app is told to look for modules and classes in one place but they are placed / generated elsewhere.
If this is the case error reporting is not helping at all. I don´t know if its possible, but you should be warned when compiling. It´s just really hard to figure this out when you´re told files are not found (again only in production build) when the files are there,

angular-automatic-lock-bot · 2019-09-09T08:41:44Z

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

PierreDuc changed the title ~~Using paths inside tsconfig causing field 'browser' doesn't contain a valid alias configuration~~ Using paths inside tsconfig causing error: field 'browser' doesn't contain a valid alias configuration Aug 10, 2017

PierreDuc changed the title ~~Using paths inside tsconfig causing error: field 'browser' doesn't contain a valid alias configuration~~ Using paths inside tsconfig causing error on JIT: field 'browser' doesn't contain a valid alias configuration Aug 10, 2017

duncanwerner mentioned this issue Aug 14, 2017

tsconfig "paths" config is not recognized #3837

Closed

hieuxlu mentioned this issue Aug 16, 2017

ng serve doesn't work with linked module #7332

Closed

trxcllnt mentioned this issue Aug 20, 2017

Modules Not Found in Angular CLI Application ReactiveX/IxJS#28

Closed

filipesilva assigned hansl Aug 21, 2017

filipesilva added P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful severity5: regression type: bug/fix labels Aug 21, 2017

filipesilva assigned filipesilva and unassigned hansl Aug 21, 2017

This was referenced Aug 21, 2017

add optional "input" and "output" paths to "index" in angular-cli.json #7309

Closed

Add new script 'ng update' #7375

Closed

hansl added a commit that referenced this issue Aug 25, 2017

fix(@ngtools/webpack): fix paths mapping recursive support

2c82663

Some path mappings (see issue) were not resolving properly when they were used in deep paths. Fixes #7341

dherges mentioned this issue Sep 4, 2017

Library and Angular CLI app in a monorepo (Module not found: import paths cannot be resolved) ng-packagr/ng-packagr#117

Closed

2 tasks

playground mentioned this issue Sep 7, 2017

--build-optimizer giving 'browser' doesn't contain a valid alias configuration error #7105

Closed

GoshaFighten mentioned this issue Oct 5, 2017

Can't get Globalize to work inside an Angular CLI project #7949

Closed

mark-holmes mentioned this issue Oct 13, 2017

Field 'browser' doesn't contain a valid alias configuration #8036

Closed

nording mentioned this issue Mar 29, 2018

Module not found on running the task ui-jar/ui-jar#23

Closed

dond2clouds pushed a commit to d2clouds/speedray-cli that referenced this issue Apr 23, 2018

fix(@ngtools/webpack): fix paths mapping recursive support

150bfcd

Some path mappings (see issue) were not resolving properly when they were used in deep paths. Fixes angular#7341

angular-automatic-lock-bot bot unassigned hansl Sep 9, 2019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

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

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

Comments

PierreDuc commented Aug 10, 2017 • edited Loading

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

karptonite commented Aug 10, 2017

strizzaflex commented Aug 10, 2017

hieuxlu commented Aug 10, 2017 • edited Loading

beeman commented Aug 11, 2017

tacman commented Aug 11, 2017

beeman commented Aug 11, 2017

karptonite commented Aug 12, 2017 • edited Loading

bastienJS commented Aug 15, 2017

PierreDuc commented Aug 15, 2017 • edited Loading

sishuoyang commented Aug 16, 2017

hsinyu-chen commented Aug 16, 2017 • edited Loading

karptonite commented Aug 18, 2017 • edited Loading

ismcagdas commented Aug 21, 2017

GarryBrown commented Aug 21, 2017

fachammer commented Aug 21, 2017 • edited Loading

filipesilva commented Aug 21, 2017

nekkon commented Aug 21, 2017 • edited Loading

GerbenRampaart commented Aug 31, 2017

playground commented Sep 7, 2017

playground commented Sep 7, 2017

mark-holmes commented Sep 8, 2017

playground commented Sep 8, 2017 • edited Loading

nishesj commented Sep 8, 2017 • edited Loading

hieuxlu commented Sep 8, 2017

dherges commented Sep 8, 2017

PierreDuc commented Sep 8, 2017

nishesj commented Sep 8, 2017

dherges commented Sep 8, 2017

dherges commented Sep 8, 2017

hieuxlu commented Sep 8, 2017 • edited Loading

miguelramos commented Sep 13, 2017 • edited Loading

tsconfig.json

tsconfig.dev.json (DEV)

tsconfig.play.json (AOT)

package.json

nekkon commented Sep 14, 2017

miguelramos commented Sep 14, 2017

miguelramos commented Sep 14, 2017

penghuili commented Oct 19, 2017 • edited Loading

AlexeiBlue commented Feb 22, 2018 • edited Loading

Tahiche commented Feb 22, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

PierreDuc commented Aug 10, 2017 •

edited

Loading

Bug Report or Feature Request (mark with an `x`)

hieuxlu commented Aug 10, 2017 •

edited

Loading

karptonite commented Aug 12, 2017 •

edited

Loading

PierreDuc commented Aug 15, 2017 •

edited

Loading

hsinyu-chen commented Aug 16, 2017 •

edited

Loading

karptonite commented Aug 18, 2017 •

edited

Loading

fachammer commented Aug 21, 2017 •

edited

Loading

nekkon commented Aug 21, 2017 •

edited

Loading

playground commented Sep 8, 2017 •

edited

Loading

nishesj commented Sep 8, 2017 •

edited

Loading

hieuxlu commented Sep 8, 2017 •

edited

Loading

miguelramos commented Sep 13, 2017 •

edited

Loading

penghuili commented Oct 19, 2017 •

edited

Loading

AlexeiBlue commented Feb 22, 2018 •

edited

Loading