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

Type of Issue

[X] Bug Report

Description

I want to import bar.service.ts directly, rather than through public_api.ts, because I have more than 10 services in the actual lib, if I add a service I have to modify public_api.ts, this is a little bit of a trouble

but When I import bar.service.ts directly, I got error :

app.component.ts

...
// it's work
// import { BarService } from '../../dist/my-lib/';

// it's not work
import { BarService } from '../../dist/my-lib/bar/bar.service';

@Component({
  ...
})
export class AppComponent {
  ...
}

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve '../../dist/my-lib/bar/bar.service' in 'D:\TestGit\mydir\ng-packaged\sr
c\app'
resolve '../../dist/my-lib/bar/bar.service' in 'D:\TestGit\mydir\ng-packaged\src\app'
  using description file: D:\TestGit\mydir\ng-packaged\package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\TestGit\mydir\ng-packaged\package.json (relative path: ./src/app)
    using description file: D:\TestGit\mydir\ng-packaged\dist\my-lib\package.json (relative path: ./bar/bar.se
rvice)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\TestGit\mydir\ng-packaged\dist\my-lib\bar\bar.service doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        D:\TestGit\mydir\ng-packaged\dist\my-lib\bar\bar.service.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\TestGit\mydir\ng-packaged\dist\my-lib\bar\bar.service.js doesn't exist
      as directory
        D:\TestGit\mydir\ng-packaged\dist\my-lib\bar\bar.service doesn't exist
[D:\TestGit\mydir\ng-packaged\dist\my-lib\bar\bar.service]
[D:\TestGit\mydir\ng-packaged\dist\my-lib\bar\bar.service.ts]
[D:\TestGit\mydir\ng-packaged\dist\my-lib\bar\bar.service.js]
[D:\TestGit\mydir\ng-packaged\dist\my-lib\bar\bar.service]
 @ ./src/app/app.component.ts 14:0-63
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

How To Reproduce

open my forked repo

1. Change import path of “@my/lib” inside app.component
2. Not through “public_api.ts,” import “barService” directly

Expected Behaviour

import service directly, not through public_api.ts

Version Information

ng-packagr: v1.5.1
node: v6.11.4
@angular: v5.0.1
rxjs:v5.5.2
zone.js:0.8.18

---
**ng version**
Angular CLI: 1.5.0
Node: 6.11.4
OS: win32 x64
Angular: 5.0.1

@angular/cli: 1.5.0
@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.2
typescript: 2.4.2
webpack: 3.8.1

please include any version information that might be relevant, e.g. other third-party libraries

[dmytro-parfenov]

@macjohnny I found other solution. You should export your service in the public_api.ts. Something like this: export {class of your module} from ‘path to your module of the package’; export {class of your service} from ‘path to your service in the module of the package’;

In this case your module and service will be public and you can use them in any modules of your project.

[dmytro-parfenov]

@lichunbin814 yes of course. You should import module or service like this:

import {BarModeule} from “directory name of your package in the node_modules”;

import {BarService} from “directory name of your package in the node_modules”;

Before that you should export these service and module in the public-api.ts