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

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

I found the answer, it turns out that flatModuleId needs to be set to @scope such as

"flatModuleId": "@myscope/my-module" in tsconfig.es5.json. 

Thanks to @jdjuan #75

@miguelramos Hey, I noticed you have followed a similar path with me. I have an open source repo https://github.com/nekkon/angular-cli-library which follows a similar logic with yours.

Same here - 1.4.0

EDIT

Even after updating the yarn.lock file, error is still there

• with 1.3.2 in dherges/ng-packaged@1e6ad9d
• with 1.4.0-rc.0 in dherges/ng-packaged@a3b029aa3e4f4b111e355ae69d61c0d6bb53ff47

---

Error still persists with 1.3.2 in dherges/ng-packaged@e4f5b3a

Build error started when upgrading from 1.3.0-rc.3 to 1.3.0 in dherges/ng-packaged@3c983ae

History of commits w/ build success anf ailures

Updating to 1.4.0-rc.0 does not solve the error in dherges/ng-packaged#29

Error message

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@my/lib' in '/home/ubuntu/ng-packaged/src/app'
resolve '@my/lib' in '/home/ubuntu/ng-packaged/src/app'
  Parsed request is a module

Configuration

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "angularCompilerOptions": {
    "paths": {
      "@my/lib": [ "../dist/my-lib" ]
    }
  },
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [],
    "paths": {
      "@my/lib": [ "../dist/my-lib" ]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "ng-packaged"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist/app",
      /* .. */
    }
  ]
}

I have the same problem as @PierreDuc described. I have tried v1.3.1 and 1.4.0-beta.2, both resulted the same error message. Can anyone from the team respond to this issue ?

Thanks.

@bastienJS check if you have an import from @angular/src/.../..., this can also cause this error. Make sure to import only from @angular/core etc. Nothing from src. Thereby the issue I mentioned is only present in JIT and -not- in AOT

I get the same error: Field ‘browser’ doesn’t contain a valid alias configuration

with v1.3.0 but I do not use AOT or paths in tsconfig.json!

@PierreDuc et al: Fix the @angular/cli version in package.json to 1.3.0-rc.5 resolves the issue for me. This only occurs in ^1.3.0. @filipesilva FYI. Maybe the reason is what @karptonite has said.