Consume published angular component

[alator21]

Which scope/s are relevant/related to the feature request?

Don't know / other

Information

I have a private package on my registry, that exports an angular directive which looks like this

Directive()
export abstract class StatefulComponent<S, VE> implements OnInit, OnDestroy {
// ...
}

This library was created in an NX monorepo. It is using angular v17.

tsconfig.json

{
	"compilerOptions": {
		"target": "es2022",
		"useDefineForClassFields": false,
		"forceConsistentCasingInFileNames": true,
		"strict": true,
		"noImplicitOverride": true,
		"noPropertyAccessFromIndexSignature": true,
		"noImplicitReturns": true,
		"noFallthroughCasesInSwitch": true
	},
	"files": [],
	"include": [],
	"references": [
		{
			"path": "./tsconfig.lib.json"
		},
		{
			"path": "./tsconfig.spec.json"
		}
	],
	"extends": "../../../tsconfig.base.json",
	"angularCompilerOptions": {
		"enableI18nLegacyMessageIdFormat": false,
		"strictInjectionParameters": true,
		"strictInputAccessModifiers": true,
		"strictTemplates": true
	}
}

tsconfig.lib.json

{
	"extends": "./tsconfig.json",
	"compilerOptions": {
		"outDir": "../../../dist/out-tsc",
		"declaration": true,
		"declarationMap": true,
		"inlineSources": true,
		"types": []
	},
	"exclude": [
		"src/**/*.spec.ts",
		"src/test-setup.ts",
		"jest.config.ts",
		"src/**/*.test.ts"
	],
	"include": ["src/**/*.ts"]
}

tsconfig.lib.prod.json

{
	"extends": "./tsconfig.lib.json",
	"compilerOptions": {
		"declarationMap": false
	},
	"angularCompilerOptions": {
		"compilationMode": "partial"
	}
}

This component is built and published through ci/cd to my private registry. I then consume this component from other angular applications(outside of the NX monorepo) by extending it.

export class ExampleComponent extends StatefulComponent<
  ExampleState,
  ExampleEvent
>

This has been working for my normal angular applications.

---

When I started my migration to astro-angular, I started getting errors like the one below

[ERROR] No value provided for @angular/core symbol 'ɵɵInputFlags'.

when i'm serving the application (astro dev) and accessing the component in question.

I've tried adapting the tsonfig.lib.json with the values that are in the documentation (https://analogjs.org/docs/packages/astro-angular/overview), but I keep getting the same error.

Is this something that should work generally?

Describe any alternatives/workarounds you're currently using

Copied the library to component in my project as is, and it worked.

I would be willing to submit a PR to fix this issue

• [X] Yes
• [ ] No

[crutchcorn]

A minimal reproduction might be helpful here; as this seems very project-specific. I'd like to volunteer to investigate this if you're able to provide that

[alator21]

Some updates:

I started trying to create a repro and figured out that I had different minor versions of angular in the library and the application(17.3.2 vs 17.0.0). Updating the versions to match made the reported issue go away. I am now getting a different issue, which i'm not sure if it is an analog or an angular problem.

ERROR RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203

Repro in stackblitz

• Started with astro - minimal repo
• Installed analog(Followed the documentation)
• Installed @astrojs/node
• Installed the angular cli
• Created an angular project ( named another-lib)
• Created an angular library inside of it (named lib1)
• Added a very basic component and exported it( lib1/Lib1Component )
• 'Linked' it to the main astro/analog application(Follow the steps in the readme)
• Extend the Lib1Component(hello.component.ts)
• Build the astro application(astro build)
• Serve the astro application(astro preview)

[brandonroberts]

It's likely that this only happens during SSR? If so, try doing this first as Angular packages need an extra compilation step

https://analogjs.org/docs/features/server/server-side-rendering#transforming-packages-for-ssr-compatibility

[alator21]

Yep, this fixed it on the stackblitz repro. I still have issues on my main project which is only different from the repro, on that the library is generated in an nx monorepo. Will close this issue for now as my problem is probably due to different/faulty tsconfig.

[alator21]

For reference: I fixed it, and it was dumb. So i use bun, and i was linking the library with bun link for local testing. Apparently if said library is a symlink, the above errors were thrown. Once i copied(instead of symlinked) the library in the node_modules, it worked. The repro worked, because i was copying the library(and not symlinked) as well

[brandonroberts]

@alator21 cool, glad you got it figured out