Migration from Angular 8 to Angular 17 - Assistance Needed
Hello team,
I am currently in the process of migrating my application from Angular 8 to Angular 17. My project uses Metronic Angular 8, and it's a large-scale application.
I successfully updated Angular from version 8 to version 15, but while upgrading to version 16, I encountered the following issues:
src/app/views/theme/header/topbar/topbar.component.ts:11:15 11 templateUrl: './topbar.component.html',
Error occurs in the template of component TopbarComponent.
rror:
5
src/app/views/theme/header/topbar/topbar.component.html:25:70
-
error NG8002: Can't bind to 'useSVG' since it isn't a known pr
If 'kt-quick-action' is an Angular component and it has 'useSVG' input, then verify that it is part of this module.
If 'kt-quick-action' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
[icon]="'./assets/media/icons/svg/Communication/Dial-numbers.svg"" [useSVG]="true"></kt-quick-action>
src/app/views/theme/header/topbar/topbar.component.ts:11:15
11 templateUrl: './topbar.component.html',
Error occurs in the template of component TopbarComponent.
rror: src/app/views/theme/header/topbar/topbar.component.html:26:2
NNNNNNI
-
error NG8001: 'kt-notification' is not a known element:
If 'kt-notification' is an Angular component, then verify that it is part of this module.
If 'kt-notification' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress
6 <kt-notification></kt-notification>
INNNNN
src/app/views/theme/header/topbar/topbar.component.ts:11:15
11 templateUrl: './topbar.component.html',
Error occurs in the template of component TopbarComponent.
rror: src/app/views/theme/header/topbar/topbar.component.html:27:2 - error NG8001: 'kt-user-profile' is not a known element:
If 'kt-user-profile' is an Angular component, then verify that it is part of this module.
If 'kt-user-profile' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress 7 <kt-user-profile></kt-user-profile>
NNNNNNNI
src/app/views/theme/header/topbar/topbar.component.ts:11:15
11 templateUrl: './topbar.component.html',
Error occurs in the template of component TopbarComponent.
Replies (14)
Hi Ritesh patel
May I know if you are using the angular/material in your app? If not, you can remove the import path.
Thanks
Hi
The correct import path for Angular Material theming should be:
@import "~@angular/material/theming";Update your style.angular.scss file to use this path. The ~ ensures that the module is imported from node_modules.
Sometimes, cached or corrupted files can cause issues. Clear the node_modules folder and reinstall dependencies:
rm -rf node_modules package-lock.json
npm cache clean --force
npm installVerify that the SASS loader is correctly configured in your Angular project. Add or verify the following in your angular.json file:
"styles": [
"src/assets/sass/style.angular.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/assets/sass"
]
}hello,
still same error.
hello ,
still same error
hello,
getting this issue in angular 17 when run project how to fix this issue ?
"@angular/cdk": "^17.3.10",
"@angular/material": "^17.3.10",
"@angular/material-moment-adapter": "^17.3.10",
./src/assets/sass/style.angular.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
â•·
21 │ @import "@angular/material/theming";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\assets\sass\style.angular.scss 21:9 root stylesheet
./src/assets/sass/style.angular.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
â•·
21 │ @import "@angular/material/theming";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\assets\sass\style.angular.scss 21:9 root stylesheet
Hi
Upgrading large-scale app versions involves major breaking changes across Angular itself, third-party libraries, etc.
1. The version of @ng-bootstrap/ng-bootstrap (5.2.3) is not compatible with Angular 17.
Try to upgrade it. Check the compatibility version here.
https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap
2. ng-select version 3.7.2 is outdated and incompatible with Angular 16+.
The [formControl] error suggests that ReactiveFormsModule might not be imported.
Try to upgrade ng-select.
https://www.npmjs.com/package/@ng-select/ng-select
3. Update all Angular packages:
ng update @angular/cli@16 @angular/core@16 @angular/material@16Remove node_modules and reinstall.
hello,
getting this issue in angular 17 when run project how to fix this issue ?
./src/assets/sass/style.angular.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
â•·
21 │ @import "@angular/material/theming";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\assets\sass\style.angular.scss 21:9 root stylesheet
./src/assets/sass/style.angular.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
â•·
21 │ @import "@angular/material/theming";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\assets\sass\style.angular.scss 21:9 root stylesheet
hello,
getting this issue in angular 17 when run project how to fix this issue ?
"@angular/cdk": "^17.3.10",
"@angular/material": "^17.3.10",
"@angular/material-moment-adapter": "^17.3.10",
./src/assets/sass/style.angular.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
â•·
21 │ @import "@angular/material/theming";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\assets\sass\style.angular.scss 21:9 root stylesheet
./src/assets/sass/style.angular.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
â•·
21 │ @import "@angular/material/theming";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\assets\sass\style.angular.scss 21:9 root stylesheet
Hi
Are there any other additional errors? Eg. from the command console when you run ng serve or ng build?
Thanks
Hi
yes, additional error
node_modules/@ng-bootstrap/ng-bootstrap/tabset/tabset.module.d.ts:3:22
3 export declare class NgbTabsetModule {
~~~~~~~~~~~~~~~
This likely means that the library (@ng-bootstrap/ng-bootstrap) which declares NgbTabsetModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
Error: src/app/views/pages/admin/admin.module.ts:33:3 - error NG6002: 'NgbModule' does not appear to be an NgModule class.
33 NgbModule,
~~~~~~~~~
node_modules/@ng-bootstrap/ng-bootstrap/index.d.ts:20:22
20 export declare class NgbModule {
~~~~~~~~~
This likely means that the library (@ng-bootstrap/ng-bootstrap) which declares NgbModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
Error: src/app/views/pages/admin/admin.module.ts:34:3 - error NG6002: This import contains errors, which may affect components that depend on this NgModule.
34 MaterialPreviewModule,
~~~~~~~~~~~~~~~~~~~~~
Error: src/app/views/pages/admin/admin.module.ts:38:3 - error NG6002: This import contains errors, which may affect components that depend on this NgModule.
38 PagesModule,
~~~~~~~~~~~
Error: src/app/views/pages/admin/admin.module.ts:39:3 - error NG6002: 'ThemeModule' does not appear to be an NgModule class.
39 ThemeModule,
~~~~~~~~~~~
src/app/views/theme/theme.module.ts:108:14
108 export class ThemeModule {
~~~~~~~~~~~
Is it missing an @NgModule annotation?
Error: src/app/views/pages/admin/admin.module.ts:40:3 - error NG6002: This import contains errors, which may affect components that depend on this NgModule.
40 SharedModule,
~~~~~~~~~~~~
Error: src/app/views/pages/admin/admin.module.ts:42:3 - error NG6002: This import contains errors, which may affect components that depend on this NgModule.
42 PartialsModule,
~~~~~~~~~~~~~~
Error: src/app/views/pages/approval-code/approval-code/approval-code.component.html:1:1 - error NG8001: 'kt-portlet' is not a known element:
1. If 'kt-portlet' is an Angular component, then verify that it is part of this module.
2. If 'kt-portlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
1 <kt-portlet>
~~~~~~~~~~~~
src/app/views/pages/approval-code/approval-code/approval-code.component.ts:18:15
18 templateUrl: './approval-code.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ApprovalCodeComponent.
Error: src/app/views/pages/approval-code/approval-code/approval-code.component.html:2:2 - error NG8001: 'kt-portlet-header' is not a known element:
1. If 'kt-portlet-header' is an Angular component, then verify that it is part of this module.
2. If 'kt-portlet-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
2 <kt-portlet-header [title]="'Approval Code'" [class]="'kt-portlet__head--lg'">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/views/pages/approval-code/approval-code/approval-code.component.ts:18:15
18 templateUrl: './approval-code.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ApprovalCodeComponent.
Error: src/app/views/pages/approval-code/approval-code/approval-code.component.html:13:2 - error NG8001: 'kt-portlet-body' is not a known element:
1. If 'kt-portlet-body' is an Angular component, then verify that it is part of this module.
2. If 'kt-portlet-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
13 <kt-portlet-body>
~~~~~~~~~~~~~~~~~
src/app/views/pages/approval-code/approval-code/approval-code.component.ts:18:15
18 templateUrl: './approval-code.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ApprovalCodeComponent.
Error: src/app/views/pages/approval-code/approval-code/approval-code.component.html:26:48 - error NG8002: Can't bind to 'formControl' since it isn't a known property of 'input'.
26 <input type="text" class="form-control" [formControl]="filter"
~~~~~~~~~~~~~~~~~~~~~~
src/app/views/pages/approval-code/approval-code/approval-code.component.ts:18:15
18 templateUrl: './approval-code.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ApprovalCodeComponent.
Error: src/app/views/pages/approval-code/approval-code/approval-code.component.html:35:9 - error NG8001: 'ng-select' is not a known element:
1. If 'ng-select' is an Angular component, then verify that it is part of this module.
2. If 'ng-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
35 <ng-select class="custom-ng-select" [multiple]="true" autocomplete="off"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
36 [(ngModel)]="selectedTableAllFieldList" name="selectType" placeholder="Select All "
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
37 (change)="onSelectionFieldList($event,true)">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/views/pages/approval-code/approval-code/approval-code.component.ts:18:15
18 templateUrl: './approval-code.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ApprovalCodeComponent.
Error: src/app/views/pages/approval-code/approval-code/approval-code.component.html:35:45 - error NG8002: Can't bind to 'multiple' since it isn't a known property of 'ng-select'.
1. If 'multiple' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
35 <ng-select class="custom-ng-select" [multiple]="true" autocomplete="off"
~~~~~~~~~~~~~~~~~
src/app/views/pages/approval-code/approval-code/approval-code.component.ts:18:15
18 templateUrl: './approval-code.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ApprovalCodeComponent.
=========================================
my package.json
{
"name": "metronic-angular",
"version": "6.1.6",
"description": "Packages used by Angular",
"scripts": {
"ng": "ng",
"start": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "webpack-bundle-analyzer dist/stats.json",
"rtl": "webpack",
"prod-build": "ng build -c production",
"dev-build": "ng build -c development",
"uat-build": "ng build -c uat",
"sonar": "sonar-scanner",
"sonar-scanner": "sonar-scanner"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.2.12",
"@angular/cdk": "^15.2.9",
"@angular/common": "^16.2.12",
"@angular/compiler": "^16.2.12",
"@angular/core": "^16.2.12",
"@angular/forms": "^16.2.12",
"@angular/localize": "^16.2.12",
"@angular/platform-browser": "^16.2.12",
"@angular/platform-browser-dynamic": "^16.2.12",
"@angular/platform-server": "^16.2.12",
"@angular/router": "^16.2.12",
"@fortawesome/fontawesome-free": "^5.11.2",
"@ng-bootstrap/ng-bootstrap": "^5.2.3",
"@ng-select/ng-select": "^3.7.2",
"@ngrx/effects": "~13.2.0",
"@ngrx/entity": "^13.2.0",
"@ngrx/router-store": "~13.2.0",
"@ngrx/store": "~13.2.0",
"@ngrx/store-devtools": "~13.2.0",
"@ngx-loading-bar/core": "^4.2.0",
"@ngx-translate/core": "~12.1.2",
"@rxweb/reactive-form-validators": "2.1.7",
"@swimlane/ngx-charts": "^11.2.0",
"@syncfusion/ej2-angular-calendars": "^18.1.53",
"angular-in-memory-web-api": "^0.8.0",
"bootstrap": "^4.5.0",
"chart.js": "^2.9.3",
"chartist": "^0.11.4",
"classlist.js": "^1.1.20150312",
"core-js": "^3.4.7",
"crypto-js": "^4.0.0",
"devextreme": "21.2.4",
"devextreme-angular": "21.2.4",
"exceljs": "^4.3.0",
"file-saver": "^2.0.5",
"google-libphonenumber": "^3.2.38",
"hammerjs": "^2.0.8",
"highlight.js": "^9.16.2",
"jquery": "^3.6.0",
"jspdf": "1.5.3",
"jspdf-autotable": "3.2.5",
"libphonenumber-js": "^1.11.5",
"lodash": "^4.17.11",
"material-design-icons": "^3.0.1",
"moment": "^2.24.0",
"ng-inline-svg": "^8.5.1",
"ng-pick-datetime": "^7.0.0",
"ng2-charts": "^2.2.0",
"ngrx-store-freeze": "^0.2.4",
"ngx-clipboard": "^12.3.0",
"ngx-daterangepicker-material": "^2.2.0",
"ngx-highlightjs": "^3.0.3",
"ngx-mask": "^8.2.0",
"ngx-mat-intl-tel-input": "^3.1.0",
"ngx-perfect-scrollbar": "^8.0.0",
"ngx-permissions": "^7.0.3",
"ngx-timer": "^1.0.6",
"ngx-treeview": "^10.0.2",
"object-path": "^0.11.4",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.16.0",
"querystring": "^0.2.1",
"rxjs": "~6.6.0",
"socicon": "^3.0.5",
"stream": "0.0.2",
"tooltip.js": "^1.3.3",
"tslib": "^2.3.0",
"web-animations-js": "^2.3.2",
"xlsx": "^0.18.2",
"zone.js": "~0.13.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.16",
"@angular/cli": "^16.2.16",
"@angular/compiler-cli": "^16.2.12",
"@angular/language-service": "^16.2.12",
"@angular/material": "^15.2.9",
"@angular/material-moment-adapter": "^15.2.9",
"@ngrx/schematics": "^13.2.0",
"@types/chartist": "^0.9.46",
"@types/highlight.js": "^9.12.3",
"@types/jasmine": "^3.5.0",
"@types/jasminewd2": "^2.0.8",
"@types/node": "^12.11.1",
"@types/object-path": "^0.11.0",
"ajv": "^7.2.4",
"codelyzer": "^5.1.2",
"css-loader": "^3.2.1",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"protractor": "~7.0.0",
"sonar-scanner": "^3.1.0",
"ts-node": "~8.2.0",
"tslint": "~6.1.0",
"typescript": "^4.8.4",
"webpack": "^5.97.1",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.10",
"webpack-messages": "^2.0.4",
"webpack-rtl-plugin": "^2.0.0"
}
}
Thanks
Hi Ritesh patel
Angular 16+ has stricter type checking. Verify:
The useSVG input exists in KtQuickActionComponent.
If not, ensure the component is updated for Angular 16+ compatibility.
Example of proper input binding in the component:
<pre>
@Component({
selector: 'kt-quick-action',
templateUrl: './quick-action.component.html'
})
export class KtQuickActionComponent {
@Input() useSVG: boolean = false;
}
<pre>
If useSVG is not a defined @Input, it will throw the binding error.
Hi faizal,
already @Input defined.
@Component({
selector: 'kt-quick-action',
templateUrl: './quick-action.component.html',
})
export class QuickActionComponent implements OnInit, AfterViewInit {
@Input() useSVG: boolean;
@Input() icon = 'flaticon2-gear';
@Input() iconType: '' | 'warning';
getting error in not only this component lot's of component.
Hi,
The error seems to start with the useSVG binding. Could you please verify if the SVG module or related components (e.g., kt-quick-action) are properly imported into the local Angular module where TopbarComponent is declared?
Thank you
yes imported we use module structure . and it's working in angular version 15 but when upgrade useing this command
ng update @angular/core@16 @angular/cli@16
ng update @angular/material@16
after run the project getting this type error
error NG8002: Can't bind to 'useSVG' since it isn't a known pr
If 'kt-quick-action' is an Angular component and it has 'useSVG' input, then verify that it is part of this module.
If 'kt-quick-action' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
[icon]="'./assets/media/icons/svg/Communication/Dial-numbers.svg"" [useSVG]="true"></kt-quick-action>
src/app/views/theme/header/topbar/topbar.component.ts:11:15
11 templateUrl: './topbar.component.html',
Error occurs in the template of component TopbarComponent.
yes imported we use module structure . and it's working in angular version 15 but when upgrade useing this command
ng update @angular/core@16 @angular/cli@16
ng update @angular/material@16
no any file change after this command component related.
after run the project getting this type error.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2020",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "ES2022",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2015",
"es2018",
"dom"
],
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"useDefineForClassFields": false
}
}
my ts.config.json
"@angular/cli": "^16.2.16", version
please help to me because it's a large-scale application. i need to upgrade in latest angular version.
Thank you
