Tag Archives: Angular

ERROR Error: [@ant-design/icons-angular]:the icon XXX does not exist or is not registered.

Error Message:

ERROR Error: [@ant-design/icons-angular]:the icon XXX does not exist or is not registered.

 

Solution:

Adding startup services
nz-icon-register.service.ts

import { APP_INITIALIZER, Injectable } from '@angular/core';
import { NzIconService } from 'ng-zorro-antd/icon';

export const SvgIcons = [
    // nzType='plus'
    {
        namespace: 'nz:plus',
        literal: '<svg viewBox="64 64 896 896" focusable="false" fill="currentColor" width="1em" height="1em" data-icon="plus" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg>',
    },
];

@Injectable({
    providedIn: 'root'
})
export class NzIconRegisterService {

    constructor(
        private nzIconService: NzIconService,
    ) { }

    registeIcons(): void {
        SvgIcons.forEach(icons => {
            this.nzIconService.addIconLiteral(icons.namespace, icons.literal);
        })
    }
}

function factory(service: NzIconRegisterService ) {
    return () => service.registeIcons(); 
}

export const ICON_REGISTER_PROVIDES = [
    NzIconRegisterService ,
    {
        provide: APP_INITIALIZER,
        useFactory: factory,
        deps: [ NzIconRegisterService ],
        multi: true,
    }
];

Add the startup service to the startup item
app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { ICON_REGISTER_PROVIDES } from '@core/services/nz-icon-register.service';

@NgModule({
  declarations: [AppComponent],

  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    // ...other modules
  ],
  providers: [
    ICON_REGISTER_PROVIDES,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

[Solved] Angular12 ng build Error: Index html generation failed.

When using angular12 (version 12.0.3) to develop a project, the debugging will run normally, but an error message will appear when calling ng build to publish.

Tip: index HTML generation failed undefined:6:720366 missing ‘}’

Or: index HTML generation failed Undefined: 6:720366 missing ‘:’ etc.

The solution is to modify the angular.json configuration file, Add an optimization node under the build -> configurations ->production node:

            "optimization": {
                "scripts": true,
                "fonts": {
                  "inline": true
                },
                "styles": {
                  "minify": true,
                  "inlineCritical": false
                }
              }

The complete node path is:

{
    ...,
    "projects":{
        "myapp":{
           ...,
           "architect":{
               ...,
                "build":{
                    ...,
                    "configurations":{
                        ...,
                        "production": {
                            ..., 
                            "optimization": {
                                "scripts": true,
                                "fonts": {
                                  "inline": true
                                },
                                "styles": {
                                  "minify": true,
                                  "inlineCritical": false
                                }
                              }                       
                        }                                           
                    },
                    ...                                    
                },
                ...                          
           },
           ...         
        }            
    },
    ...
}

[Solved] Angular&CI/CD：Error: initial exceeded maximum budget

During CI/CD process of angular project, the following errors occur:

Warning: initial exceeded maximum budget. Budget 2.00 MB was not met by 3.01 MB with a total of 5.01 MB.
Error: initial exceeded maximum budget. Budget 5.00 MB was not met by 6.83 kB with a total of 5.01 MB.

The packed file is too large for the specified file size

Solution: modify the angular in the project JSON configuration file (memory parameters)

 "budgets": [{
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "6mb"
                },
              ]

I originally set the maximum error to 5MB, but now I can set it to 6MB. The specific problem depends on the situation

[Solved] Angular basic create component error: Is it missing an @NgModule annotation

Error message

Error: src/app/test/test.component.ts:8:14 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
Is it missing an @NgModule annotation?

Error code


reason: TestComponent is imported incorrectly in app.module.ts file, so TestModule should be imported
correct import:

Note: a component can only belong to one module. After introducing testcomponent in test.module.ts, testcomponent cannot be imported in declarations in app.module.ts, Otherwise, an error will be reported in the browser!

Error is reported after adding ＜router outlet> tag in angular

    If ‘router-outlet’ is an Angular component, then verify that it is part of this module.If ‘router-outlet’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
app-routing.module
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true }
    )
  ],
  exports: [ RouterModule ] 
})

[Solved] Angular build Error: throw er; // Unhandled ‘error’ eventEmitted ‘error’ event on ChildProcess instance

Background description

1. Ng server can start normally (no problem with compilation)

2. Ng build error

Error content (forgot the screenshot, * * * has indicated the intermediate content)

throw er; // Unhandled ‘error’ event
***
Emitted ‘error’ event on ChildProcess instance at:
***
errno: -4058,
code: ‘ENOENT’,
****
spawnargs: [ ‘–service=0.12.9’, ‘–ping’ ]

Solution:

Execute node_ Modules/esbuild/install.js file

node  PATH/node_modules/esbuild/install.js

Build again

Unable to read workspace file ‘D:\angular.json‘: Invalid JSON character: “ “ at

Question:

Unable to read workspace file 'D:\font-end\antd\angular.json': Invalid JSON character: "　" at 36:71.`Insert code snippet here`

Step 1: introduce the notes of the angular ecarts.min.js
you have a problem with the angular ecarts.min.js, but if the notes are started, the following error will be reported:

Error: The target entry-point "ngx-echarts" has missing

Difference between routermodule.forroot and routermodule.forchild

When I was developing angular, I encountered the following errors:

core.js:6242 ERROR NullInjectorError: R3InjectorError(AppModule)[ChildrenOutletContexts -> ChildrenOutletContexts -> ChildrenOutletContexts]:
NullInjectorError: No provider for ChildrenOutletContexts!
at NullInjector.get (core.js:1086)
at R3Injector.get (core.js:16969)
at R3Injector.get (core.js:16969)
at R3Injector.get (core.js:16969)
at NgModuleRef$1.get (core.js:36344)
at Object.get (core.js:33987)
at getOrCreateInjectable (core.js:5849)
at Module. ɵɵ directiveInject (core.js:21118)
at NodeInjectorFactory.RouterOutlet_ Factory [as factory] (router.js:9156)
at getNodeInjectable (core.js:5994)

The reason is found in this stackoverflow discussion post:

This error is because the module generated by routermodule. Forchild() contains necessary instructions and routes, but does not contain routing service – routing provider. This is the purpose of routermodule.forroot: it generates a module containing necessary instructions, routes and routing services.

terms of settlement

Call routermodule.forroot ([]) in app.module.ts

Call routermodule.forchild in feature module to pass in the actual routing array:

More Jerry’s original articles can be found in: “Wang Zixi”: