I am learning to publish a simple Angular library to NPM. I followed many different tutorials (such as here or here or here) and got the package on the NPM. However, when I try using it in a test project, it always throws an error.

WHAT I DID

TL;DR: You can find what I was attempting to make from github and npm.

1. I created the new angular project as outlined in their documentation:

ng new angularx-wrapper-workspace --create-application=false
cd angularx-wrapper-workspace
ng generate library angularx-wrapper

My folder structure is as followed:

2. I develop the library, simply put, these are the core files:

//public-api.ts
export * from './lib/angularx-wrapper.module';
export * from './lib/angularx-wrapper.component';

//angularx-wrapper.module.ts
import { NgModule } from '@angular/core';
import { AngularXWrapperComponent } from './angularx-wrapper.component';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [AngularXWrapperComponent],
  imports: [
      CommonModule
  ],
  exports: [AngularXWrapperComponent]
})
export class AngularXWrapperModule { }

(The error appears to be with the npm packing process, so I will omit irrelevant details)

3. I build the library for publishing:

ng build angularx-wrapper --prod

4. I publish the library:

npm publish

The library was published successfully. However, when I create a new test application to see if it works (the test application is completely different and not inside the library folder):

ng new test
cd test
npm install angularx-wrapper

QUESTIONS

Two things happened. The first thing was that I was not able to import the library to my test app:

The only way to import it is to do this:

Even after successfully importing the library to my test app, running it produced this error:

ERROR in ./node_modules/angularx-wrapper/src/lib/angularx-wrapper.component.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /code/user/test/node_modules/angularx-wrapper/src/lib/angularx-wrapper.component.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format.
    at AngularCompilerPlugin.getCompiledFile (/code/user/code/user/test/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:933:23)
    at /code/afunworm/code/user/test/node_modules/@ngtools/webpack/src/loader.js:41:31
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
ERROR in ./node_modules/angularx-wrapper/src/lib/angularx-wrapper.module.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /code/user/code/user/test/node_modules/angularx-wrapper/src/lib/angularx-wrapper.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format.
    at AngularCompilerPlugin.getCompiledFile (/code/user/code/user/test/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:933:23)
    at /code/user/code/user/test/node_modules/@ngtools/webpack/src/loader.js:41:31
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

What step did I do that was wrong? Was it the folder structure of my library that caused the problem? I can't seem to find any resources on how to resolve this.