Update to Angular 6 #30

timdeschryver · 2018-07-15T08:32:06Z

No description provided.

timdeschryver · 2018-07-15T19:04:37Z

The latest commit uses the angular cli to build the library.
Feedback is as always welcome, I'll walk through it again tomorrow.

timdeschryver · 2018-07-15T19:06:16Z

projects/ngx-drag-to-select/ng-package.json

+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/public_api.ts",
+    "styleIncludePaths": ["./src/scss"]


I tried to build the styles with the cli, but the styles didn't get picked up.
Any ideas? Or do we keep it as it is?

I'll check out the PR later on my local machine and see if I find something.

You should also add "styleIncludePaths": ["./src/scss"] to ng-package-prod.json(?) file because we're building it with the prod flag.

timdeschryver · 2018-07-15T19:08:12Z

projects/ngx-drag-to-select/tslint.json

+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [false, "attribute", "ngx", "camelCase"],


This rule is disabled for now.
When we rename selectItem to something more suitable, we'll have to turn this back on.

timdeschryver · 2018-07-15T19:10:19Z

src/app/app.module.ts

@@ -29,6 +28,7 @@ import { FooterComponent } from './footer/footer.component';
 import { HeaderComponent } from './header/header.component';
 import { PhoneComponent } from './phone/phone.component';
 import { LayoutModule } from '@angular/cdk/layout';
+import { DragToSelectModule } from '../../projects/ngx-drag-to-select/src/lib/drag-to-select.module';


Do we want to import from ngx-drag-to-select here?
If so I think we'll have to modify the build process I think.

timdeschryver · 2018-07-15T19:11:04Z

package.json

+    "build:server": "ng build --prod --project=server",
+    "build:lib": "npm run clean && npm run build:lib:code && npm run build:lib:sass && npm run copy:styles && npm run copy:readme",
+    "build:lib:code": "ng build --prod --project=ngx-drag-to-select",
+    "build:lib:sass": "node-sass projects/ngx-drag-to-select/src/scss/ngx-drag-to-select.scss -o dist/ngx-drag-to-select",
    "deploy": "ngh --dir dist/browser",


Is this used @d3lm ?

This is only meant to be used locally, if needed.

timdeschryver · 2018-07-15T19:23:32Z

projects/ngx-drag-to-select/src/lib/operators.ts

-      const mousePosition = getRelativeMousePosition(event, container);
+      // Explicit cast to `MousePosition` in order to "use" `MousePosition`
+      // we have to import `MousePosition` otherwise we'll get a build error
+      const mousePosition: MousePosition = getRelativeMousePosition(event, container);


Do you got a better solution?
The build was throwing an error because it didn't know MousePosition.

And this doesn't work if we add the return type to getRelativeMousePosition?

I'll try it out later today.

I did a quick check and it doesn't work.
I added a return type to getMousePosition because getRelativeMousePosition already has a return type?

When I remove the type annotation and run either yarn start or build the app for prod with yarn build everything works for me. Can you try again? What is the error? Is TS complaining?

The error comes when you try to build the lib build:lib.

BUILD ERROR projects/ngx-drag-to-select/src/lib/operators.ts(6,14): error TS4023: Exported variable 'createSelectBox' has or is using name 'MousePosition' from external module "C:/Users/tdeschryver/dev/ngx-drag-to-select/projects/ngx-drag-to-select/src/lib/models" but cannot be named. Error: projects/ngx-drag-to-select/src/lib/operators.ts(6,14): error TS4023: Exported variable 'createSelectBox' has or is using name 'MousePosition' from external module "C:/Users/tdeschryver/dev/ngx-drag-to-select/projects/ngx-drag-to-select/src/lib/models" but cannot be named. at Object.<anonymous> (C:\Users\tdeschryver\dev\ngx-drag-to-select\node_modules\ng-packagr\lib\ngc\compile-source-files.js:53:68) at Generator.next (<anonymous>) at fulfilled (C:\Users\tdeschryver\dev\ngx-drag-to-select\node_modules\ng-packagr\lib\ngc\compile-source-files.js:4:58) projects/ngx-drag-to-select/src/lib/operators.ts(6,14): error TS4023: Exported variable 'createSelectBox' has or is using name 'MousePosition' from external module "C:/Users/tdeschryver/dev/ngx-drag-to-select/projects/ngx-drag-to-select/src/lib/models" but cannot be named. Error: projects/ngx-drag-to-select/src/lib/operators.ts(6,14): error TS4023: Exported variable 'createSelectBox' has or is using name 'MousePosition' from external module "C:/Users/tdeschryver/dev/ngx-drag-to-select/projects/ngx-drag-to-select/src/lib/models" but cannot be named. at Object.<anonymous> (C:\Users\tdeschryver\dev\ngx-drag-to-select\node_modules\ng-packagr\lib\ngc\compile-source-files.js:53:68) at Generator.next (<anonymous>) at fulfilled (C:\Users\tdeschryver\dev\ngx-drag-to-select\node_modules\ng-packagr\lib\ngc\compile-source-files.js:4:58)

Yep, indeed. This makes sense. The compiler is trying to figure out the shape of MouseEvent but it can't cause it's defined in a different module and never imported to the operators.ts module. So we can just add the type annotation and remove the comment I guess. What do you think? Or should we keep the comment?

I'm afraid future us will try to remove it 😅 and bumping into this problem again.

Haha you're right, we can leave it in then. Maybe let's reword this to Type annotation is required here, because 'getRelativeMousePosition' return a 'MousePosition' and the TS compiler cannot figure out the shape of this type., or something along those lines 🙂

d3lm · 2018-07-19T06:44:42Z

package.json

    "test:ci": "npm run test && start-server-and-test start http-get://localhost:4200 e2e:ci",
-    "test:watch": "jest --watch",
+    "test:watch": "npm run test -- --watch",
    "lint:check": "ng lint",
    "lint:fix": "ng lint --fix",


This command is broken with the latest CLI. It doesn't allow multiple apps for a single command I suppose. We have to change this to ng lint app --fix && ng lint ngx-drag-to-select --fix.

Ah good catch, you're right.

Do you need the --project flag?

Nope we don't! I also removed the --project flag in the build scripts.

d3lm · 2018-07-21T12:49:36Z

Woho 🎉 We finally made it to Angular 6. Thanks so much @timdeschryver for all the work you put into this PR. I really appreciate your help.

timdeschryver mentioned this pull request Jul 15, 2018

WIP: upgrade to Angular 6 #16

Closed

timdeschryver commented Jul 15, 2018

View reviewed changes

timdeschryver force-pushed the pr/angular6 branch from f00e570 to fa8725b Compare July 15, 2018 19:22

timdeschryver commented Jul 15, 2018

View reviewed changes

timdeschryver mentioned this pull request Jul 16, 2018

Doesn't work with latest angular + CLI #20

Closed

timdeschryver force-pushed the pr/angular6 branch 4 times, most recently from 46658df to 4d8f86c Compare July 18, 2018 18:40

feat: upgrade to Angular 6

cd2e23c

timdeschryver force-pushed the pr/angular6 branch 2 times, most recently from 9e8af8c to a07de70 Compare July 19, 2018 03:21

d3lm requested changes Jul 19, 2018

View reviewed changes

timdeschryver force-pushed the pr/angular6 branch 3 times, most recently from 6366723 to 41d246f Compare July 19, 2018 08:21

d3lm added this to the 2.0 milestone Jul 19, 2018

timdeschryver force-pushed the pr/angular6 branch from 41d246f to f3a3e9e Compare July 20, 2018 15:12

feat: migrate to Angular CLI lib project

df00157

timdeschryver force-pushed the pr/angular6 branch from f3a3e9e to df00157 Compare July 21, 2018 12:09

d3lm approved these changes Jul 21, 2018

View reviewed changes

d3lm merged commit fa010e2 into d3lm:master Jul 21, 2018

timdeschryver deleted the pr/angular6 branch July 21, 2018 12:53

d3lm mentioned this pull request Jul 21, 2018

Update to Angular v6 #3

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update to Angular 6 #30

Update to Angular 6 #30

timdeschryver commented Jul 15, 2018

timdeschryver commented Jul 15, 2018

timdeschryver Jul 15, 2018

d3lm Jul 16, 2018

timdeschryver Jul 16, 2018

timdeschryver Jul 15, 2018

timdeschryver Jul 15, 2018

timdeschryver Jul 15, 2018

d3lm Jul 16, 2018

timdeschryver Jul 15, 2018

d3lm Jul 16, 2018

timdeschryver Jul 16, 2018

timdeschryver Jul 16, 2018

d3lm Jul 19, 2018

timdeschryver Jul 19, 2018

d3lm Jul 20, 2018

timdeschryver Jul 20, 2018

d3lm Jul 20, 2018 •

edited

d3lm Jul 19, 2018

timdeschryver Jul 19, 2018

timdeschryver Jul 19, 2018

d3lm Jul 20, 2018

timdeschryver Jul 20, 2018

d3lm Jul 20, 2018

d3lm commented Jul 21, 2018

Update to Angular 6 #30

Update to Angular 6 #30

Conversation

timdeschryver commented Jul 15, 2018

timdeschryver commented Jul 15, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

d3lm Jul 20, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

d3lm commented Jul 21, 2018

d3lm Jul 20, 2018 •

edited