Libraries depending on libraries and template inlining not working?

First off, thank you for the generator. It has been pretty tough figuring out exactly what the Angular community is aiming for with project configuration of libraries vs. applications.

I created two libraries (call them A and B) using this generator and an application using the angular-cli. Library A depends on B, and the library A has templateUrl specified in a number of components. When the app is built (npm run build), the templates are not included. Also, the library that depends on the other can’t run through npm run build.

I’m not sure exactly which errors are caused by what problems, so I’m just going to walk through this here to see if I can get my libraries working (they’ve been fine up until now, but I’ve been using tsc and not been worrying about AoT).

Taking a step back to just Library A, if I run npm run prepublish, nothing gets inlined. For example, one of the components in A that has a templateUrl specified, the corresponding js still says templateUrl: 'the.component.template.name.html' – it was never in-lined.

Not knowing if this is tied to running npm run build, I tried it, but I get the following error:

Error: ENOENT: no such file or directory, open '/projects/ui-development/library-a/dist/node_modules/library-b/src/shared/base.service.metadata.json'
    at Error (native)
    at Object.fs.openSync (fs.js:640:18)
    at Object.fs.writeFileSync (fs.js:1333:33)
    at MetadataWriterHost.writeMetadata (/projects/ui-development/library-a/node_modules/@angular/tsc-wrapped/src/compiler_host.js:115:22)
    at MetadataWriterHost._this.writeFile (/projects/ui-development/library-a/node_modules/@angular/tsc-wrapped/src/compiler_host.js:92:23)
    at Object.writeFile (/projects/ui-development/library-a/node_modules/typescript/lib/typescript.js:64240:132)
    at Object.writeFile (/projects/ui-development/library-a/node_modules/typescript/lib/typescript.js:9020:14)
    at printSourceFileOrBundle (/projects/ui-development/library-a/node_modules/typescript/lib/typescript.js:61204:16)
    at emitSourceFileOrBundle (/projects/ui-development/library-a/node_modules/typescript/lib/typescript.js:61155:21)
    at Object.forEachEmittedFile (/projects/ui-development/library-a/node_modules/typescript/lib/typescript.js:8986:17)
Compilation failed

It seems to be trying to open library B’s base service metadata file in library-a/dist/node_modules/library-b/src/... (vs. library-a/node_modules/library-b/dist/src/...).

As for my project setup, this project’s README suggests using npm link. The libraries cannot be linked because there seem to be many closed (and unresolved) issues related to the angular-cli generating applications that ultimately emit obscure errors about makeDecorator not being statically analyzable, etc. (here’s one). Therefore my only solution so far has been to make my package.json dependency for the libraries point to a file path relative to the application or library:

Application’s package.json

"dependencies": {
    "library-a": "../library-a"

Library A’s package.json

"dependencies": {
    "library-b": "../library-b"
}

In each case, I then use npm install ... to install/refresh changes up-stream to the application.

I apologize for the rather wide net of errors, but I’ve been at this all day trying to unpack all these little obscure error messages. At this point I’m not sure what errors are related and which are not since all of my code runs through tsc just fine.

[btgoodwin]

@jvandemo @caroso1222 for the sake of closing the loop on my last two problems in case someone’s google voyage drops them here:

RangeError... when produced by gulp ngc: This was because of a ModuleWithProviders pattern that worked fine back in 2.x with Optional() arguments configuring a service. My setup was like the old RouterModule, using OpaqueToken. Now you have to use InjectionToken which requires specifying a type. Mine is a double string list (originally, specified as Array<Array<string>>). That was my problem. Switching to string[][] fixed it. 🤷‍♂️

I then started getting TypeError: Cannot read property 'module' of undefined without any reference to my code. That problem was related to the 2.x method of configuring submodule routes in the RouterModule. In the past, to get that working where you navigate to components provided by child modules and routes, one had to export the child routes all the way out to the parent where forRoot would be used to configure the routes. Now, it seems they have forChild and loadChildren working such that the parent sets its path to the child:

{ path: 'some-path', loadChildren: './some-child/module#SomeChildModule' }

Cheers 😃

[jvandemo]

@btgoodwin — Okay, if I understand correctly, you have 2 libraries:

• Library A
• Library B

From the Library A directory you should:

• $ npm run build to generate dist directory for library A, which should inline styles and templates of library A in the bundle in its dist directory
• $ npm link dist to link the dist directory of library A

Then from the Library B directory, you should:

• $ npm link library-a (or whatever you named library A in its src/package.json)
• $ npm run build to generate dist directory for library B, which should inline styles and templates of library B in the bundle in its dist directory

Also, for automatic inlining of templates and styles, you must have version 9.0.0 of this generator.

Can you let us know how that goes? Thanks! 👍