search

PerfectMemory / ngx-contextmenu

A context menu component for Angular
https://perfectmemory.github.io/ngx-contextmenu
MIT License
42 stars 12 forks source link

Upgrade from v7 to 8 #2

Closed mrjohnr closed 2 years ago

mrjohnr commented 2 years ago

Hi is there any steps to upgrade from v7 to 8 I'm stuck on this error:

Error TS2339 (TS) Property 'next' does not exist on type '(contextMenu: ContextMenuComponent, options?: ContextMenuOpenAtPositionOptions) => void'. d:_dev_\rez\ClientApp\tsconfig.json
on next line

  this.contextMenuService.show.next({
      contextMenu: this.contextMenu,
      event: $event,
      item: null,
    });

thanks

sroucheray commented 2 years ago

From 7 to 8 there was some breaking changes. In particular, the ContextMenuService has changed a lot to reduce its public API and avoid feature envy. It is also yet to be documented (Somehow, I wanted to know if it really used in the wild). BTW you can find its API by browsing the source code https://github.com/PerfectMemory/ngx-contextmenu/blob/master/projects/ngx-contextmenu/src/lib/services/context-menu/context-menu.service.ts#L45 There is now a show method (it is not an Subject any more) and you can call it to show a context menu component at a specific x and y position.

mrjohnr commented 2 years ago

thanks,solved previous error,now on build I got these errors:

/src/styles.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/styles.css - Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(4:6) postcss-import: D:\_dev_\rez\ClientApp\node_modules\@perfectmemory\ngx-contextmenu\src\assets\stylesheets\base.scss Unknown word

  2 |
  3 | :root {
> 4 |   // Styling of the element where a context menu can appear
    |      ^
  5 |   --ngx-contextmenu-focusable-border-bottom: 1px dotted #70757e;
  6 |

./src/styles.css - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(4:6) postcss-import: D:\_dev_\rez\ClientApp\node_modules\@perfectmemory\ngx-contextmenu\src\assets\stylesheets\base.scss Unknown word

  2 |
  3 | :root {
> 4 |   // Styling of the element where a context menu can appear
    |      ^
  5 |   --ngx-contextmenu-focusable-border-bottom: 1px dotted #70757e;
  6 |

    at tryRunOrWebpackError (d:\_dev_\rez\ClientApp\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:4936:18)
    at d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:5007:20
    at symbolIterator (d:\_dev_\rez\ClientApp\node_modules\neo-async\async.js:3485:9)
    at done (d:\_dev_\rez\ClientApp\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (d:\_dev_\rez\ClientApp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:4914:43
    at symbolIterator (d:\_dev_\rez\ClientApp\node_modules\neo-async\async.js:3482:9)
    at timesSync (d:\_dev_\rez\ClientApp\node_modules\neo-async\async.js:2297:7)
-- inner error --
Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(4:6) postcss-import: D:\_dev_\rez\ClientApp\node_modules\@perfectmemory\ngx-contextmenu\src\assets\stylesheets\base.scss Unknown word

  2 |
  3 | :root {
> 4 |   // Styling of the element where a context menu can appear
    |      ^
  5 |   --ngx-contextmenu-focusable-border-bottom: 1px dotted #70757e;
  6 |

    at Object.<anonymous> (d:\_dev_\rez\ClientApp\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!d:\_dev_\rez\ClientApp\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!d:\_dev_\rez\ClientApp\src\styles.css:1:7)
    at d:\_dev_\rez\ClientApp\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (d:\_dev_\rez\ClientApp\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:4981:39
    at tryRunOrWebpackError (d:\_dev_\rez\ClientApp\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:4936:18)
    at d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:5007:20
    at symbolIterator (d:\_dev_\rez\ClientApp\node_modules\neo-async\async.js:3485:9)
    at done (d:\_dev_\rez\ClientApp\node_modules\neo-async\async.js:3527:9)

Generated code for d:\_dev_\rez\ClientApp\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!d:\_dev_\rez\ClientApp\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!d:\_dev_\rez\ClientApp\src\styles.css
1 | throw new Error("Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):\nSyntaxError\n\n(4:6) postcss-import: D:\\_dev_\\rez\\ClientApp\\node_modules\\@perfectmemory\\ngx-contextmenu\\src\\assets\\stylesheets\\base.scss Unknown word\n\n \u001b[90m 2 | \u001b[39m\n \u001b[90m 3 | \u001b[39m\u001b[33m:\u001b[39mroot \u001b[33m{\u001b[39m\n\u001b[1m\u001b[31m>\u001b[39m\u001b[22m\u001b[90m 4 | \u001b[39m  // Styling of the element where a context menu can appear\n \u001b[90m   | \u001b[39m     \u001b[1m\u001b[31m^\u001b[39m\u001b[22m\n \u001b[90m 5 | \u001b[39m  --ngx-contextmenu-focusable-border-bottom\u001b[33m:\u001b[39m 1px dotted \u001b[35m#70757e\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m 6 | \u001b[39m\n");

I have 2 imports in syle.css: 

@import '@angular/cdk/overlay-prebuilt.css';
@import '@perfectmemory/ngx-contextmenu/src/assets/stylesheets/base.scss';
sroucheray commented 2 years ago

The comment is a SASS comment and not a proper CSS comment. I think the problem comes from that you cannot import a SCSS file in a CSS file, try renaming your style.css to style.scss.

mrjohnr commented 2 years ago

done,renamed also in angular.json, but still got errors:

/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
2 │ @import '@perfectmemory/ngx-contextmenu/src/assets/stylesheets/base.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 2:9  root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
2 │ @import '@perfectmemory/ngx-contextmenu/src/assets/stylesheets/base.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 2:9  root stylesheet
    at tryRunOrWebpackError (d:\_dev_\rez\ClientApp\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:4936:18)
    at d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:5007:20
    at symbolIterator (d:\_dev_\rez\ClientApp\node_modules\neo-async\async.js:3485:9)
    at done (d:\_dev_\rez\ClientApp\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (d:\_dev_\rez\ClientApp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (d:\_dev_\rez\ClientApp\node_modules\tapable\lib\Hook.js:18:14)
    at d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:4914:43
    at symbolIterator (d:\_dev_\rez\ClientApp\node_modules\neo-async\async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
2 │ @import '@perfectmemory/ngx-contextmenu/src/assets/stylesheets/base.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 2:9  root stylesheet
    at Object.<anonymous> (d:\_dev_\rez\ClientApp\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!d:\_dev_\rez\ClientApp\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!d:\_dev_\rez\ClientApp\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[5].rules[1].use[0]!d:\_dev_\rez\ClientApp\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[5].rules[1].use[1]!d:\_dev_\rez\ClientApp\src\styles.scss:1:7)
    at d:\_dev_\rez\ClientApp\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (d:\_dev_\rez\ClientApp\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (d:\_dev_\rez\ClientApp\node_modules\tapable\lib\Hook.js:14:14)
    at d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:4981:39
    at tryRunOrWebpackError (d:\_dev_\rez\ClientApp\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:4936:18)
    at d:\_dev_\rez\ClientApp\node_modules\webpack\lib\Compilation.js:5007:20
    at symbolIterator (d:\_dev_\rez\ClientApp\node_modules\neo-async\async.js:3485:9)

Generated code for d:\_dev_\rez\ClientApp\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!d:\_dev_\rez\ClientApp\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!d:\_dev_\rez\ClientApp\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[5].rules[1].use[0]!d:\_dev_\rez\ClientApp\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[5].rules[1].use[1]!d:\_dev_\rez\ClientApp\src\styles.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n2 │ @import '@perfectmemory/ngx-contextmenu/src/assets/stylesheets/base.scss';\r\n  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  ╵\n  src\\styles.scss 2:9  root stylesheet");
sroucheray commented 2 years ago

Not sure about this one, can you confirm that the file is present in your node_modules : ./node_modules/@perfectmemory/ngx-contextmenu/src/assets/stylesheets/base.scss Could you also try to import it with a relative URL , something like ../node_modules/@perfectmemory/ngx-contextmenu/src/assets/stylesheets/base.scss or with a tilde ~@perfectmemory/ngx-contextmenu/src/assets/stylesheets/base.scss

mrjohnr commented 2 years ago

@import '../node_modules/@perfectmemory/ngx-contextmenu/src/assets/stylesheets/base.scss'; seems to work thanks

sroucheray commented 2 years ago

I fixed the documentation and I am closing this issue. Feel free to reopen or open another one for further problems. https://perfectmemory.github.io/ngx-contextmenu/?path=/story/context-menu-installation-and-setup--page