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

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

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.

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

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

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.

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.

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

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.

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.

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

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.

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.

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?

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.

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

Fixed the import, no more error

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

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

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.