Topic: Start a new project from scratch

JeroenVunderink priority asked 6 hours ago


I could really use a clear instruction on how to start a new project from scratch. The website shows multiple and often outdated installations.

If I would start fresh today (with the PRO kit) and let's say Angular 20, with routing AND i18n translation. How do I start?

I have done the same for my Angular 19.2.16 project but for some reason pages stack and there is no way for me to get this fixed. Everything looks good, I have use all tips and tricks to find out why pages stack, and now line of thinking is to start an 20 project from scratch and just move over/upgrade my code.

Would be highly appreciated to have the correct steps.


Arkadiusz Idzikowski staff commented 3 hours ago

Could you describe the specific problems you encountered in more detail? We might be able to help and update our guide.

The current version of our guide should include all the steps needed to install and configure our library in Angular projects.

To configure routing or i18n, we recommend using the guides available in the official Angular documentation. These features are not directly related to the operation of our library, and the official documentation always provides the most up-to-date recommendations for your Angular version.

https://v20.angular.dev/guide/i18n

https://v20.angular.dev/guide/routing


JeroenVunderink priority commented 3 hours ago

I just follow the recipe as mentioned on the website, but here I go:

  • I created a new folder for my project
  • I downloaded the MDB-ANGULAR-UI-KIT-PRO-ADVANCE-9.1.0 from my orders
  • I unzipped the file and copied it into my new project folder
  • I opened the angular.json file and replace mdb5-angular-ui-kit-pro-advanced wit my project name
  • My node version is: v20.19.5
  • I installed angualr and made user it version 20: npm install -g @angular/cli@20
  • When I follow the website, the next step is to run ng serve, leading to this error: ode packages may not be installed. Try installing with 'npm install'. Error: Could not find the '@angular/build:dev-server' builder's node package.
  • So, I install the latest version of the ui kit: npm install mdb-angular-ui-kit@latest
  • Now, ng serve works but I get the follwoing errors:

ng serve

Would you like to share pseudonymous usage data about this project with the Angular Team at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more details and how to change this setting, see https://angular.dev/cli/analytics.

No Global setting: enabled Local setting: disabled Effective status: disabled Application bundle generation failed. [1.870 seconds]

▲ [WARNING] Deprecation [plugin angular-sass]

src/styles.scss:4:8:
  4 │ @import 'mdb-angular-ui-kit/assets/scss/mdb.scss';
    ╵         ^

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

▲ [WARNING] Deprecation [plugin angular-sass]

src/styles.scss:5:8:
  5 │ @import 'mdb-angular-calendar/scss/calendar.scss';
    ╵         ^

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

▲ [WARNING] Deprecation [plugin angular-sass]

src/styles.scss:6:8:
  6 │ @import 'mdb-angular-wysiwyg/scss/wysiwyg.scss';
    ╵         ^

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

▲ [WARNING] Deprecation [plugin angular-sass]

src/styles.scss:7:8:
  7 │ @import 'mdb-angular-drag-and-drop/scss/drag-and-drop.scss';
    ╵         ^

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

▲ [WARNING] Deprecation [plugin angular-sass]

src/styles.scss:8:8:
  8 │ @import 'mdb-angular-vector-maps/scss/vector-map.scss';
    ╵         ^

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

▲ [WARNING] 11 repetitive deprecation warnings omitted. Run in verbose mode to see all warnings. [plugin angular-sass]

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

null

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/datepicker' or its corresponding type declarations. [plugin angular-compiler]

node_modules/mdb-angular-calendar/index.d.ts:8:20:
  8 │ import * as i9 from 'mdb-angular-ui-kit/datepicker';
    ╵                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/datepicker' or its corresponding type declarations. [plugin angular-compiler]

node_modules/mdb-angular-calendar/index.d.ts:9:37:
  9 │ import { MdbDatepickerOptions } from 'mdb-angular-ui-kit/datepicker';
    ╵                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/timepicker' or its corresponding type declarations. [plugin angular-compiler]

node_modules/mdb-angular-calendar/index.d.ts:12:21:
  12 │ import * as i10 from 'mdb-angular-ui-kit/timepicker';
     ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/select' or its corresponding type declarations. [plugin angular-compiler]

node_modules/mdb-angular-calendar/index.d.ts:15:21:
  15 │ import * as i15 from 'mdb-angular-ui-kit/select';
     ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/lightbox' or its corresponding type declarations. [plugin angular-compiler]

node_modules/mdb-angular-ecommerce-gallery/index.d.ts:7:20:
  7 │ import * as i5 from 'mdb-angular-ui-kit/lightbox';
    ╵                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/lightbox' or its corresponding type declarations. [plugin angular-compiler]

node_modules/mdb-angular-multi-item-carousel/index.d.ts:3:20:
  3 │ import * as i3 from 'mdb-angular-ui-kit/lightbox';
    ╵                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/lightbox' or its corresponding type declarations. [plugin angular-compiler]

node_modules/mdb-angular-multi-item-carousel/index.d.ts:4:41:
  4 │ ...rt { MdbLightboxItemDirective } from 'mdb-angular-ui-kit/lightbox';
    ╵                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/autocomplete' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:7:38:
  7 │ ...t { MdbAutocompleteModule } from 'mdb-angular-ui-kit/autocomplete';
    ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/charts' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:9:31:
  9 │ import { MdbChartModule } from 'mdb-angular-ui-kit/charts';
    ╵                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/chips' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:11:31:
  11 │ import { MdbChipsModule } from 'mdb-angular-ui-kit/chips';
     ╵                                ~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/datepicker' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:13:36:
  13 │ import { MdbDatepickerModule } from 'mdb-angular-ui-kit/datepicker';
     ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/infinite-scroll' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:16:40:
  16 │ ...bInfiniteScrollModule } from 'mdb-angular-ui-kit/infinite-scroll';
     ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/lazy-loading' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:17:37:
  17 │ ...t { MdbLazyLoadingModule } from 'mdb-angular-ui-kit/lazy-loading';
     ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/lightbox' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:18:34:
  18 │ import { MdbLightboxModule } from 'mdb-angular-ui-kit/lightbox';
     ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/loading' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:19:33:
  19 │ import { MdbLoadingModule } from 'mdb-angular-ui-kit/loading';
     ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/notification' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:21:38:
  21 │ ... { MdbNotificationModule } from 'mdb-angular-ui-kit/notification';
     ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/popconfirm' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:22:36:
  22 │ import { MdbPopconfirmModule } from 'mdb-angular-ui-kit/popconfirm';
     ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/rating' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:26:32:
  26 │ import { MdbRatingModule } from 'mdb-angular-ui-kit/rating';
     ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/scrollbar' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:28:35:
  28 │ import { MdbScrollbarModule } from 'mdb-angular-ui-kit/scrollbar';
     ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/select' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:30:32:
  30 │ import { MdbSelectModule } from 'mdb-angular-ui-kit/select';
     ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/sidenav' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:31:33:
  31 │ import { MdbSidenavModule } from 'mdb-angular-ui-kit/sidenav';
     ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/smooth-scroll' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:32:38:
  32 │ ...{ MdbSmoothScrollModule } from 'mdb-angular-ui-kit/smooth-scroll';
     ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/stepper' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:33:33:
  33 │ import { MdbStepperModule } from 'mdb-angular-ui-kit/stepper';
     ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/sticky' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:34:32:
  34 │ import { MdbStickyModule } from 'mdb-angular-ui-kit/sticky';
     ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/table' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:35:31:
  35 │ import { MdbTableModule } from 'mdb-angular-ui-kit/table';
     ╵                                ~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/timepicker' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:37:36:
  37 │ import { MdbTimepickerModule } from 'mdb-angular-ui-kit/timepicker';
     ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] TS2307: Cannot find module 'mdb-angular-ui-kit/multi-range' or its corresponding type declarations. [plugin angular-compiler]

src/app/app.module.ts:40:36:
  40 │ import { MdbMultiRangeModule } from 'mdb-angular-ui-kit/multi-range';
     ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] NG1010: Value at position 3 in the NgModule.imports of AppModule is not a reference Value could not be determined statically. [plugin angular-compiler]

src/app/app.module.ts:66:11:
  66 │   imports: [
     ╵            ^

Unknown reference.

src/app/app.module.ts:70:4:
  70 │     MdbAutocompleteModule,
     ╵     ~~~~~~~~~~~~~~~~~~~~~

Watch mode enabled. Watching for file changes...



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 9.3.0
  • Device: MacBook
  • Browser: Any
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No