Using paths inside tsconfig causing error on JIT: field 'browser' doesn't contain a valid alias configuration

Bug Report or Feature Request (mark with an x)

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

While using the paths object inside tsconfig.json, module resolution doesn’t seem to work anymore since the latest release. It did work on 1.3.0-rc.5. Ahead of Time does work. This seems to happen when you reference the src folder or anything lower down the tree

Versions.

@angular/cli: 1.3.0 node: 8.2.1 os: win32 x64 @angular/animations: 4.3.3 @angular/common: 4.3.3 @angular/compiler: 4.3.3 @angular/core: 4.3.3 @angular/forms: 4.3.3 @angular/http: 4.3.3 @angular/platform-browser: 4.3.3 @angular/platform-browser-dynamic: 4.3.3 @angular/router: 4.3.3 @angular/cli: 1.3.0 @angular/compiler-cli: 4.3.3 @angular/language-service: 4.3.3

Repro steps.

1. Upgrade cli to version 1.3.0, this used to work in 1.3.0-rc.5 and before
2. Create a project
3. Set a paths property to "@root/*": ["./*"] inside tsconfig.app..json
4. Change the import of AppComponent inside AppModule to import { AppComponent } from '@root/app/app.component';
5. Run ng serve
6. Run ng serve --aot to see that this does work

The log given by the failure.

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@root/app/app.component' in 'C:\Projects\angular-cli-v130-bug\src\app'
resolve '@root/app/app.component' in 'C:\Projects\angular-cli-v130-bug\src\app'
  Parsed request is a module
  using description file: C:\Projects\angular-cli-v130-bug\package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\Projects\angular-cli-v130-bug\package.json (relative path: ./src/app)
    resolve as module
      C:\Projects\angular-cli-v130-bug\src\app\node_modules doesn't exist or is not a directory
      C:\Projects\angular-cli-v130-bug\src\node_modules doesn't exist or is not a directory
      C:\Projects\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\Projects\angular-cli-v130-bug\node_modules
        using description file: C:\Projects\angular-cli-v130-bug\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: C:\Projects\angular-cli-v130-bug\package.json (relative path: ./node_modules)
          using description file: C:\Projects\angular-cli-v130-bug\package.json (relative path: ./node_modules/@root/app/app.component)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Projects\angular-cli-v130-bug\node_modules\@root\app\app.component doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Projects\angular-cli-v130-bug\node_modules\@root\app\app.component.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Projects\angular-cli-v130-bug\node_modules\@root\app\app.component.js doesn't exist
            as directory
              C:\Projects\angular-cli-v130-bug\node_modules\@root\app\app.component doesn't exist

Desired functionality.

I would like to see no errors, obviously 😉

Mention any other details that might be useful.

Created a repo showing this issue

[tacman]

Is this something that can be fixed quickly? It’s a show-stopper for us.

[miguelramos]

After fighting some days to put an “emulated” type monorepo, i got working and compiling in AOT mode with paths mappings in the current version (1.4.1) of the CLI.

So my approach have some config time. First, i’m using multi app support and let’s start on angular-cli.json. For the test project, called playground and you can see on the screenshot bellow i’ve use two configs for the same project, this only to have different tsconfig.app.json for resolving ts path maps.

I’ve a shared code on lib, and want to share between the multiple apps. On tsconfig.json in the root my config is like this:

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
      "@foursource/*": ["src/lib/*"],
      "@foursource/common": ["src/lib/common/public_api.ts"],
      "@foursource/core": ["src/lib/core/public_api.ts"],
      "@foursource/ui": ["src/lib/ui/public_api.ts"],
      "@foursource/ui/button": ["src/lib/ui/button/public_api.ts"]
    },

    "outDir": "./dist/out-tsc",
    "baseUrl": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "exclude": [
    "tmp"
  ]
}

Then inside the playground project i have two tsconfig for dev mode and for aot compilation.

tsconfig.dev.json (DEV)

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "paths": {
      "@foursource/common": ["../lib/common/public_api.ts"],
      "@foursource/core": ["../lib/core/public_api.ts"],
      "@foursource/ui": ["../lib/ui/public_api.ts"],
      "@foursource/ui/button": ["../lib/ui/button/public_api.ts"]
    },
    "outDir": "../../out-tsc/app",
    "baseUrl": "",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

tsconfig.play.json (AOT)

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "paths": {
      "@foursource/common": ["lib/common/public_api.ts"],
      "@foursource/core": ["lib/core/public_api.ts"],
      "@foursource/ui": ["lib/ui/public_api.ts"],
      "@foursource/ui/button": ["lib/ui/button/public_api.ts"]
    },
    "outDir": "../../out-tsc/app",
    "baseUrl": "",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

And for this to work package.json scripts have to done some things before compile it, special on AOT mode. For this i copy folder lib to inside the playground app and that’s the action that is needed for resolve paths in path mapping.

package.json

"ng": "node --max_old_space_size=8192 ./node_modules/.bin/ng",
"start:website": "npm run ng serve -- --app=website --aot=false --progress=true --verbose=true --port=3000 --host=www.foursource.dev --sourcemaps=true",
"start:platform": "npm run ng serve -- --app=platform --aot=false --progress=true --verbose=true --port=4000 --host=app.foursource.dev --sourcemaps=true",
"start:play": "npm run ng serve -- --app=playground-dev --aot=false --progress=true --verbose=true --port=5000 --host=www.playground.dev --sourcemaps=true",
"test:play": "ng test --app=playground",
"build": "ng build",
"build:play:aot": "cpr ./src/lib ./src/playground/lib -o && npm run ng build -- --app=playground --aot=true --target=production --environment=prod --sourcemaps=true --vendorChunk=true --output-hashing=all --progress=true  && rimraf ./src/playground/lib",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"

As you can see on start:play i call playground-dev to have dev mode and on build:play:aot the playground for AOT.

With this configs, i have multi apps like website, b2b app, mobile and so on emulating monorepo, sharing code, components and styles on my company.

An extensive temporary fix to use path maps of ts. Main value copy my shared lib to the project that i’m compiling.

The only problem that i’m facing is on run test, but i think it’s a different thing from this thread. Current error on karma:

Help on this.

Cheers.!!