I have face some modules not found issues after migrate Angular 11.0.9 ngx-admin dashboard to Angular 15.2.9
earlier packages are this
"@angular/animations": "^11.0.9",
"@angular/cdk": "11.0.4",
"@angular/common": "^11.0.9",
"@angular/compiler": "^11.0.9",
"@angular/core": "^11.0.9",
"@angular/forms": "^11.0.9",
"@angular/platform-browser": "^11.0.9",
"@angular/platform-browser-dynamic": "^11.0.9",
"@angular/router": "^11.0.9",
"@nebular/auth": "7.0.0",
"@nebular/eva-icons": "7.0.0",
"@nebular/security": "7.0.0",
"@nebular/theme": "7.0.0",
but respective modules are at node_modules
even i tried with delete package-lock.json and node_modules and clear npm cache as well
i tried with downgrade nebular theme to version 9.0.3 as well
but issue is not fixed
i followed [https://update.angular.io/?v=11.0-16.0][1] link as reference
during build and start the project i got following errors
Error 1
node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import. ╷ 2 │ @import '~@nebular/theme/styles/theming'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src/app/@theme/styles/themes.scss 2:9 @import src/app/pages/pages.component.scss 2:9 @import
pages.component.scss is looks like this
@import '../@theme/styles/themes';
@include nb-install-component() {
::ng-deep router-outlet + * {
display: block;
animation: fade 1s;
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
}
$xs: 425px;
$sm: 576px;
$md: 768px;
$lg: 1024px;
$xl: 1200px;
$xxl: 1440px;@theme/styles/themes has theme module
it looks like this
import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
NbActionsModule,
NbLayoutModule,
NbMenuModule,
NbSearchModule,
NbSidebarModule,
NbUserModule,
NbContextMenuModule,
NbButtonModule,
NbSelectModule,
NbIconModule,
NbThemeModule,
NbTooltipModule,
NbCardModule,
} from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { NbSecurityModule } from '@nebular/security';
import {
FooterComponent,
HeaderComponent,
SearchInputComponent,
} from './components';
import {
CapitalizePipe,
PluralPipe,
RoundPipe,
TimingPipe,
NumberWithCommasPipe,
} from './pipes';
import {
OneColumnLayoutComponent,
ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent,
} from './layouts';
import { DEFAULT_THEME } from './styles/theme.default';
import { COSMIC_THEME } from './styles/theme.cosmic';
import { CORPORATE_THEME } from './styles/theme.corporate';
import { DARK_THEME } from './styles/theme.dark';
const NB_MODULES = [
NbLayoutModule,
NbMenuModule,
NbUserModule,
NbActionsModule,
NbSearchModule,
NbSidebarModule,
NbContextMenuModule,
NbSecurityModule,
NbButtonModule,
NbSelectModule,
NbIconModule,
NbEvaIconsModule,
NbTooltipModule,
NbCardModule,
];
const COMPONENTS = [
HeaderComponent,
FooterComponent,
SearchInputComponent,
OneColumnLayoutComponent,
ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent,
];
const PIPES = [
CapitalizePipe,
PluralPipe,
RoundPipe,
TimingPipe,
NumberWithCommasPipe,
];
@NgModule({
imports: [CommonModule, ...NB_MODULES],
exports: [CommonModule, ...PIPES, ...COMPONENTS],
declarations: [...COMPONENTS, ...PIPES],
})
export class ThemeModule {
static forRoot(): ModuleWithProviders<ThemeModule> {
return {
ngModule: ThemeModule,
providers: [
...NbThemeModule.forRoot(
{
name: 'default',
},
[DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME],
).providers,
],
};
}
}theme.scss is looks like this
// @nebular theming framework
@import '~@nebular/theme/styles/theming';
// @nebular out of the box themes
@import '~@nebular/theme/styles/themes';
// @import '~@nebular/theme/styles/themes/dark';
// @import '~@nebular/theme/styles/themes/default';
$nb-themes: nb-register-theme((
layout-padding-top: 2.25rem,
menu-item-icon-margin: 0 0.5rem 0 0,
card-height-tiny: 13.5rem,
card-height-small: 21.1875rem,
card-height-medium: 28.875rem,
card-height-large: 36.5625rem,
card-height-giant: 44.25rem,
card-margin-bottom: 1.875rem,
card-header-with-select-padding-top: 0.5rem,
card-header-with-select-padding-bottom: 0.5rem,
select-min-width: 6rem,
slide-out-background: #f7f9fc,
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
), default, default);
$nb-themes: nb-register-theme((
layout-padding-top: 2.25rem,
menu-item-icon-margin: 0 0.5rem 0 0,
card-height-tiny: 13.5rem,
card-height-small: 21.1875rem,
card-height-medium: 28.875rem,
card-height-large: 36.5625rem,
card-height-giant: 44.25rem,
card-margin-bottom: 1.875rem,
card-header-with-select-padding-top: 0.5rem,
card-header-with-select-padding-bottom: 0.5rem,
select-min-width: 6rem,
slide-out-background: #252547,
slide-out-shadow-color: 2px 0 3px #29157a,
slide-out-shadow-color-rtl: -2px 0 3px #29157a,
), cosmic, cosmic);
$nb-themes: nb-register-theme((
layout-padding-top: 2.25rem,
menu-item-icon-margin: 0 0.5rem 0 0,
card-height-tiny: 13.5rem,
card-height-small: 21.1875rem,
card-height-medium: 28.875rem,
card-height-large: 36.5625rem,
card-height-giant: 44.25rem,
card-margin-bottom: 1.875rem,
card-header-with-select-padding-top: 0.5rem,
card-header-with-select-padding-bottom: 0.5rem,
select-min-width: 6rem,
slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
), corporate, corporate);
$nb-themes: nb-register-theme((
layout-padding-top: 2.25rem,
menu-item-icon-margin: 0 0.5rem 0 0,
card-height-tiny: 13.5rem,
card-height-small: 21.1875rem,
card-height-medium: 28.875rem,
card-height-large: 36.5625rem,
card-height-giant: 44.25rem,
card-margin-bottom: 1.875rem,
card-header-with-select-padding-top: 0.5rem,
card-header-with-select-padding-bottom: 0.5rem,
select-min-width: 6rem,
slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
), dark, dark);style.scss is looks like this
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
// themes - our custom or/and out of the box themes
@import 'themes';
// framework component themes (styles tied to theme variables)
@import '~@nebular/theme/styles/globals';
@import '~@nebular/auth/styles/globals';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/grid';
// loading progress bar theme
@import './pace.theme';
@import './layout';
@import './overrides';
// install the framework and custom global styles
@include nb-install() {
// framework global styles
@include nb-theme-global();
@include nb-auth-global();
@include ngx-layout();
// loading progress bar
@include ngx-pace-theme();
@include nb-overrides();
// for all screens
@include screenStyleChanges-overrides();
// for all table
@include table-overrides();
};
@import '~@fullcalendar/common/main.css';
@import './base';this is my package.json looks like
{
"name": "ngx-admin",
"version": "7.0.0",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/akveo/ngx-admin.git"
},
"bugs": {
"url": "https://github.com/akveo/ngx-admin/issues"
},
"scripts": {
"ng": "ng",
"conventional-changelog": "conventional-changelog",
"start": "ng serve",
"build": "ng build",
"build:prod": "npm run build -- --configuration production --aot",
"test": "ng test",
"test:coverage": "rimraf coverage && npm run test -- --code-coverage",
"lint": "ng lint",
"lint:fix": "ng lint ngx-admin-demo --fix",
"lint:styles": "stylelint ./src/**/*.scss",
"lint:ci": "npm run lint && npm run lint:styles",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "ng e2e",
"docs": "compodoc -p src/tsconfig.app.json -d docs",
"docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
"prepush": "npm run lint:ci",
"release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\""
},
"dependencies": {
"@akveo/ng2-completer": "^9.0.1",
"@angular/animations": "^15.2.9",
"@angular/cdk": "15.2.9",
"@angular/common": "^15.2.9",
"@angular/compiler": "^15.2.9",
"@angular/core": "^15.2.9",
"@angular/forms": "^15.2.9",
"@angular/platform-browser": "^15.2.9",
"@angular/platform-browser-dynamic": "^15.2.9",
"@angular/router": "^15.2.9",
"@ckeditor/ckeditor5-adapter-ckfinder": "^39.0.1",
"@ckeditor/ckeditor5-angular": "^6.0.1",
"@ckeditor/ckeditor5-autoformat": "^39.0.1",
"@ckeditor/ckeditor5-basic-styles": "^39.0.1",
"@ckeditor/ckeditor5-block-quote": "^39.0.1",
"@ckeditor/ckeditor5-build-classic": "^39.0.1",
"@ckeditor/ckeditor5-ckbox": "^39.0.1",
"@ckeditor/ckeditor5-ckfinder": "^39.0.1",
"@ckeditor/ckeditor5-clipboard": "^39.0.1",
"@ckeditor/ckeditor5-core": "^39.0.1",
"@ckeditor/ckeditor5-easy-image": "^39.0.1",
"@ckeditor/ckeditor5-editor-classic": "^39.0.1",
"@ckeditor/ckeditor5-engine": "^39.0.1",
"@ckeditor/ckeditor5-enter": "^39.0.1",
"@ckeditor/ckeditor5-essentials": "^39.0.1",
"@ckeditor/ckeditor5-heading": "^39.0.1",
"@ckeditor/ckeditor5-indent": "^39.0.1",
"@ckeditor/ckeditor5-link": "^39.0.1",
"@ckeditor/ckeditor5-list": "^39.0.1",
"@ckeditor/ckeditor5-media-embed": "^39.0.1",
"@ckeditor/ckeditor5-paragraph": "^39.0.1",
"@ckeditor/ckeditor5-paste-from-office": "^39.0.1",
"@ckeditor/ckeditor5-select-all": "^39.0.1",
"@ckeditor/ckeditor5-table": "^39.0.1",
"@ckeditor/ckeditor5-typing": "^39.0.1",
"@ckeditor/ckeditor5-ui": "^39.0.1",
"@ckeditor/ckeditor5-undo": "^39.0.1",
"@ckeditor/ckeditor5-upload": "^39.0.1",
"@ckeditor/ckeditor5-utils": "^39.0.1",
"@ckeditor/ckeditor5-watchdog": "^39.0.1",
"@ckeditor/ckeditor5-widget": "^39.0.1",
"@fullcalendar/angular": "^6.1.8",
"@fullcalendar/core": "^6.1.8",
"@fullcalendar/daygrid": "^6.1.8",
"@fullcalendar/interaction": "^6.1.8",
"@nebular/auth": "^11.0.0",
"@nebular/eva-icons": "^11.0.0",
"@nebular/security": "^11.0.0",
"@nebular/theme": "^11.0.0",
"@types/jasmine": "^4.3.5",
"@xmldom/xmldom": "^0.8.10",
"@yr/monotone-cubic-spline": "^1.0.3",
"apexcharts": "^3.42.0",
"bootstrap": "5.3.1",
"ckeditor5": "^39.0.1",
"core-js": "^3.32.1",
"docxtemplater": "^3.38.0",
"eva-icons": "^1.1.3",
"exceljs": "^4.3.0",
"file-saver": "^2.0.5",
"intl": "1.2.5",
"jwt-decode": "^3.1.2",
"lodash-es": "^4.17.21",
"luxon": "^3.4.2",
"nebular-icons": "1.1.0",
"ng-apexcharts": "^1.8.0",
"ng-connection-service": "^9.0.3",
"ng-particles": "^3.9.3",
"normalize.css": "8.0.1",
"pako": "^2.1.0",
"pizzip": "^3.1.4",
"roboto-fontface": "0.10.0",
"rxjs": "7.4.0",
"rxjs-compat": "6.6.7",
"sass": "^1.66.1",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
"svg.easing.js": "^2.0.0",
"svg.filter.js": "^2.0.2",
"svg.js": "^2.7.1",
"svg.pathmorphing.js": "^0.1.3",
"svg.resize.js": "^1.4.3",
"svg.select.js": "^3.0.1",
"tslib": "^2.6.2",
"tsparticles-engine": "^2.12.0",
"typeface-exo": "1.1.13",
"xlsx": "^0.18.5",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.2.9",
"@angular/cli": "^15.2.9",
"@angular/compiler-cli": "^15.2.9",
"@angular/language-service": "15.2.9",
"@compodoc/compodoc": "^1.1.16",
"@fortawesome/fontawesome-free": "^6.4.2",
"@types/jasminewd2": "^2.0.10",
"@types/lodash-es": "^4.17.4",
"@types/node": "^20.5.7",
"codelyzer": "^6.0.2",
"husky": "^8.0.3",
"jasmine-core": "~5.1.1",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.2",
"karma-chrome-launcher": "~3.2.0",
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"npm-run-all": "4.1.5",
"protractor": "~7.0.0",
"rimraf": "5.0.1",
"stylelint": "15.10.3",
"ts-node": "10.9.1",
"typescript": "4.9.5"
}
}my angular.json file is look like this
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ngx-admin-demo": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"preserveSymlinks": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico",
"src/favicon.png"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/typeface-exo/index.css",
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
"node_modules/@fortawesome/fontawesome-free/css/all.css",
"node_modules/nebular-icons/scss/nebular-icons.scss",
"src/app/@theme/styles/styles.scss"
],
"scripts": [
"node_modules/apexcharts/dist/apexcharts.min.js"
],
"allowedCommonJsDependencies": [
"lodash",
"zrender/lib/svg/svg",
"zrender/lib/vml/vml"
],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"prod": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"staging": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.stg.ts"
}
]
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ngx-admin-demo:build"
},
"configurations": {
"production": {
"browserTarget": "ngx-admin-demo:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ngx-admin-demo:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/apexcharts/dist/apexcharts.min.js"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/typeface-exo/index.css",
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
"node_modules/font-awesome/scss/font-awesome.scss",
"node_modules/nebular-icons/scss/nebular-icons.scss",
"src/app/@theme/styles/styles.scss"
],
"assets": [
"src/assets",
"src/favicon.ico",
"src/favicon.png"
]
}
}
}
},
"ngx-admin-demo-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "ngx-admin-demo:serve"
}
}
}
}
},
"schematics": {
"@schematics/angular:component": {
"prefix": "ngx",
"style": "scss"
},
"@schematics/angular:directive": {
"prefix": "ngx"
}
},
"cli": {
"analytics": false
}
}please help to sort out this issue
