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

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