Tag Archives: front end

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] error:chunkgroup.addoptions:no option merge strategy for name

“webpack”: “^ 5.72.0” error:

/Users/guojianbo/Documents/xxx/node_modules/webpack/lib/ChunkGroup.js:119
					throw new Error(
					      ^
Error: ChunkGroup.addOptions: No option merge strategy for name
    at Entrypoint.addOptions (/Users/guojianbo/Documents/xxx/node_modules/webpack/lib/ChunkGroup.js:119:12)

Solution:

webpack.config.js
before modification:

module.exports = {
	entry: {
	    'abc-def': "./src/js/abc-def.js",
	    'qwe-rty': "./src/js/qwe-rty.js",
	}
}

After modification

module.exports = {
	entry: {
	    'my-abc-def': "./src/js/abc-def.js",
	    'my-qwe-rty': "./src/js/qwe-rty.js",
	}
}

That is, add a prefix to the entry name to prevent conflicts with the internal chunk names of webpack packages

[Solved] Vue Import swiper.css Error: Module not found…

The error information is as follows: 

Module not found: Error: Package path ./swiper.css is not exported from package C:\Users\yoyang\Desktop\vue\test2022\node_modules\swiper (see exports field in C:\Users\yoyang\Desktop\vue\test2022\node_modules\swiper\package.json)

 

The reason for the problem is that vue2 has poor compatibility with the latest version of swipe. You only need to reinstall the old version of swipe, such as [email protected]

Solution:

1. Download the old version of swiper

npm i [email protected] --save

2. Restart project

npm run serve

3. Import swiper

import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'

In this way, the wiper component can be used normally

<template>
  <div class="swiper-container yang">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/swiper.min.css'

export default {
  mounted () {
    new Swiper('.yang', {
      pagination: {
        el: '.swiper-pagination'
      },
      loop: this.loop,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false
      }
    })
  }
}
</script>

[Solved] ant-design a-date-picker Error: date.locale is not a function

The error reporting contents are as follows:

date.locale is not a function

Original code:

<a-form-item label="Time From:" name="signTime">
                <a-date-picker placeholder="Please Select"  v-model:value="formState.signTime" style="width:100%" />
              </a-form-item>

Correct code:

<a-form-item label="Time From:" name="signTime">
                <a-date-picker placeholder="Please Select" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model:value="formState.signTime" style="width:100%" />
              </a-form-item>

Summary: you need to add the time display format attribute and the final value format valueFormat attribute.

[Solved] el-date-picker Error: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

Error Messages:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “placement”
Reason: Version issue
Solution:
1. Downgrade the version.
2. Add align=”center” in el-date-picker.

<el-date-picker
          :v-model="time"
          type="daterange"
          range-separator="to"
          start-placeholder="Start Date"
          end-placeholder="End date"
        >
</el-date-picker>

How to Solve pinia Error in ts File

Use Pinia in ts file report an error:

getActivePinia was called with no active Pinia. Did you forget to install pinia

 

1. Create the store.ts file

import { createPinia } from "pinia";

const store = createPinia();

export { store };

2、 Introduced in main.ts

import { createApp } from "vue";
import "./style.css";
import "./main.css";
import App from "./App.vue";
import ElementPlus from "element-plus";
import Avue from "@smallwei/avue";
import "@smallwei/avue/lib/index.css";
import "@/assets/css/mapbox-gl.css";
import { store } from "@/pinia/index";    // Introduce the created pinia
import router from "@/router/index";
import "element-plus/dist/index.css";

const app = createApp(App);

app.use(router);
app.use(store);  // use pinia
app.use(ElementPlus);
app.use(Avue);
app.mount("#app");

3、 Create your own Pinia file

import { defineStore } from "pinia";

interface State {
  nodeArr: any[] | [];
  stencilLoading: boolean;
  selectNodeId: number;
  lcNodeData: LCDataType | {}
}

const defaultState: State = {
  nodeArr: [], // Node data in the drag and drop bar
  stencilLoading: true, // Loading of the drag bar
  selectNodeId: -1, // The node id of the selected drag bar
  lcNodeData: {}, // The LC data in the selected canvas
};

export const lcDataStore = defineStore("lcData", {
  state: () => {
    return defaultState;
  },
  getters: {},
  actions: {},
});

4、 Using Pinia in the TS file

import { lcDataStore } from "@/pinia/lcAssign";
import { store } from "@/pinia/index";

const lcStore = lcDataStore(store);   // Here you have to pass in the store

// After that, you can use the properties and methods inside the lcStore

[Solved] Element Error: Error in render: TypeError: dateStr.match is not a function“

This error is because the data type of the date component of Element cannot be Number

Solution: convert data to the string

number type to string type (recommended way two)
Method 1.
var date = toString(2022); // Disadvantage: can't convert underfind and null
Way 2
var date = String(2022); // can convert underfind and null
Way 3
var date = 2022 + ''; // string splicing

[Solved] electron-vue project error: Object.fromEntries is not a function electron-vue

electron-vue scaffold project build error: Object.fromEntries is not a function

Project directory

Front console print error:

Solution: install polyfill-object.fromentries and execute the command in the project root directory

npm i polyfill-object.fromentries

And then

import

import 'polyfill-object.fromentries';

[Solved] JAVA Web Error: startup failed due to previous errors

1. Error prompt:

WARNING [RMI TCP Connection(3)-127.0.0.1] org.apache.catalina.core.StandardContext.startInternal One or more Filters failed to start. Full details will be found in the appropriate container log file
WARNING [RMI TCP Connection(3)-127.0.0.1] org.apache.catalina.core.StandardContext.startInternal Context [/filter] startup failed due to previous errors

File directory structure:

After testing, we found that there is a problem with the configuration in the web.xml file, and the parameter names configured are not the same as those obtained in the filter, resulting in a startup error

2. Solution

Correct the configured parameters and republish them

[Solved] vite2+vue3 jsx Error: React is not defined

Vite2 + vue3 uses JSX to report an error: react is not defined

If JSX is not used in react, for error reporting:

React is not defined

It is required to add the following configuration to the vite.config.js file:

export default {
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: "import { h } from 'vue';"
  }
}

The last sentence is equivalent to the injection of vite. The helper automatically introduces h