How to get it working with an AoT app?

I tried https://github.com/dherges/ng-packaged but it throws an error when building as AoT.

ERROR in /Users/bc/code/Terminus/ng-packaged/src/$$_gendir/app/app.component.ngfactory.ts (11,26): Cannot find module '../../../dist/my-lib/lib.ngfactory'.

ERROR in ./src/$$_gendir/app/app.component.ngfactory.ts
Module not found: Error: Can't resolve '../../../dist/my-lib/lib.ngfactory' in '/Users/bc/code/Terminus/ng-packaged/src/$$_gendir/app'
 @ ./src/$$_gendir/app/app.component.ngfactory.ts 9:0-62
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

I notice that the lib.ngfactory is never generated.

---

I then tried to test one of the sample integrations as outlined here: https://github.com/dherges/ng-packagr/blob/master/integration/README.md

But yarn sample doesn’t seem to exist. And trying to build sample_material for example, it barks about missing dependencies. When those are installed the error becomes:

---

🙏🏼 I would greatly appreciate any tips on this. I see that integration/consumer-ng-cli exists which seems like it should cover my use case (building a external library that is consumed by an @angular/cli app).

I seem to be very close… just missing the ngfactory file so I feel like I may just have a setting incorrect somewhere.

Thanks in advance!

[dherges]

For the first error:

I think this is down due to paths mapping in tsconfig.jspn. Angular CLI generates the factory classes correctly – a library only ships the *.metadata.json, the *.ngfactory.ts are created by the app’s build – but then, because of the mappings, when compiling the app tsc cannot find the auto-generated factory classes.

The Angular team has quite a few issues on that: angular/angular#13008, angular/angular#13487, angular/angular#12249, angular/angular#16281, possibly more.

What does work then, is to change that paths mapping and copy the dist folder of the library to the root folder of the CLI sources. Example:

|- .angular-cli.json
|- src
    |- app
        |- app.module.ts
    |- @foo
        |- bar

Then, for some reason, tsc picks up the *.ngfactory.ts files from the right places. It works in another project that way, just I’d like to not put a workaround example into ng-packaged for the time being.

---

Second, another option would be to use yarn link. It creates a symlink from node_modules/@foo/bar to dist-folder-of-library-containing-package-json`.

---

In general, the whole “multi-module” thing is a bit weired, since the integration-ng-cli can and should be yarn installed in its own directory (I tried the yarn link in there), while the other samples MUST NOT be yarn installed (they share dependencies from the root of the project).

To be honest, I am working around the issue for the time being. Ideally, I’d like to see what (yarn workspaces #3294)[https://github.com/yarnpkg/yarn/issues/3294] gives to “multi-module projects” and then see later how to set-up such a “multi-module workspace” … maybe, it could look like this

|- demo
   |- src
       |- app.module.ts
   |- .angular.cli.json
   |- package.json
|- packages
    |- lib-one
        |- package.json
        |- ng-package.json
    |- lib-two
        |- package.json
        |- ng-package.json
    |- ..
|- node_modules    # shared (!) dependencies at top-level, across all "multi-modules"
    |- @lib
         |- one # symlink to dist folder for `lib-one`
         |- two # symlink to dist folder for `lib-two`

[benjamincharity]

Ahh yes, I could definitely do that. 🎆 Having a demo module with the lib would be great; but not a necessity.

Good call on the postbuild script… didn’t even think about that!

Thanks again for the quick responses!