infor-design/enterprise-ng-quickstart

Quickstart app for using the IDS Enterprise Angular wrappers

enterprise-ng-quickstart's Issues

Remove opting out of Ivy

Currently in .tsconfig, for the angularCompilerOptions, we are opting out from Ivy, i.e. "enableIvy": false. I've tried and I haven't had any issues with Ivy and ids-enterprise-ng > 8.0, so I suggest the removal of this property (since it is true by default since Angular 9), or set it to true.

Upgrade to ids-enterprise-ng 6

Describe the solution you'd like
I'd like this project to be upgraded to utilize and work with latest ids-enterprise-ng (currently 6.0.0).

Update to use ng 5.2.0

It would be nice to have this quickstart updated to include the latest ids-enterprise-ng (currently 5.2.0) with deps. Also, make sure the Locale is workind (tried to just update the package.json with newer deps, but the Locale did not work anymore.

Chore: Project is not installing deps or compiling

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Checkout or download enterprise-ng-quickstart
2. run npm install at the root of the project
3. See error

% npm install
npm WARN deprecated [email protected]: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.
npm WARN tarball tarball data for ids-enterprise-ng@https://registry.npmjs.org/ids-enterprise-ng/-/ids-enterprise-ng-17.6.2.tgz (sha512-fp9//x3wPtHGFgnVUsa0jjpjRczWsKmz0/GSnRpGKszA88Adnbjl0rJmdG+kxF3TdHgUzmVWbI+ibJDv3RavoQ==) seems to be corrupted. Trying again.
npm ERR! code EINTEGRITY
npm ERR! sha512-fp9//x3wPtHGFgnVUsa0jjpjRczWsKmz0/GSnRpGKszA88Adnbjl0rJmdG+kxF3TdHgUzmVWbI+ibJDv3RavoQ== integrity checksum failed when using sha512: wanted sha512-fp9//x3wPtHGFgnVUsa0jjpjRczWsKmz0/GSnRpGKszA88Adnbjl0rJmdG+kxF3TdHgUzmVWbI+ibJDv3RavoQ== but got sha512-TByZ8ctEq+iPkDSTUjqefPNZN2rk9uV7R9PSkzYUZjz0hOaJFS5zSQKxlAGuxB0uQ50YVl38FxH0sfxw+VJvjw==. (3092379 bytes)

npm ERR! A complete log of this run can be found in: /Users/jonathan/.npm/_logs/2024-04-18T22_48_47_617Z-debug-0.log

After that, in the package.json file, I changed the dependency version of "ids-enterprise-ng" from "17.6.2" to "17.6.1" and tried again.

npm install ran succesfully.

Then, if you run ng s or npm start, there are some compilation errors:

✔ Browser application bundle generation complete.

Initial chunk files   | Names         |  Raw size
vendor.js             | vendor        |   6.50 MB | 
scripts.js            | scripts       |   4.91 MB | 
polyfills.js          | polyfills     | 335.98 kB | 
styles.css, styles.js | styles        | 229.25 kB | 
main.js               | main          |  35.61 kB | 
runtime.js            | runtime       |   6.55 kB | 

                      | Initial total |  12.00 MB

Build at: 2024-04-25T17:55:29.566Z - Hash: bb4002f2a0a02909 - Time: 3388ms

./src/app/app.component.ts:2:0-85 - Error: Module not found: Error: Can't resolve '@angular/core' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/src/app'

./src/app/app.module.ts:3:0-76 - Error: Module not found: Error: Can't resolve '@angular/core' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/src/app'

./src/app/header/header.component.ts:1:0-45 - Error: Module not found: Error: Can't resolve '@angular/core' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/src/app/header'

./src/app/locale/soho-locale-initializer.module.ts:2:0-58 - Error: Module not found: Error: Can't resolve '@angular/core' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/src/app/locale'

./src/app/locale/soho-locale-initializer.service.ts:3:0-42 - Error: Module not found: Error: Can't resolve '@angular/core' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/src/app/locale'

./src/app/personalize-menu/personalize-menu.component.ts:2:0-36 - Error: Module not found: Error: Can't resolve '@angular/core' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/src/app/personalize-menu'

./src/main.ts:2:0-47 - Error: Module not found: Error: Can't resolve '@angular/core' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/src'

./node_modules/@angular/common/fesm2022/common.mjs:7:0-36 - Error: Module not found: Error: Can't resolve '@angular/core' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/node_modules/@angular/common/fesm2022'

./node_modules/@angular/forms/fesm2022/forms.mjs:7:0-36 - Error: Module not found: Error: Can't resolve '@angular/core' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/node_modules/@angular/forms/fesm2022'

./node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:7:0-36 - Error: Module not found: Error: Can't resolve '@angular/core' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/node_modules/@angular/platform-browser/fesm2022'

./node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:11:0-62 - Error: Module not found: Error: Can't resolve '@angular/common/http' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/node_modules/@angular/platform-browser/fesm2022'

./node_modules/@angular/router/fesm2022/router.mjs:7:0-36 - Error: Module not found: Error: Can't resolve '@angular/core' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/node_modules/@angular/router/fesm2022'

./node_modules/ids-enterprise-ng/fesm2022/ids-enterprise-ng.mjs:1:0-36 - Error: Module not found: Error: Can't resolve '@angular/core' in '/Users/jonathan/Downloads/enterprise-ng-quickstart-main/node_modules/ids-enterprise-ng/fesm2022'

Error: src/app/app.component.ts:7:8 - error TS2307: Cannot find module '@angular/core' or its corresponding type declarations.

7 } from '@angular/core';
         ~~~~~~~~~~~~~~~


Error: src/app/app.component.ts:37:18 - error NG1010: encapsulation must be a member of ViewEncapsulation enum from @angular/core
  Value could not be determined statically.

37   encapsulation: ViewEncapsulation.None
                    ~~~~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:37:18
    37   encapsulation: ViewEncapsulation.None
                        ~~~~~~~~~~~~~~~~~
    Unknown reference.


Error: src/app/app.module.ts:2:61 - error TS2307: Cannot find module '@angular/core' or its corresponding type declarations.

2 import { NgModule, LOCALE_ID, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
                                                              ~~~~~~~~~~~~~~~


Error: src/app/app.module.ts:31:12 - error NG1010: NgModule.schemas must be an array of schemas
  Value is of type '[(not statically analyzable)]'.

31   schemas: [CUSTOM_ELEMENTS_SCHEMA]
              ~~~~~~~~~~~~~~~~~~~~~~~~


Error: src/app/header/header.component.html:1:1 - error NG8001: 'soho-header' is not a known element:
1. If 'soho-header' is an Angular component, then verify that it is part of this module.
2. If 'soho-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <soho-header>
  ~~~~~~~~~~~~~

  src/app/header/header.component.ts:6:16
    6   templateUrl: './header.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.


Error: src/app/header/header.component.html:3:3 - error NG8001: 'soho-toolbar-flex' is not a known element:
1. If 'soho-toolbar-flex' is an Angular component, then verify that it is part of this module.
2. If 'soho-toolbar-flex' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3   <soho-toolbar-flex>
    ~~~~~~~~~~~~~~~~~~~

  src/app/header/header.component.ts:6:16
    6   templateUrl: './header.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.


Error: src/app/header/header.component.html:5:5 - error NG8001: 'soho-toolbar-flex-section' is not a known element:
1. If 'soho-toolbar-flex-section' is an Angular component, then verify that it is part of this module.
2. If 'soho-toolbar-flex-section' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

5     <soho-toolbar-flex-section [isTitle]="true">
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/header/header.component.ts:6:16
    6   templateUrl: './header.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.


Error: src/app/header/header.component.html:5:32 - error NG8002: Can't bind to 'isTitle' since it isn't a known property of 'soho-toolbar-flex-section'.
1. If 'soho-toolbar-flex-section' is an Angular component and it has 'isTitle' input, then verify that it is part of this module.
2. If 'soho-toolbar-flex-section' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

5     <soho-toolbar-flex-section [isTitle]="true">
                                 ~~~~~~~~~~~~~~~~

  src/app/header/header.component.ts:6:16
    6   templateUrl: './header.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.


Error: src/app/header/header.component.html:10:5 - error NG8001: 'soho-toolbar-flex-more-button' is not a known element:
1. If 'soho-toolbar-flex-more-button' is an Angular component, then verify that it is part of this module.
2. If 'soho-toolbar-flex-more-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

10     <soho-toolbar-flex-more-button [isPageChanger]="true">
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/header/header.component.ts:6:16
    6   templateUrl: './header.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.


Error: src/app/header/header.component.html:10:36 - error NG8002: Can't bind to 'isPageChanger' since it isn't a known property of 'soho-toolbar-flex-more-button'.
1. If 'soho-toolbar-flex-more-button' is an Angular component and it has 'isPageChanger' input, then verify that it is part of this module.
2. If 'soho-toolbar-flex-more-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

10     <soho-toolbar-flex-more-button [isPageChanger]="true">
                                      ~~~~~~~~~~~~~~~~~~~~~~

  src/app/header/header.component.ts:6:16
    6   templateUrl: './header.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.


Error: src/app/header/header.component.html:11:7 - error NG8001: 'app-personalize-menu' is not a known element:
1. If 'app-personalize-menu' is an Angular component, then verify that it is part of this module.
2. If 'app-personalize-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

11       <app-personalize-menu></app-personalize-menu>
         ~~~~~~~~~~~~~~~~~~~~~~

  src/app/header/header.component.ts:6:16
    6   templateUrl: './header.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.


Error: src/app/header/header.component.ts:1:81 - error TS2307: Cannot find module '@angular/core' or its corresponding type declarations.

1 import { Component, EventEmitter, HostBinding, OnInit, Output, ViewChild } from '@angular/core';
                                                                                  ~~~~~~~~~~~~~~~


Error: src/app/locale/soho-locale-initializer.module.ts:1:43 - error TS2307: Cannot find module '@angular/core' or its corresponding type declarations.

1 import { NgModule, APP_INITIALIZER } from '@angular/core';
                                            ~~~~~~~~~~~~~~~


Error: src/app/locale/soho-locale-initializer.module.ts:2:63 - error TS2307: Cannot find module '@angular/common' or its corresponding type declarations.

2 import { CommonModule, PlatformLocation, APP_BASE_HREF } from '@angular/common';
                                                                ~~~~~~~~~~~~~~~~~


Error: src/app/locale/soho-locale-initializer.module.ts:25:12 - error NG1010: Value

Error: src/app/locale/soho-locale-initializer.service.ts:2:47 - error TS2307: Cannot find module '@angular/core' or its corresponding type declarations.

2 import { LOCALE_ID, Inject, Injectable } from '@angular/core';
                                                ~~~~~~~~~~~~~~~


Error: src/app/locale/soho-locale-initializer.service.ts:3:31 - error TS2307: Cannot find module '@angular/common' or its corresponding type declarations.

3 import { APP_BASE_HREF } from '@angular/common';
                                ~~~~~~~~~~~~~~~~~


Error: src/app/personalize-menu/personalize-menu.component.html:2:30 - error NG8004: No pipe found with name 'sohoTranslate'.

2   <a href="#">{{'Versions' | sohoTranslate}}</a>
                               ~~~~~~~~~~~~~

  src/app/personalize-menu/personalize-menu.component.ts:19:16
    19   templateUrl: 'personalize-menu.component.html'
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PersonalizeMenuComponent.


Error: src/app/personalize-menu/personalize-menu.component.html:9:27 - error NG8004: No pipe found with name 'sohoTranslate'.

9   <a href="#">{{'Modes' | sohoTranslate}}</a>
                            ~~~~~~~~~~~~~

  src/app/personalize-menu/personalize-menu.component.ts:19:16
    19   templateUrl: 'personalize-menu.component.html'
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PersonalizeMenuComponent.


Error: src/app/personalize-menu/personalize-menu.component.html:17:28 - error NG8004: No pipe found with name 'sohoTranslate'.

17   <a href="#">{{'Colors' | sohoTranslate}}</a>
                              ~~~~~~~~~~~~~

  src/app/personalize-menu/personalize-menu.component.ts:19:16
    19   templateUrl: 'personalize-menu.component.html'
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PersonalizeMenuComponent.


Error: src/app/personalize-menu/personalize-menu.component.ts:6:8 - error TS2307: Cannot find module '@angular/core' or its corresponding type declarations.

6 } from '@angular/core';
         ~~~~~~~~~~~~~~~


Error: src/main.ts:1:32 - error TS2307: Cannot find module '@angular/core' or its corresponding type declarations.

1 import { enableProdMode } from '@angular/core';
                                 ~~~~~~~~~~~~~~~


Error: src/main.ts:12:10 - error TS7006: Parameter 'err' implicitly has an 'any' type.

12   .catch(err => console.error(err));
            ~~~




** Angular Live Development Server is listening on localhost:55550, open your browser on http://localhost:55550/ **


✖ Failed to compile.

Expected behavior
I expected both npm install and npm start to run smoothly.

Platform

• Device: M1 Pro MacBook Pro
• OS Version: darwin arm64 (MacOS Sonoma 14.4.1)
• Node v20.11.0
• Angular CLI: 17.3.3
• Node: 20.11.0
• Package Manager: npm 10.2.4

Additional context
This project used to work fine. I used it to start a new angular + IDS project and came back to it to check the dependencies and their versions after facing compatibility issues trying to upgrade the dependencies of my project.