Summary of some problems encountered this week


Question 1: how to reference private libraries
At first, I thought that sincenode_modulesIt is used to store the installed package, so directly@yunzhiPut innode_modulesJust go inside.
After trying, it is found that although functions in the library can be used, the system does not automatically reference functions when they are directly referenced@yunzhi, manual introduction is required.
After inquiry, it is found that you only need to enter the file name according to the referenced file namepackage.jsonThe corresponding dependency is introduced into the and re executednpm installJust.
Then I found package JSON mainly contains the following parameters


amongscripts:Defines a set of node scripts that can be run.

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"

That is, ng s, ng T, etc.

dependenciesIs set as a dependent installationnpmList of packages.
For example:

"@angular/animations": "~12.1.2",
    "@angular/common": "~12.1.2",
    "@angular/compiler": "~12.1.2",
    "@angular/core": "~12.1.2",
    "@angular/forms": "~12.1.2",
"@yunzhi/ng-common": "0.0.6",
    "@yunzhi/ng-mock-api": "0.0.9",
    "@yunzhi/ng-theme": "0.0.8",
    "@yunzhi/utils": "0.0.3"

These are the dependencies of providing corresponding functions for our applications, that is, the dependencies of providing services for MVC layer.

devDependenciesInstalled as a development dependencynpmList of packages.
For example:

"karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
 "@angular/cli": "~12.1.2",
    "@angular/compiler-cli": "~12.1.2",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "@yunzhi/ng-router-testing": "0.0.2",

These dependencies are needed for testing during development. Users will not use these dependencies in actual products.

After knowing this, it becomes very simple to change the version of angular. We only need to change the version with @ angular dependency.

Problem 2: problems encountered when adding mockapi
For current use, you only need to addqpis.ts, api.testing.modules, api.demo.modules
amongapis.tsThat is, an array containing the APIs we need to use.

export const apis = [

api.demo.moduleUsed for running demo out of the background under ng s
api.testing.moduleUsed for unit testing.

providers: [
      provide: HTTP_INTERCEPTORS, multi: true, useClass: MockApiTestingInterceptor.forRoot(apis)

This is API The main contents of testing are as follows:MockApiTestingInterceptorofforRootMethod providesHTTP_INTERCEPTORSInterceptor service.
When initiating an HTTP request, angular will query whether the current module has http_ The provider of interceptors, if any, will be used to intercept the request.
usemulti: trueThe interceptor can be used to define multiple interceptors for the current scheme.

static forRoot(mockApis: Type<MockApiInterface>[]): Type<HttpInterceptor>;
This isMockApiTestingInterceptorMediumforRootMethod to receive an API array and return aHttpInterceptor

The mechanism of mockapi is shown in the figure

Summary of some problems encountered this week

ReturnedHTTP_INTERCEPTORSInterceptor service. After intercepting the request, it willforRootIn methodapiArray to find the correspondingapi.

API approximate format

export class XxxApi implements MockApiInterface {
protected url = 'xxx'
getInjectors(): ApiInjector[] {
return [{
method: '',
url:  '',
result: (urlMatches: string[], options: { params: HttpParams; }){}

Where urlmatches is the relevant information of the request URL, and options includes the accepted parameters and other information.
So far, the function of intercepting requests and returning simulated data can be realized.
This is another problem. Why do you want to simulate the return data in ng s? You can’t just add one as in ng tMockApiTestingInterceptorInterceptor provided
So I tried on the app Referenced in modulesApiTestingModuleNo referenceApiDemoModule, after the test, it is found that there is such an error – reference error: beforeall is not defined.

main.js:1 Uncaught ReferenceError: beforeAll is not defined


providers: [
      provide: HTTP_INTERCEPTORS, multi: true, useClass: LoadingInterceptor
      provide: HTTP_INTERCEPTORS, multi: true, useClass: MockApiInterceptor.forRoot(apis)

It is one more than apitestingmoduleLoadingInterceptorInterceptor:

export class LoadingInterceptor implements HttpInterceptor {
  public static loadingSubject = new Subject<boolean>();
  public static loading$ = LoadingInterceptor.loadingSubject.asObservable();
  public static ignoreKey = 'loading-ignore';

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.params.has(LoadingInterceptor.ignoreKey)) {
      return next.handle(req);
    } else {;
      return next.handle(req).pipe(finalize(() =>;


Subject is a special observable, which supports passing values to many other observables,
req. params. Has (xxx) is used to retrieve req Whether there is XXX in params. If not, null will be returned,
Handel () converts httprequest into an httpevents stream and passes it to the next interceptor
Finalize returns an observable that mirrors the source observable, but will call the specified function when the source terminates on completion or error.
After testing, the trigger in ng s is

return next.handle(req).pipe(finalize(() =>;

That is, if the requested parameter containsloading-ignoreIf there is no error, it can be directly transmitted to the next interceptor. If there is no error, it indicates that there is an error and needs to be passedfinalizeThe processing of the pipeline returns an observable without error to the next interceptor.

Recommended Today

redis day2

persistence mechanism client redis[memory] —–&gt; memory data-data persistence–&gt;disk Redis officially provides two different persistence methods to store data in memory to the hard disk: Snapshot AOF (Append Only File) only appends log files   Snapshot Features:In this way, all data at a certain moment can be written to the hard disk, of course, this is […]