Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
PierreDuc opened this issue Aug 10, 2017 · 43 comments · Fixed by #7473
Labels
P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful severity5: regression type: bug/fix

Comments

@PierreDuc
Copy link

PierreDuc commented Aug 10, 2017

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

@PierreDuc 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 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
@karptonite
Copy link

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
Copy link

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
Copy link

hieuxlu commented Aug 10, 2017

@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
Copy link
Contributor

beeman commented Aug 11, 2017

@tacman
Copy link

tacman commented Aug 11, 2017

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

@beeman
Copy link
Contributor

beeman commented Aug 11, 2017

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

@karptonite
Copy link

karptonite commented Aug 12, 2017

@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
Copy link

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
Copy link
Author

PierreDuc commented Aug 15, 2017

@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
Copy link

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

@hsinyu-chen
Copy link

hsinyu-chen commented Aug 16, 2017

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
Copy link

karptonite commented Aug 18, 2017

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
Copy link

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
Copy link

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
Copy link

fachammer commented Aug 21, 2017

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 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
Copy link
Contributor

@hansl can you take a look?

@nekkon
Copy link

nekkon commented Aug 21, 2017

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

hansl added a commit that referenced this issue Aug 25, 2017
Some path mappings (see issue) were not resolving properly when they were
used in deep paths.

Fixes #7341
@GerbenRampaart
Copy link

I have this error too. cli 1.3.2

@playground
Copy link

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

@playground
Copy link

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
Copy link

Same here - 1.4.0

@playground
Copy link

playground commented Sep 8, 2017

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
Copy link

nishesj commented Sep 8, 2017

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

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

@hieuxlu
Copy link

hieuxlu commented Sep 8, 2017

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
Copy link

dherges commented Sep 8, 2017

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

@PierreDuc
Copy link
Author

@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
Copy link

nishesj commented Sep 8, 2017

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
Copy link

dherges commented Sep 8, 2017

@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
Copy link

dherges commented Sep 8, 2017

Essentially the same matter from 14 days ago

@hieuxlu
Copy link

hieuxlu commented Sep 8, 2017

@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
Copy link

miguelramos commented Sep 13, 2017

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.

image

image

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:

image

Help on this.

Cheers.!!

@nekkon
Copy link

nekkon commented Sep 14, 2017

@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
Copy link

@nekkon Nice! Thanks for the tip.

@miguelramos
Copy link

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
Copy link

penghuili commented Oct 19, 2017

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
Copy link

AlexeiBlue commented Feb 22, 2018

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.

dond2clouds pushed a commit to d2clouds/speedray-cli that referenced this issue Apr 23, 2018
Some path mappings (see issue) were not resolving properly when they were
used in deep paths.

Fixes angular#7341
@Tahiche
Copy link

Tahiche commented Feb 22, 2019

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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful severity5: regression type: bug/fix
Projects
None yet
Development

Successfully merging a pull request may close this issue.