re-factor to use songhay-core and ng libraries

Question

re-factor to use songhay-core and ng libraries

BryanWilhite opened this issue 5 years ago · comments

Bryan Wilhite commented 5 years ago

install https://github.com/BryanWilhite/songhay-core locally and use it to replace core code intended to be shared

also, replace songhay/core with an Angular library (ng generate library)

Bryan Wilhite · Answer 1 · Wed Feb 06 2019 01:14:58 GMT+0800 (China Standard Time)

i see that i was installing songhay-core incorrectly and i now have a better understanding of the dist\ folder:

Bryan Wilhite · Answer 2 · Wed Feb 06 2019 02:02:42 GMT+0800 (China Standard Time)

ng generate library songhay-angular-core --prefix=rx --dryRun=true

CREATE projects/songhay-angular-core/karma.conf.js (968 bytes)
CREATE projects/songhay-angular-core/ng-package.json (169 bytes)
CREATE projects/songhay-angular-core/package.json (180 bytes)
CREATE projects/songhay-angular-core/tsconfig.lib.json (726 bytes)
CREATE projects/songhay-angular-core/tsconfig.spec.json (246 bytes)
CREATE projects/songhay-angular-core/tslint.json (315 bytes)
CREATE projects/songhay-angular-core/src/test.ts (700 bytes)
CREATE projects/songhay-angular-core/src/public_api.ts (211 bytes)
CREATE projects/songhay-angular-core/src/lib/songhay-angular-core.module.ts (286 bytes)
CREATE projects/songhay-angular-core/src/lib/songhay-angular-core.component.spec.ts (714 bytes)
CREATE projects/songhay-angular-core/src/lib/songhay-angular-core.component.ts (295 bytes)
CREATE projects/songhay-angular-core/src/lib/songhay-angular-core.service.spec.ts (395 bytes)
CREATE projects/songhay-angular-core/src/lib/songhay-angular-core.service.ts (147 bytes)
UPDATE angular.json (4543 bytes)
UPDATE package.json (2272 bytes)
UPDATE tsconfig.json (541 bytes)

NOTE: Run with "dry run" no changes were made.

Bryan Wilhite · Answer 3 · Wed Feb 06 2019 04:46:25 GMT+0800 (China Standard Time)

latest issue: trying to lazy-load YouTubeModule is failing

{ path: 'player/video/youtube', loadChildren: '../../projects/songhay-player-video/src/lib/you-tube/you-tube.module.ts#YouTubeModule' }

returns

ERROR in Could not resolve module ../../projects/songhay-player-video/src/lib/you-tube/you-tube.module.ts relative to /.../Songhay.Dashboard/ClientApp/src/app/routing.module.ts

and for:

{ path: 'player/video/youtube', loadChildren: '../../projects/songhay-player-video/src/public_api#YouTubeModule' }

ERROR in No NgModule metadata found for 'YouTubeModule'.

Bryan Wilhite · Answer 4 · Wed Feb 06 2019 08:08:16 GMT+0800 (China Standard Time)

i am going to upgrade to Angular 7 to see whether this error goes away

https://update.angular.io/

ng update is not working because of my songhay-core local package :(

Bryan Wilhite · Answer 5 · Wed Feb 06 2019 23:30:27 GMT+0800 (China Standard Time)

i have re-read Palmer’s article and can now see that i was missing the apparent need to manually rebuild a library 😕, my lack of prefixes and possibly my misunderstanding that exports from the public-API file should only be in the module level

Bryan Wilhite · Answer 6 · Sat Feb 09 2019 07:27:27 GMT+0800 (China Standard Time)

this error:

Cannot find module '@angular/cdk-experimental/drag-drop'

happens when upgrading to the 7.x beta; the word experimental has been removed from the import path—shown here: https://netbasal.com/getting-to-know-the-angular-cdk-drag-and-drop-feature-d79ba462ce31

Bryan Wilhite · Answer 7 · Sat Feb 09 2019 07:56:40 GMT+0800 (China Standard Time)

i have run ng generate for a songhay-test library under Angular 7.x; this is the current error:

Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): …songhay-test.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

which leads me back to how to actually build these libraries:

ng build songhay-test

BTW the lazy loading points at the test lib:

{ path: 'player/video/youtube', loadChildren: '../../projects/songhay-test/src/lib/songhay-test.module#SonghayTestModule' }

Bryan Wilhite · Answer 8 · Sat Feb 09 2019 08:08:41 GMT+0800 (China Standard Time)

after trying to build the library, getting this error:

error TS5060: Option 'paths' cannot be used without specifying '--baseUrl' option

related issue: angular/angular-cli#11258

Bryan Wilhite · Answer 9 · Sat Feb 09 2019 08:16:58 GMT+0800 (China Standard Time)

added baseUrl in root tsconfig.json, according to “Module Resolution”:

this is now the output :)

ng build songhay-test
Building Angular Package
Building entry point 'songhay-test'
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Removing scripts section in package.json as it's considered a potential security vulnerability.
Built songhay-test
Built Angular Package!
 - from: ..\ClientApp\projects\songhay-test
 - to:   ..\ClientApp\dist\songhay-test

Bryan Wilhite · Answer 10 · Sat Feb 09 2019 08:23:29 GMT+0800 (China Standard Time)

wow. :( the /dist folder for the library build is being clobbered by the main build script, causing the aforementioned missing from the TypeScript compilation error:

changed the build script to this:

"build": "ng build songhay-test && ng build --extract-css --deleteOutputPath=false"

and got the same error 🤣

Bryan Wilhite · Answer 11 · Sat Feb 16 2019 01:52:24 GMT+0800 (China Standard Time)

ok, i can return to this issue after a bit of self-education and adding a new repo, songhay-ng-workspace

i see now that i need to remove the projects/ folder from this repo to indicate that Angular libraries are not a concern here

folders under projects/ that might be referenced in config:

songhay-angular-core
songhay-player-video
songhay-test

Bryan Wilhite · Answer 12 · Sat Feb 16 2019 01:59:38 GMT+0800 (China Standard Time)

library removal procedure:

delete projects/ folder
remove project references from angular.json
remove dist/ entries from the "paths" section of tsconfig.json
replace project/ references in import statements with library references
build

Bryan Wilhite · Answer 13 · Sat Feb 23 2019 08:15:51 GMT+0800 (China Standard Time)

getting new build error:

Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: .\Songhay.Dashboard\Songhay.Dashboard\ClientApp\node_modules\@songhay\player-video-you-tube\songhay-player-video-you-tube.d.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).

Bryan Wilhite · Answer 14 · Sun Feb 24 2019 01:02:07 GMT+0800 (China Standard Time)

generated a new app (version 6) and installed local packages (songhay-core, @songhay/core, @songhay/player-video-you-tube) without any build errors:

Angular CLI: 6.2.9
Node: 10.15.1
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.9
@angular-devkit/build-angular     0.8.9
@angular-devkit/build-optimizer   0.8.9
@angular-devkit/build-webpack     0.8.9
@angular-devkit/core              0.8.9
@angular-devkit/schematics        0.8.9
@angular/cli                      6.2.9
@ngtools/webpack                  6.2.9
@schematics/angular               0.8.9
@schematics/update                0.8.9
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.16.4

Bryan Wilhite · Answer 15 · Sun Feb 24 2019 01:25:31 GMT+0800 (China Standard Time)

generated a new app (version 7) and installed local packages (songhay-core, @songhay/core) and got build error:

chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 651 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 93.1 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]

ERROR in node_modules/@songhay/core/lib/services/app-data.service.d.ts(1,52): error TS2307: Cannot find module '@angular/http'.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! songhay-dashboard@0.0.0 build: `ng build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the songhay-dashboard@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Angular CLI: 7.3.3
Node: 10.15.1
OS: win32 x64
Angular: 7.2.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.3
@angular-devkit/build-angular     0.13.3
@angular-devkit/build-optimizer   0.13.3
@angular-devkit/build-webpack     0.13.3
@angular-devkit/core              7.3.3
@angular-devkit/schematics        7.3.3
@angular/cli                      7.3.3
@ngtools/webpack                  7.3.3
@schematics/angular               7.3.3
@schematics/update                0.13.3
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

Bryan Wilhite · Answer 16 · Sun Feb 24 2019 01:34:23 GMT+0800 (China Standard Time)

generated a new app (version 7), installed @angular/http and installed local packages (songhay-core, @songhay/core, @songhay/player-video-you-tube) without any build errors

this tells me that there is something wrong with Songhay.Dashboard package configuration (or my tests which did not include routing were too shallow); nevertheless the package formats did not prevent successful builds

Bryan Wilhite · Answer 17 · Mon Feb 25 2019 01:35:52 GMT+0800 (China Standard Time)

a new, version 7 app was generated the three libs installed with no build errors which implies that my update was a waste of time; this leads me to the bias that Angular apps should be rebuilt from scratch rather than upgraded across major versions

i am going to close this issue and move on to related issues: