I have been successfully running an app for the past few months with no issues. Now, I am exploring the idea of moving some common services into a library that can be utilized by other applications.
For this project, I decided to avoid using Angular CLI to enhance my learning experience. My current setup involves angular version 7.1.1
The structure of the project is as follows:
- site
.gitlab-ci.yml
- core-lib
package.json
tsconfig.json
- src
index.ts
core
my.service.js
- ui-site
package.json
tsconfig.json
- app
app.modules.ts
- table
table.component.ts
table.module.ts
In the package.json file of core-lib:
{
"name": "core-lib",
"version": "1.0.0",
"private": true,
// Dependencies and devDependencies listed here...
}
Within tsconfig.json of core-lib:
{
"compilerOptions": {
// Compiler options configured here...
},
"include": [
"./src/**/*"
]
}
Inside index.ts under src folder of core-lib:
import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Additional imports...
@NgModule({
// Module configuration...
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [MyService]
};
}
}
Currently, MyService is designed to fetch data from a local .json file using httpClient which is demonstrated in this Stackblitz example: https://stackblitz.com/edit/angular-chcpcx
After running tsc.cmd, the compiler generates the necessary .js and .sourcemap files without any errors.
Concerning the package.json file of ui-site:
{
"name": "ui-site",
"version": "1.0.0",
"private": true,
// Dependencies and devDependencies listed accordingly...
}
Upon executing npm install, the core-lib directory and its files are visible within the node_modules folder of ui-site without any complications.
As for the app.module.ts within ui-site:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// Other imports...
import { TableModule } from './table/table.module';
import { SharedModule } from '../node_modules/core-lib/src/index';
@NgModule({
// Module configurations...
})
export class AppModule { }
TableComponent located under app > table in ui-site:
import { Component } from '@angular/core';
import { MyService } from '../../../node_modules/core-lib/src/core/my.service'
// Component code block...
export class TableComponent {
// Constructor method and service call...
}
Error message displayed in the browser:
Error: StaticInjectorError(AppModule)[HttpHandler -> Injector]:
StaticInjectorError(Platform: core)[HttpHandler -> Injector]:
NullInjectorError: No provider for Injector!