Angular-cli: Field 'browser' doesn't contain a valid alias configuration

[mark-holmes]

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

[clydin]

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.

[mark-holmes]

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.

[TylerDev6]

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-uisrc\rxjs\operators.js doesn't exist
as directory
C:\Users\tpadle01\IdeaProjects\onland-uisrc\rxjs\operators doesn't exist
looking for modules in C:\Users\tpadle01\IdeaProjects\onland-uisrc
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

[jeanpaulattard]

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

[clydin]

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.

[mrusmanali]

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

[Jeff-Li-Realster]

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

[anjmao]

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.

[tecnocat]

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.

[geenino]

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

[tecnocat]

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/[email protected]

And everything works great.

[CoreyCole]

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.

[CoreyCole]

NOTE: Definitely commit to git before you run ngc as it adds a bunch of files you don't want added to your repo i.e.

 create mode 100644 src/app/app.component.js
 create mode 100644 src/app/app.component.js.map
 create mode 100644 src/app/app.component.metadata.json
 create mode 100644 src/app/app.component.ngfactory.js
 create mode 100644 src/app/app.component.ngfactory.js.map
 create mode 100644 src/app/app.component.ngsummary.json
 create mode 100644 src/app/app.module.js
 create mode 100644 src/app/app.module.js.map
 create mode 100644 src/app/app.module.metadata.json
 create mode 100644 src/app/app.module.ngfactory.js
 create mode 100644 src/app/app.module.ngfactory.js.map
 create mode 100644 src/app/app.module.ngsummary.json
 create mode 100644 src/app/main.js
 create mode 100644 src/app/main.js.map
 create mode 100644 src/app/main.metadata.json
 create mode 100644 src/app/main.ngsummary.json

[JohannesRudolph]

A totally different problem here, we had some compiler errors (imports were incorrect, VSCode showed that nicely) in a lazy-loaded feature module. However, those went entirely undetected by ng serve while ng serve --aot would fail with this cryptic error message.

I think what needs to be done here is a better surfacing of the underlying error, it appears the error message discussed in this issue masks all sorts of different underlying errors.

[nsksaisaravana]

The same issue, Angular 5 is not showing proper error message and many breaking changes :(

[kinkoazc]

I downgraded to ng 5.0.5 to be able to see the underlying errors(as suggested here).

[leonardosalles]

I think the error messages are not too good and say nothing about the issue itself, in my case I solved this issue in tsconfig, to my app config I added an alias in my config and this alias contains a path to a module file, and this path is relative so I need to make the following changes:

Before:

"paths": {
  "@app/config": ["src/config/environment.dev.ts"]
}

After:

"paths": {
  "@app/config": ["./src/config/environment.dev.ts"]
}

Just './' and AoT is working again. Hope it helps.

[JosepAlacid]

Same error message here.
Solved moving ActivatedRoute import from @angular/router/src/router_state to @angular/router.
The import has been automatically generated by VSCode autoimport feature.

[aeslinger0]

Thanks @JosepAlacid, I had the same problem with @angular/platform-browser autoimporting as @angular/platform-browser/src/security/dom_sanitization_service in VS Code. Looks like there's an issue for it here: https://github.com/Microsoft/TypeScript/issues/19888

[jtlthe2]

@JosepAlacid and @aeslinger0, I too had this problem with auto-import in Visual Studio Code. This was fixed by changing...
import { HttpClientModule } from '@angular/common/http/src/module';
...to...
import { HttpClientModule } from '@angular/common/http';
...in my app.module.ts.

For anyone else who initially got lost in the error message like I did, everything you need is in the first two lines. The first line has the file the import was incorrectly auto-imported, and the second line is which path doesn't have the module you are trying to import.
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@angular/common/http/src/module'

[Marcidius]

I was having this exact same error and couldn't figure it out. In our project I had refactored it a bit and created a shared module within one of the features and moved a component from one feature to the shared feature. Unfortunately, and I can't nail down what, but in merging with our dev branch the component actually reappeared in the feature (where it was previously).

This was the cause of the error that's discussed here. It said nothing about that being the issue but I walked through the Git history to figure out what might have caused this error and discovered two duplicate components. I'm guessing the only reason that the error message wasn't more clear in my case is that even though the files were restored to their original location they weren't included in that module.

[karsunke]

In my case the problem was, that I imported Router from the wrong package:

I changed
import {Router} from '@angular/router/src/router';
to
import {Router} from '@angular/router';

then it worked

[briancodes]

There seems to be problems with the way TypeScript imports Angular packages:
import { ChangeDetectionStrategy } from '@angular/compiler/src/core';
ng serve with --aot was working, but ng serve without --aot was not. That import was the problem. TypeScript have added a fix for this issue which was included in the nightly build, but it's still not perfect - that's the version I'm using in VSCode
It' discussed here it https://github.com/Microsoft/TypeScript/issues/19694

[shairez]

Had the same issue with accidentally importing EventEmitter from selenium (auto import from vscode... )

Fixed the import, no more error

[changhuixu]

same issue as @jtlthe2

[changhuixu]

it works for me now. The issue was wrong import path for HttpClientModule

VS code intellisence gives the following import

import { HttpClientModule } from "@angular/common/http/src/module";

While, it should be

import { HttpClientModule } from "@angular/common/http";

[briancodes]

I'm now using Typescript version 2.7.0dev in VSCode. Pointing to that local version by configuring "typescript.tsdk" in Workspace Settings. The import problem has been fixed in that version

[laserus]

For me the same problem occurred when I generate files in one project with (css styles) and moved them to another with scss without renaming extension inside of ts file.

The error is really tricky to follow and find the reason.

[eyal7773]

My solution :

I work on windows machine.
And I get this error only on linux machines
When the same angular project already work fine on windows .

So I checked and find that the messages
Field 'browser' doesn't contain a valid alias configuration

is becuase in some places I used small\upper case that does NOT fit the files/folders.
When I fixed it - angular complied successfully.

---

example -
import {myModule} from '../../WrongCamelCase';

where actually - the file was in other camel case.

[tskweres]

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

[rahulsahay19]

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

[Juanperezc]

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')
    }

[rahulsahay19]

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

[proAppleEater]

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

[proAppleEater]

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.

[mgechev]

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?

[bh-heidrick]

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.

[dragoljub-bogicevic-devtech]

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": []
}
},

[filipesilva]

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.

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

_{_This action has been performed automatically by a bot._}