search

GovAlta / ui-components

ui-components contains the code you need to start building a user interface for Government of Alberta platforms and services.
Apache License 2.0
14 stars 24 forks source link

Modify the ADSP nx tools angular project generator #1336

Open ArakTaiRoth opened 1 year ago

ArakTaiRoth commented 1 year ago

Info

Currently people are being directed to using ADSP's nx tools angular project generator to start their project. The problem with this is that the project generated by this tool is seriously outdated when it comes to the Design System.

Acceptance Criteria:

  1. The project generated by this tool should use the latest Design System standards. This will include:
    • Updating the versions used in the package.json
    • Adding web-components to the package.json
    • Changing the CSS file used
    • Changing all components used to be the latest versions

You can find the relevant code here

chrisolsen commented 11 months ago 
1)
D:\goa>npx create-nx-workspace ddd-apitc --preset empty --nx-cloud false
 >  NX   Let's create a new workspace [https://nx.dev/getting-started/intro]
 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
 >  NX   The "apps" preset is deprecated.
   The "apps" preset will be removed in a future Nx release. Use the "undefined" preset instead.
 >  NX   Creating your v16.9.1 workspace.
   To make sure the command works reliably in all environments, and that the preset is applied correctly,
   Nx will run "npm install" several times. Please wait.
√ Installing dependencies with npm
√ Successfully created the workspace: ddd-apitc.
warning: in the working copy of '.editorconfig', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.gitignore', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.vscode/extensions.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'README.md', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'nx.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package-lock.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches it
 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
 >  NX   Nx CLI is not installed globally.
   This means that you might have to use "yarn nx" or "npx nx" to execute commands in the workspace.
   Run "yarn global add nx" or "npm install -g nx" to be able to execute command directly.
 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
 >  NX   First time using Nx? Check out this interactive Nx tutorial.
   https://nx.dev/getting-started/tutorials/package-based-repo-tutorial

2)
D:\goa>cd ddd-apitc
D:\goa\ddd-apitc>npm i -D @abgov/nx-oc @abgov/nx-adsp
npm WARN deprecated @babel/plugin-proposal-unicode-property-regex@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-unicode-property-regex instead.
npm WARN deprecated @babel/plugin-proposal-optional-catch-binding@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
npm WARN deprecated @babel/plugin-proposal-private-methods@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
npm WARN deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm WARN deprecated @babel/plugin-proposal-export-namespace-from@7.18.9: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-export-namespace-from instead.
npm WARN deprecated @babel/plugin-proposal-json-strings@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-json-strings instead.
npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated @babel/plugin-proposal-dynamic-import@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-dynamic-import instead.
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated @babel/plugin-proposal-logical-assignment-operators@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead.
npm WARN deprecated @babel/plugin-proposal-class-static-block@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-static-block instead.
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated @babel/plugin-proposal-private-property-in-object@7.21.11: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm WARN deprecated @babel/plugin-proposal-async-generator-functions@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
added 913 packages, changed 1 package, and audited 1291 packages in 1m
137 packages are looking for funding
  run `npm fund` for details
6 moderate severity vulnerabilities
To address all issues, run:
  npm audit fix
Run `npm audit` for details.
3)
D:\goa\ddd-apitc>npm i -D @nrwl/angular @nx-dotnet/core
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @ddd-apitc/source@0.0.0
npm WARN Found: @nrwl/angular@15.9.7
npm WARN node_modules/@nrwl/angular
npm WARN   peer @nrwl/angular@"^15.0.0" from @abgov/nx-adsp@5.9.0
npm WARN   node_modules/@abgov/nx-adsp
npm WARN     dev @abgov/nx-adsp@"^5.9.0" from the root project
npm WARN   1 more (the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @nrwl/angular@"^15.0.0" from @abgov/nx-adsp@5.9.0
npm WARN node_modules/@abgov/nx-adsp
npm WARN   dev @abgov/nx-adsp@"^5.9.0" from the root project
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated @wessberg/ts-evaluator@0.0.27: this package has been renamed to ts-evaluator. Please install ts-evaluator instead
added 255 packages, removed 117 packages, changed 55 packages, and audited 1429 packages in 29s
172 packages are looking for funding
  run `npm fund` for details
6 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
  npm audit fix --force
Run `npm audit` for details.
4)
D:\goa\ddd-apitc>npx nx g @abgov/nx-adsp:angular-app apitc-ui
>  NX  Generating @abgov/nx-adsp:angular-app
√ Which ADSP environment do you want to target? · dev
√ Which tenant is the application or service for? · autotest
√ Would you like to use Standalone Components? (y/N) · false
Could not format apitc-ui/src/index.html. Error: "Unexpected closing tag "-app-root". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (11:16)
   9 |   </head>
  10 |   <body>
> 11 |     <-app-root></-app-root>
     |                ^^^^^^^^^^^^
  12 |   </body>
  13 | </html>
  14 |"
Cannot generate deployment; run 'nx g @abgov/nx-oc:workspace' first.
UPDATE package.json
UPDATE nx.json
CREATE tsconfig.base.json
CREATE .prettierrc
CREATE .prettierignore
UPDATE .vscode/extensions.json
CREATE jest.preset.js
CREATE jest.config.ts
UPDATE .gitignore
CREATE apitc-ui/project.json
CREATE apitc-ui/src/assets/.gitkeep
CREATE apitc-ui/src/favicon.ico
CREATE apitc-ui/src/index.html
CREATE apitc-ui/src/styles.css
CREATE apitc-ui/tsconfig.app.json
CREATE apitc-ui/tsconfig.editor.json
CREATE apitc-ui/tsconfig.json
CREATE apitc-ui/src/app/app.component.html
CREATE apitc-ui/src/app/app.component.spec.ts
CREATE apitc-ui/src/app/app.component.ts
CREATE apitc-ui/src/app/app.component.css
CREATE apitc-ui/src/app/app.module.ts
CREATE apitc-ui/src/app/app.routes.ts
CREATE apitc-ui/src/app/nx-welcome.component.ts
CREATE apitc-ui/src/main.ts
CREATE .eslintrc.json
CREATE .eslintignore
CREATE apitc-ui/.eslintrc.json
CREATE apitc-ui/jest.config.ts
CREATE apitc-ui/src/test-setup.ts
CREATE apitc-ui/tsconfig.spec.json
CREATE apitc-ui-e2e/cypress.config.ts
CREATE apitc-ui-e2e/src/e2e/app.cy.ts
CREATE apitc-ui-e2e/src/fixtures/example.json
CREATE apitc-ui-e2e/src/support/app.po.ts
CREATE apitc-ui-e2e/src/support/commands.ts
CREATE apitc-ui-e2e/src/support/e2e.ts
CREATE apitc-ui-e2e/tsconfig.json
CREATE apitc-ui-e2e/project.json
CREATE apitc-ui-e2e/.eslintrc.json
CREATE apitc-ui/nginx.conf
CREATE apitc-ui/src/app/auth-callback/auth-callback.component.css
CREATE apitc-ui/src/app/auth-callback/auth-callback.component.html
CREATE apitc-ui/src/app/auth-callback/auth-callback.component.spec.ts
CREATE apitc-ui/src/app/auth-callback/auth-callback.component.ts
CREATE apitc-ui/src/app/auth.interceptor.ts
CREATE apitc-ui/src/app/home/home.component.html
CREATE apitc-ui/src/app/home/home.component.ts
CREATE apitc-ui/src/app/logout/logout.component.html
CREATE apitc-ui/src/app/logout/logout.component.ts
CREATE apitc-ui/src/app/protected/protected.component.css
CREATE apitc-ui/src/app/protected/protected.component.html
CREATE apitc-ui/src/app/protected/protected.component.spec.ts
CREATE apitc-ui/src/app/protected/protected.component.ts
CREATE apitc-ui/src/app/services/auth-guard.service.ts
CREATE apitc-ui/src/app/services/auth.service.ts
CREATE apitc-ui/src/app/tenant.service.ts
CREATE apitc-ui/src/assets/banner.jpg
CREATE apitc-ui/src/assets/github-1.svg
CREATE apitc-ui/src/environments/config.ts
CREATE apitc-ui/src/environments/environment.ts
CREATE apitc-ui/src/polyfills.ts
npm WARN cleanup Failed to remove some directories [
npm WARN cleanup   [
npm WARN cleanup     'D:\\goa\\ddd-apitc\\node_modules\\@nx\\cypress\\node_modules\\@nx\\.nx-win32-x64-msvc-wqZjvNkR',
npm WARN cleanup     [Error: EPERM: operation not permitted, unlink 'D:\goa\ddd-apitc\node_modules\@nx\cypress\node_modules\@nx\.nx-win32-x64-msvc-wqZjvNkR\nx.win32-x64-msvc.node'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'unlink',
npm WARN cleanup       path: 'D:\\goa\\ddd-apitc\\node_modules\\@nx\\cypress\\node_modules\\@nx\\.nx-win32-x64-msvc-wqZjvNkR\\nx.win32-x64-msvc.node'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'D:\\goa\\ddd-apitc\\node_modules\\@nx\\jest\\node_modules\\@nx\\.nx-win32-x64-msvc-TUk1Db3L',
npm WARN cleanup     [Error: EPERM: operation not permitted, unlink 'D:\goa\ddd-apitc\node_modules\@nx\jest\node_modules\@nx\.nx-win32-x64-msvc-TUk1Db3L\nx.win32-x64-msvc.node'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'unlink',
npm WARN cleanup       path: 'D:\\goa\\ddd-apitc\\node_modules\\@nx\\jest\\node_modules\\@nx\\.nx-win32-x64-msvc-TUk1Db3L\\nx.win32-x64-msvc.node'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'D:\\goa\\ddd-apitc\\node_modules\\@nx\\linter\\node_modules\\@nx\\.nx-win32-x64-msvc-pTxr6hEG',
npm WARN cleanup     [Error: EPERM: operation not permitted, unlink 'D:\goa\ddd-apitc\node_modules\@nx\linter\node_modules\@nx\.nx-win32-x64-msvc-pTxr6hEG\nx.win32-x64-msvc.node'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'unlink',
npm WARN cleanup       path: 'D:\\goa\\ddd-apitc\\node_modules\\@nx\\linter\\node_modules\\@nx\\.nx-win32-x64-msvc-pTxr6hEG\\nx.win32-x64-msvc.node'
npm WARN cleanup     }
npm WARN cleanup   ]
npm WARN cleanup ]
added 432 packages, removed 238 packages, changed 9 packages, and audited 1623 packages in 1m
223 packages are looking for funding
  run `npm fund` for details
5 moderate severity vulnerabilities
To address issues that do not require attention, run:
  npm audit fix
To address all issues (including breaking changes), run:
  npm audit fix --force
Run `npm audit` for details.
5)npx nx serve --open
D:\goa\ddd-apitc\apitc-ui>npx nx serve --open
> nx run apitc-ui:serve:development --open
√ Browser application bundle generation complete.
Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   3.65 MB |
polyfills.js          | polyfills     | 333.16 kB |
styles.css, styles.js | styles        | 301.59 kB |
main.js               | main          |  45.76 kB |
runtime.js            | runtime       |   6.51 kB |
                      | Initial Total |   4.32 MB
Build at: 2023-10-05T16:49:10.761Z - Hash: 358409543bc6c4cc - Time: 5560ms
Warning: D:\goa\ddd-apitc\apitc-ui\src\app\services\auth.service.ts depends on 'oidc-client'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Warning: D:\goa\ddd-apitc\apitc-ui\src\main.ts depends on '@abgov/core-css'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Error: src/app/app.module.ts:18:5 - error NG6002: 'AngularComponentsModule' does not appear to be an NgModule class.
18     AngularComponentsModule,
       ~~~~~~~~~~~~~~~~~~~~~~~
  ../node_modules/@abgov/angular-components/lib/angular-components.module.d.ts:1:22
    1 export declare class AngularComponentsModule {
                          ~~~~~~~~~~~~~~~~~~~~~~~
    This likely means that the library (@abgov/angular-components) which declares AngularComponentsModule 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.
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
× Failed to compile.
ArakTaiRoth commented 10 months ago

@ArakTaiRoth Reach out to Roy regarding this story

ArakTaiRoth commented 10 months ago

Moving to Blocked status. This is being followed up by the ADSP team and can be checked here.