Creating a copy of grid module

[localsite]

Hi, these aren't issues with your code. The following are hurdles I've hit while trying to set up a copy of the grid module.

1. I'm successfully displaying a bike share vehicles list locally using the Coord.co API with the following repo:

https://github.com/DirectoryBuilder/ngx-project/blob/master/notes.md

I moved the grid folder content into libs/home/src/lib/containers/vehicles and renamed account to vehicle throughout.

The grid card view works locally with the Coord API (but the list view doesn't show specific data. It does however repeat, indicating the data is reaching the list).

2. In a forked repo, I copied "libs/grid" to "libs/gridmap"
and replaced "account" with "vehicle".

https://github.com/DirectoryBuilder/ngx-starter-kit

Adding gridmap to dashboard.module.ts is causing this error:

Error: Uncaught (in promise): Error: Cannot find module '@ngx-starter-kit/gridmap'
Error: Cannot find module '@ngx-starter-kit/gridmap'

Were would I define the new gridmap module?

menu-data.ts (line 44) returns a 404 page for /dashboard/vehilcles.

Using 'gridmap' in dashboard.module.ts animation (line 49) also causes the error:

ERROR in Could not resolve module @ngx-starter-kit/gridmap relative to /Library/Sites/ngx-starter-kit/libs/dashboard/src/lib/dashboard.module.ts

Thanks for any pointers you can provide!

[xmlking]

In a forked repo, I copied "libs/grid" to "libs/gridmap"
and replaced "account" with "vehicle".

you cannot just copy a module. Create gridmap lib module and copy/generate required controllers and/or services.

ng g lib gridmap           --routing --lazy --prefix=ngx --parent-module=libs/dashboard/src/lib/dashboard.module.ts   --tags=child-module

you can see examples for modules/code generation in palybook

[SmartParks]

Running that command returns this error:
Unexpected token } in JSON at position 2584

How would I determine what file and line has the extra }?
I've installed the Redux DevTools extension.

[xmlking]

Fix is on the way. We need to downgrade angular cli to stable version

[xmlking]

get the latest code. This should fix it.

[localsite]

Thanks, the command runs without error. (But no results are returned, and I could not find gridmap in the code after running.)

Where would I define the new module to avoid this error:

VM2379:37 ERROR Error: Uncaught (in promise): Error: Cannot find module "@ngx-starter-kit/gridmap".
Error: Cannot find module "@ngx-starter-kit/gridmap".
at $_lazy_route_resource lazy namespace object:46
at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3825)
at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
at Zone.push.../../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)

Also, a lot of errors are occurring because socket.io is looking for port 3000.

Here's the fork where the errors are occurring. I ran the command both before and after copying the gridmap folder into the repo:
https://github.com/DataPortal/coord-angular

[xmlking]

Noticed same issue.
nx team is updating the version to make it compatible with angular 6.1.0
nrwl/nx#645
we may have to wait or manually create module.

Manual module creation:

1. copy module e.g., libs/grid as libs\gridmap
2. do any module, controller, service class name changes as needed.
3. add gridmap reference in apps/webapp/tsconfig.app.json
4. add gridmap reference in apps/webapp-e2e/tsconfig.e2e.json
5. add gridmap reference in nx.json

Reference: https://nrwl.io/nx/guide-nx-workspace

[localsite]

Getting very close. Remaining error:

Could not resolve module @ngx-starter-kit/gridmap relative to /Library/Sites/coord-angular/libs/dashboard/src/lib/dashboard.module.ts
Failed to compile.

https://github.com/DataPortal/coord-angular/blob/master/libs/gridmap/src/lib/gridmap.module.ts

Removing the following allows the site to compile:

  { path: '', redirectTo: 'crud-table', pathMatch: 'full', data: { animation: 'gridmap' } },
  { path: 'crud-table', component: VehiclesTableComponent, data: { animation: 'vehicles-table' },
    children: [
      { path: ':id', component: VehicleDetailComponent, data: { animation: 'vehicle-detail' } },
    ],
  },

How would I alter the lines above to get the side navigation working?

[xmlking]

you also need to add gridmap reference to tsconfig.json and gridmap block to angular.json
as shown in the diff below. luckily all of those steps are taken care by nx CLI. we have to wait for nx 6.2 release.

https://github.com/CrossBusiness/coord-angular/commit/dd3f060e4e6e4cc81980a4ed44c54553557708ae

send you PR to make it easy for you to pull changes.

At this point you also need to fix code specific you business requirements.

[jkosters]

with @nrwl/schematics@6.2.0-beta.5 I was able to generate the library without routing and lazy loading using
ng g lib gridmap --prefix=ngx --parent-module=libs/dashboard/src/lib/dashboard.module.ts --tags=child-module

[xmlking]

with latest code, you should be able to generate lazy routing modules. please test and report any issues.
we have to lock typescript version to 2.7.2 until this issue resolved.
nrwl/nx#684