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

The build fails when trying to perform a build involving a requirejs dependency which also requires other files.

In this case the following error appears:
Field 'browser' doesn't contain a valid alias configuration

The error does not occur if the required file dependency has no dependencies, and it appears to have been introduced after 1.2.6. This affects both jit & aot builds.

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

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

Versions.

@angular/cli: 1.4.7
node: 8.5.0
os: darwin x64
@angular/animations: 4.4.5
@angular/common: 4.4.5
@angular/compiler: 4.4.5
@angular/core: 4.4.5
@angular/forms: 4.4.5
@angular/http: 4.4.5
@angular/platform-browser: 4.4.5
@angular/platform-browser-dynamic: 4.4.5
@angular/router: 4.4.5
@angular/cli: 1.4.7
@angular/compiler-cli: 4.4.5
@angular/language-service: 4.4.5
typescript: 2.3.4

Repro steps.

Example Repository
Using 1.2.6 of the cli will build correctly.

ng new project
add requirejs
add path inside tsconfig
require a file using the path

At this stage the project builds and runs as expected.

However if the required file has other dependencies they will not be resolved and the build breaks.

The log given by the failure.

log.txt

Desired functionality.

Nested modules should resolve correctly.

Mention any other details that might be useful.

The regression was introduced after 1.2.6.
The example repo was built with cli 1.4.7.

Related Issue Related Issue 7341

What you are describing is expected behavior. tsconfig settings affect .ts files. Webpack handles module resolution within javascript files and it cannot resolve the module in question. Which makes sense since required-module/strings isn't a package and is not in the app's root. (The two places webpack looks for module dependencies.)
If this worked previously, it could really be considered a defect.

To make it work there are several options:

change the dependency to ./strings
change the file extension of logger.js to logger.ts
move the entire directory inside the root (src in this case)
make required-module an actual package and link it

Also, as an aside, requirejs is unused and not needed.

Thanks clydin.

This is unfortunate if it is to be considered a defect as I am unable to act on any of your suggestions without incurring significant work.

At the end of the day I need to be able to alias a javascript path, which worked up to v1.2.6

Normally this would be solved by editing the alias field of the webpack config.

#7287 Seems to be related.

I am getting this error in the latest CLI, with rxjs 5.4.2.....

Field 'browser' doesn't contain a valid alias configuration
C:\Users\tpadle01\IdeaProjects\onland-ui\src\rxjs\operators.js doesn't exist
as directory
C:\Users\tpadle01\IdeaProjects\onland-ui\src\rxjs\operators doesn't exist
looking for modules in C:\Users\tpadle01\IdeaProjects\onland-ui\src
using description file: C:\Users\tpadle01\IdeaProjects\onland-ui\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\Users\tpadle01\IdeaProjects\onland-ui\package.json (relative path: ./src)
using description file: C:\Users\tpadle01\IdeaProjects\onland-ui\package.json (relative path: ./src/rxjs/operators)
no extension

@TylerDev6

I am getting the issue @TylerDev6 mentioned... It seems that instead of looking into the /node_modules folder, it's searching within the src folder...

This started happening after upgrading to angular v5, angular cli 1.5 and typescript 2.4.2

Angular 5 requires rxjs 5.5+.
Please note that this is unrelated to the original issue. If you continue to experience the issue, please open a separate issue.

i started getting this error after i upgraded to angular 5 and angular cli 1.5.0

Angular CLI: 1.5.0
Node: 8.9.0
OS: darwin x64
Angular: 5.0.0
... animations, common, compiler, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cli: 1.5.0
@angular/compiler-cli: 4.4.6
@angular/tsc-wrapped: 4.4.6
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.6.1
webpack: 3.8.1

I had the exactly same error here. Field 'browser' doesn't contain a valid alias configuration

@angular/cli: 1.6.0
@angular/compiler-cli: 5.1.0

Also I was getting this error when html markup is invalid. Just make your html closing tag invalid, in my case I forgot to change closing main tag.

<app-header></app-header>
<main role="main" class="container">
    <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

Using ng serve --aot I got useless Field 'browser' doesn't contain a valid alias configuration error, but switching to ng serve I got expected error saying that main tag is not closed.

Same error here, we rollback the npm update today to fix, working versions:

Angular CLI: 1.5.5
Node: 8.5.0
OS: linux x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... tsc-wrapped

@angular/cli: 1.5.5
@angular-devkit/build-optimizer: 0.0.34
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.39
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.9
typescript: 2.3.4
webpack-dev-server: 2.9.5
webpack: 3.8.1

Bad versions (cause the related error browser):

Angular CLI: 1.6.0
Node: 8.5.0
OS: linux x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... tsc-wrapped

@angular/cli: 1.6.0
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.3.4
webpack-dev-server: 2.9.7
webpack: 3.10.0

Hope this help.

Hi, tecnocat,
Thank you so much. your solution worked for me.

Our problem was only the @ng-bootstrap/ng-bootstrap library, we have the version 1.0.0-beta.6 that broken everything and need to downgrade to the version 1.0.0-beta.5 that's works fine for us.

We fix with this commands:

rm -rf node_modules/ package-lock.json
npm install
npm install @ng-bootstrap/ng-bootstrap@1.0.0-beta.5

And everything works great.

I got this error when I hade my page modules declared in both src/app/app.module.ts and their specific module e.g. src/pages/test/test.module.ts. Running ngc gave a much better error diagnosis:

./node_modules/.bin/ngc

Error: Type TestPage in /src/pages/test/test.ts is part of the declarations of 2 modules: 
AppModule in /src/app/app.module.ts and TestPageModule in /src/pages/test/test.module.ts! 
Please consider moving TestPage in /src/pages/test/test.ts to a higher module that imports 
AppModule in /src/app/app.module.ts and TestPageModule in /src/pages/test/test.module.ts. You 
can also create a new NgModule that exports and includes TestPage in /src/pages/test/test.ts 
then import that NgModule in AppModule in /src/app/app.module.ts and TestPageModule in 
/src/pages/test/test.module.ts.

I would suggest running ngc if you are getting an weird webpack build error like this as it seems like various issues are causing this specific misleading error.

Update package.json

ionic app-scripts ^3.1.4 works for me.

I was using 3.1.8 and this error occurred. Roll back to 3.1.4 and try it

Do not rely on baseUrl and instead import files via relative pathing

Hi Guys,

I have recently upgraded my all packages along-with application on angular 7. After that few of my packages started failing complaining "Field 'browser' doesn't contain a valid alias configuration".

Module not found: Error: Can't resolve 'D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css' in 'D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent' resolve 'D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css' in 'D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent' using description file: D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\package.json (relative path: .) Field 'browser' doesn't contain a valid alias configuration using description file: D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\package.json (relative path: ./src/styles.css) no extension Field 'browser' doesn't contain a valid alias configuration D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css.ts doesn't exist .tsx Field 'browser' doesn't contain a valid alias configuration D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css.tsx doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css.mjs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css.js doesn't exist as directory D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css doesn't exist [D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css] [D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css.ts] [D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css.tsx] [D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css.mjs] [D:\develop\PoseidonNext\Packages\ng-datacontextselectorcomponent\src\styles.css.js] @ multi ./src/styles.css styles[0]

Before upgrade, everything was working fine. Below, I have pasted package.json.

package.json

{
  "name": "@kognifai/poseidon-ng-datacontextselectorcomponent",
  "version": "2.2.0-alpha.0",
  "description": "Angular implementation of Poseidon data context selector component",
  "author": "Kongsberg Digital",
  "license": "SEE LICENSE IN LICENSE",
  "main": "./dist/bundles/poseidon-ng-datacontextselectorcomponent.umd.js",
  "types": "./dist/kognifai-poseidon-ng-datacontextselectorcomponent.d.ts",
  "scripts": {
    "build": "ng-packagr -p package.json && mkdir dist\\assets && copy /Y .\\src\\assets\\*.* dist\\assets\\",
    "update": "copy /Y package.publish.json dist\\package.json",
    "test": "ng test --watch=false",
    "lint": "ng lint"
  },
  "keywords": [
    "poseidon",
    "data context selector component"
  ],
  "dependencies": {
    "@angular/animations": "^7.1.2",
    "@angular/common": "^7.1.2",
    "@angular/compiler": "^7.1.2",
    "@angular/core": "^7.1.2",
    "@angular/forms": "^7.1.2",
    "@angular/http": "^7.1.2",
    "@angular/platform-browser": "^7.1.2",
    "@angular/platform-browser-dynamic": "^7.1.2",
    "@angular/router": "^7.1.2",
    "@kognifai/poseidon-datacontextservice": "^2.2.0-alpha.0",
    "@kognifai/poseidon-dropdown-directive": "^2.2.0-alpha.0",
    "@kognifai/poseidon-ng-datacontextservice": "^2.2.0-alpha.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.11.2",
    "@angular/cli": "^7.1.2",
    "@angular/compiler-cli": "^7.1.2",
    "@angular/language-service": "^7.1.2",
    "@kognifai/poseidon-script-version-bump": "^2.2.0-alpha.0",
    "@kognifai/poseidon-tslint": "^2.2.0-alpha.0",
    "@types/jasmine": "^3.3.0",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^10.12.12",
    "codelyzer": "^4.5.0",
    "core-js": "^2.6.0",
    "jasmine-core": "^3.3.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^3.1.3",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "ng-packagr": "^4.4.5",
    "protractor": "^5.4.1",
    "ts-node": "^7.0.1",
    "tsickle": "^0.34.0",
    "tslint": "^5.11.0",
    "typescript": "~3.1.6"
  },
  "ngPackage": {
    "lib": {
      "entryFile": "public_api.ts",
      "externals": {
        "@kognifai/poseidon-datacontextservice": "DataContextService",
        "@kognifai/poseidon-ng-datacontextservice": "DataContextNgService",
        "@kognifai/poseidon-dropdown-directive": "DropdownDirective"
      }
    },
    "deleteDestPath": false,
    "whitelistedNonPeerDependencies": [
      "."
    ]
  }
}

tsconfig.json

    "extends": "./tsconfig.base.json",
    "compileOnSave": false,
    "exclude": [
      "node_modules",
      "dist",
      "test.ts",
      "**/*.spec.ts"
    ],
    "compilerOptions": {
      "outDir": "dist"
    },
    "angularCompilerOptions": {
      "strictMetadataEmit": true
    },
    "include": [
        "public_api.ts",
        "./src/polyfills.ts",
        "./src/**/*"
    ],
  }
  `
tsconfig.base.json
`{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom",
      "scripthost",
      "es2015.promise"
    ]
  }
}

tsconfig.app.json

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

Kindly let me know, if there is anything needs to be changed from my side.

Thanks,
Rahul

My solution was simply add alias to webpack config

   alias: { 
        "@providers": path.resolve('./src/providers'),
        "@app": path.resolve('./src/app'),
        "@pages": path.resolve('./src/pages'),
        "@pipes": path.resolve('./src/pipes')
    }

@Juanperezc

@Juanperezc I don't have webpack config and now we can't eject as well. I just migrated my app on angular 7 and it suddenly started failing. I don't have any external dependency as well!

@rahulsahay19

@rahulsahay19 I have about the same error as you, except with my own scss files. And also it only do it when I run my unit tests (using jasmine). My app serves fine though. Didn't try it to build with prod config yet.

So I have just found a fix for my problem, so you might want to check it too if it was similar to mine : in angular.json, I had to change the short styles path for the full one
before
"styles": [ "src/styles/style.scss" ],

after
"styles": [ "apps/our-project-name/src/styles/style.scss" ],
So you might want to revise your angular.json. I hope this can help.

This seems like an old issue and there are a lot of potential solutions above. Can we close as fixed in the latest CLI or I'm missing something?

We cannot. This is still an issue with 6.0.8:

"devDependencies": {
    "@angular-devkit/build-angular": "^0.13.8",
    "@angular/cli": "^6.0.8",
    "@types/core-js": "0.9.34",
    "@types/file-saver": "0.0.1",
    "@types/jasmine": "2.5.38",
    "@types/jwt-decode": "2.2.1",
    "@types/node": "6.0.45",
    "angular2-template-loader": "^0.5.0",
    "awesome-typescript-loader": "3.4.1",
    "css-loader": "^0.28.11",
    "es5-shim": "^4.5.10",
    "gulp": "^4.0.0",
    "gulp-cli": "^2.0.1",
    "gulp-csso": "^3.0.1",
    "gulp-csv-to-json": "^0.1.1",
    "gulp-less": "^4.0.0",
    "gulp-newer": "^1.4.0",
    "gulp-prune": "^0.2.0",
    "gulp-run-command": "0.0.9",
    "gulp-watch": "^5.0.1",
    "jasmine-core": "^2.8.0",
    "karma": "^2.0.5",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-es5-shim": "0.0.4",
    "karma-es6-shim": "^1.0.0",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-typescript": "^3.0.13",
    "karma-typescript-angular2-transform": "^1.0.2",
    "karma-webpack-preprocessor": "^1.0.1",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "ngx-spec": "^1.0.1",
    "nodemon": "^1.18.3",
    "rxjs-tslint": "^0.1.5"
  },

In my case, it appears to be a missing style.css file, which it's never complained about until I upgraded.

In my case this is what did the trick, I changed this part of my code (angular.json)
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.css"],
"scripts": []
}
},

to this

"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [],
"scripts": []
}
},

This issue seems to contain reports of a similar error on different situation from several different versions of Angular CLI. It doesn't include a lot of reproductions however, so it's very hard for us to pinpoint and fix the problem.

If you're still experiencing this error today can you open a new issue with a reproduction please? Thank you.

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

Navigation Menu

Repository navigation

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

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.

18 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

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.

Activity

clydin commented on Oct 13, 2017

mark-holmes commented on Oct 13, 2017

TylerDev6 commented on Nov 1, 2017

jeanpaulattard commented on Nov 6, 2017

clydin commented on Nov 6, 2017

mrusmanali commented on Nov 7, 2017

Jeff-Li-Realster commented on Dec 8, 2017

anjmao commented on Dec 9, 2017

tecnocat commented on Dec 11, 2017

geenino commented on Dec 12, 2017

tecnocat commented on Dec 12, 2017

CoreyCole commented on Dec 13, 2017

18 remaining items

tskweres commented on Mar 27, 2018

rahulsahay19 commented on Dec 15, 2018

Juanperezc commented on Jan 3, 2019

rahulsahay19 commented on Jan 4, 2019

proAppleEater commented on Jan 23, 2019

proAppleEater commented on Jan 23, 2019

mgechev commented on Jan 23, 2019

bh-hsi commented on May 16, 2019

dragoljub-bogicevic-devtech commented on Sep 23, 2019

filipesilva commented on Oct 1, 2019

angular-automatic-lock-bot commented on Nov 1, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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