build -aot referencing Angular 4 library fails: Field 'browser' doesn't contain a valid alias configuration

[lubos-bistak]

Bug Report or Feature Request (mark with an x)

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

Building Angular4 application with AoT referencing an Angular4 library containing only *.d.ts and *.metadata.json leads to ERROR Field 'browser' doesn't contain a valid alias configuration.

According to articles:

• https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad
• https://medium.com/@trekhleb/how-to-create-aot-jit-compatible-angular-4-library-with-external-scss-html-templates-9da6e68dac6e

All referenced libraries must include the .metadata.json file along side any .d.ts files they produce…

After including also library source files *.js into npm distribution , AoT build of application referencing this library succeeds.

Library structure node_modules/my-libarary

• /assets
• /bundles ++ my-library.umd.js ++ my-library.umd.js.map
• /src ++ index.d.ts ++ my-library.module.d.ts ++ my-library.module.metadata.json ++ other .d.ts and .metadata.json
• package.json
• public_api.d.ts

Relevant files of application demo-app built with AoT that is referencing my-library

demo-app/.angular-cli.json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "demo-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "dms",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**/*"
    }
  ],
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

demo-app/tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "../",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

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

Versions.

@angular/cli: 1.3.2 node: 8.2.1 os: darwin x64 @angular/animations: 4.3.6 @angular/cdk: 2.0.0-beta.10 @angular/common: 4.3.6 @angular/compiler: 4.3.6 @angular/core: 4.3.6 @angular/forms: 4.3.6 @angular/http: 4.3.6 @angular/platform-browser: 4.3.6 @angular/platform-browser-dynamic: 4.3.6 @angular/router: 4.3.6 @angular/cli: 1.3.2 @angular/compiler-cli: 4.3.6

Repro steps.

ng build -aot

The log given by the failure.

$$ ng build -aot
Date: 2017-09-24T13:26:04.983Z
Hash: 97cffe8d6e3fbb7ba888
Time: 42197ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 55 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 203 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 213 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.93 MB [initial] [rendered]

ERROR in ./src/$$_gendir/app/app.module.ngfactory.ts
Module not found: Error: Can't resolve 'my-library/src/my-library.module' in '<ABSOLUTE-PATH>/my-library/demo-app/src/$$_gendir/app'
resolve 'my-library/src/my-library.module' in '<ABSOLUTE-PATH>/demo-app/src/$$_gendir/app'
  Parsed request is a module
  using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src/$$_gendir/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src/$$_gendir/app)
    resolve as module
      <ABSOLUTE-PATH>/demo-app/src/$$_gendir/app/node_modules doesn't exist or is not a directory
      <ABSOLUTE-PATH>/demo-app/src/node_modules doesn't exist or is not a directory
      <ABSOLUTE-PATH>/node_modules doesn't exist or is not a directory
      ...
      /node_modules doesn't exist or is not a directory
      looking for modules in <ABSOLUTE-PATH>/demo-app/node_modules
        using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./node_modules)
          using description file: <ABSOLUTE-PATH>/demo-app/node_modules/my-library/package.json (relative path: ./src/my-library.module)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module.js doesn't exist
            as directory
              <ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module doesn't exist
      looking for modules in <ABSOLUTE-PATH>/node_modules
        using description file: <ABSOLUTE-PATH>/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: <ABSOLUTE-PATH>/package.json (relative path: ./node_modules)
          using description file: <ABSOLUTE-PATH>/package.json (relative path: ./node_modules/my-library/src/my-library.module)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/node_modules/my-library/src/my-library.module doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/node_modules/my-library/src/my-library.module.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/node_modules/my-library/src/my-library.module.js doesn't exist
            as directory
              <ABSOLUTE-PATH>/node_modules/my-library/src/my-library.module doesn't exist
      looking for modules in <ABSOLUTE-PATH>/demo-app/src/$$_gendir/node_modules
        using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src/$$_gendir/node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src/$$_gendir/node_modules)
          using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src/$$_gendir/node_modules/my-library/src/my-library.module)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/$$_gendir/node_modules/my-library/src/my-library.module doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/$$_gendir/node_modules/my-library/src/my-library.module.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/$$_gendir/node_modules/my-library/src/my-library.module.js doesn't exist
            as directory
              <ABSOLUTE-PATH>/demo-app/src/$$_gendir/node_modules/my-library/src/my-library.module doesn't exist
      looking for modules in <ABSOLUTE-PATH>/demo-app/node_modules
        using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./node_modules)
          using description file: <ABSOLUTE-PATH>/demo-app/node_modules/my-library/package.json (relative path: ./src/my-library.module)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module.js doesn't exist
            as directory
              <ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module doesn't exist
      looking for modules in <ABSOLUTE-PATH>/demo-app/src
        using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src)
          using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src/my-library/src/my-library.module)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.js doesn't exist
            as directory
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module doesn't exist
      looking for modules in <ABSOLUTE-PATH>/demo-app/src
        using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src)
          using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src/my-library/src/my-library.module)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.js doesn't exist
            as directory
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module doesn't exist
      looking for modules in <ABSOLUTE-PATH>/demo-app/src
        using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src)
          using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src/my-library/src/my-library.module)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.js doesn't exist
            as directory
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module doesn't exist
      looking for modules in <ABSOLUTE-PATH>/demo-app/src
        using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src)
          using description file: <ABSOLUTE-PATH>/demo-app/package.json (relative path: ./src/my-library/src/my-library.module)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.js doesn't exist
            as directory
              <ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module doesn't exist
[<ABSOLUTE-PATH>/demo-app/src/$$_gendir/app/node_modules]
[<ABSOLUTE-PATH>/demo-app/src/node_modules]
[<ABSOLUTE-PATH>/node_modules]
...
[/Users/node_modules]
[/node_modules]
[<ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module.ts]
[<ABSOLUTE-PATH>/node_modules/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module.js]
[<ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/node_modules/my-library/src/my-library.module.ts]
[<ABSOLUTE-PATH>/demo-app/src/$$_gendir/node_modules/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/node_modules/my-library/src/my-library.module.js]
[<ABSOLUTE-PATH>/node_modules/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/src/$$_gendir/node_modules/my-library/src/my-library.module.ts]
[<ABSOLUTE-PATH>/demo-app/src/$$_gendir/node_modules/my-library/src/my-library.module.js]
[<ABSOLUTE-PATH>/demo-app/src/$$_gendir/node_modules/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module.ts]
[<ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module.js]
[<ABSOLUTE-PATH>/demo-app/node_modules/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.ts]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.js]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.ts]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.js]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.ts]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.js]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.ts]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module.js]
[<ABSOLUTE-PATH>/demo-app/src/my-library/src/my-library.module]
 @ ./src/$$_gendir/app/app.module.ngfactory.ts 44:0-79
 @ ./src/main.ts
 @ multi ./src/main.ts### Desired functionality.

Mention any other details that might be useful.

This error can be reproduced with following angular-cli versions:

• 1.3.2
• 1.4.3
• 1.5.0-beta.1

[filipesilva]

I know the error message is a bit verbose, but the in first lines is the real error:

ERROR in ./src/$$_gendir/app/app.module.ngfactory.ts
Module not found: Error: Can't resolve 'my-library/src/my-library.module' in '<ABSOLUTE-PATH>/my-library/demo-app/src/$$_gendir/app'
resolve 'my-library/src/my-library.module' in '<ABSOLUTE-PATH>/demo-app/src/$$_gendir/app'

This basically means that your library can't be found. The likely cause for this is the way you package your library. I can't verify that the articles you mentioned do it the right way, but you can find some information about packaging and using libraries in https://github.com/angular/angular-cli/wiki/stories-linked-library and https://github.com/angular/angular-cli/issues/6510.

[SrDonOso]

the issue is that the compiler looks for a .ts file, but when the library is installed generates a .d.ts file, There's a workaround where you rename the file removing the .d but... is there another solution?

Plese help!

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