Angular-cli: 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.

1. Upgrade cli to version 1.3.0, this used to work in 1.3.0-rc.5 and before
2. Create a project
3. Set a paths property to "@root/*": ["./*"] inside tsconfig.app..json
4. Change the import of AppComponent inside AppModule to import { AppComponent } from '@root/app/app.component';
5. Run ng serve
6. 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:
https://github.com/angular/angular-cli/commit/cb0cc0886506d8243c0ed8fcba6a948ddb5adb25
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: https://github.com/angular/angular-cli/issues/7341#issuecomment-321636356

[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

[sheldonyss]

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

[karptonite]

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]

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]

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]

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]

@hansl can you take a look?

[nekkon]

@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:

```javascript
{
"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"
]
}

[PierreDuc]

@nekkon I'm sorry, I can see I did a boo boo while commiting the repo. Didn't actually commit the changes needed to show the error. I've updated my repo now

[nekkon]

@PierreDuc Yeah I noticed it. I have already commited those changes based on your description (Repro steps). My pull requests in your repo include your changes and the workaround. If you accept my pull requests you will see my workaround solves this problem. ( until properly fixed by angular-cli team )

[hieuxlu]

@PierreDuc @nekkon It works fine when the path directory is located inside project root. When you move it outside of \src and references in paths as ..\modules, for example, the error still occurs.

[PierreDuc]

@hieuxlu My guess is that there has been a dependency update. The error indeed did not occur anymore in my test repo. I've now changed the paths to reference the src folder from tsconfig.app.json and it's back. I've updated the repo and the initial issue

[dherges]

EDIT

Even after updating the yarn.lock file, error is still there

• with 1.3.2 in dherges/ng-packaged@1e6ad9d
• with 1.4.0-rc.0 in dherges/ng-packaged@a3b029aa3e4f4b111e355ae69d61c0d6bb53ff47

---

Error still persists with 1.3.2 in dherges/ng-packaged@e4f5b3a

Build error started when upgrading from 1.3.0-rc.3 to 1.3.0 in dherges/ng-packaged@3c983ae

History of commits w/ build success anf ailures

Updating to 1.4.0-rc.0 does not solve the error in dherges/ng-packaged#29

Error message

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@my/lib' in '/home/ubuntu/ng-packaged/src/app'
resolve '@my/lib' in '/home/ubuntu/ng-packaged/src/app'
  Parsed request is a module

Configuration

tsconfig.app.json

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

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "ng-packaged"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist/app",
      /* .. */
    }
  ]
}

[GerbenRampaart]

I have this error too. cli 1.3.2

[playground]

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

[playground]

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]

Same here - 1.4.0

[playground]

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]

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 https://github.com/angular/angular-cli/blob/2c82663f2e08a670b5db71b6c17da28e3bfade47/packages/%40ngtools/webpack/src/paths-plugin.ts#L126

[hieuxlu]

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]

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

[PierreDuc]

@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]

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]

@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]

Essentially the same matter from 14 days ago

[hieuxlu]

@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]

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]

@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]

@nekkon Nice! Thanks for the tip.

[miguelramos]

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]

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]

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.

[Tahiche]

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

<sub>_This action has been performed automatically by a bot._</sub>