This is a fundamental query.
As an individual just starting with Angular and npm, this may seem like a basic question for some. However, despite extensive research, I haven't been able to find a solution.
Before embarking on a project, I want to create a small proof of concept. I aim to utilize a package named Imported within another package called Importer
The package.json file of Importer lists Imported as a dependency:
"dependencies": {
...
"imported": "file:../Imported",
...
}
As expected, Imported can be found in the node_modules folder of Importer.
I have followed Angular's guidelines on reusing modules. The sample they provide is exactly what I am attempting, albeit from within a dependency.
Consequently, I imported ImportedAppModule in Importer's app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ImportedAppModule } from 'imported/src/app/app.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ImportedAppModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In addition, I exported the component in Imported's app.module.ts :
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ImportedAppComponent } from './app.component';
@NgModule({
declarations: [
ImportedAppComponent
],
imports: [
BrowserModule
],
exports: [
ImportedAppComponent
],
providers: [],
bootstrap: [ImportedAppComponent]
})
export class ImportedAppModule { }
Despite this setup, I encountered the following error:
ERROR in ../imported/src/app/app.module.ts Module build failed: Error: \imported\src\app\app.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
It appeared that I needed to include this dependency in tsconfig.app.json. However, I also came across information suggesting otherwise and that it should be included in the Importer's bootstrap array. I tried both approaches, but neither proved successful. Nevertheless, the specific configuration details are not covered in this query.
So, here's my dilemma - What's the standard procedure for handling this situation? Am I moving in the right direction? If so, what should be my next step?
I attempted using ng build --aot in the Imported package and added the dependency to the dist folder in Importer initially. Unfortunately, it resulted in a failure stating the absence of a package.json file. Subsequently, I considered resorting to jit methodology; however, my preference remains leaning towards aot.
Your advice and guidance will be greatly appreciated. Thank you in advance!