html-integrations icon indicating copy to clipboard operation
html-integrations copied to clipboard
verified publisher icon wiris

Module Parsed Error in angular 15

Open asadakkhan opened this issue 1 year ago • 3 comments

/node_modules/@wiris/mathtype-html-integration-devkit/styles/icons/general/close_icon.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| <svg | xmlns:dc="http://purl.org/dc/elements/1.1/"

./node_modules/@wiris/mathtype-html-integration-devkit/styles/icons/general/fulls_icon.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| <svg | xmlns:dc="http://purl.org/dc/elements/1.1/"

./node_modules/@wiris/mathtype-html-integration-devkit/styles/icons/general/max_icon.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| <svg | xmlns:dc="http://purl.org/dc/elements/1.1/"

./node_modules/@wiris/mathtype-html-integration-devkit/styles/icons/general/min_icon.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| <svg | xmlns:dc="http://purl.org/dc/elements/1.1/"

./node_modules/@wiris/mathtype-html-integration-devkit/styles/icons/general/mins_icon.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| <svg | xmlns:dc="http://purl.org/dc/elements/1.1/"

./node_modules/@wiris/mathtype-html-integration-devkit/styles/icons/general/warn_icon.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| |

./node_modules/@wiris/mathtype-html-integration-devkit/styles/icons/hover/close_icon_h.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| <svg | xmlns:dc="http://purl.org/dc/elements/1.1/"

./node_modules/@wiris/mathtype-html-integration-devkit/styles/icons/hover/fulls_icon_h.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| <svg | xmlns:dc="http://purl.org/dc/elements/1.1/"

./node_modules/@wiris/mathtype-html-integration-devkit/styles/icons/hover/max_icon_h.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| <svg | xmlns:dc="http://purl.org/dc/elements/1.1/"

./node_modules/@wiris/mathtype-html-integration-devkit/styles/icons/hover/min_icon_h.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| <svg | xmlns:dc="http://purl.org/dc/elements/1.1/"

./node_modules/@wiris/mathtype-html-integration-devkit/styles/icons/hover/mins_icon_h.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| <svg | xmlns:dc="http://purl.org/dc/elements/1.1/"

./node_modules/@wiris/mathtype-html-integration-devkit/styles/styles.css:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

.wrs_modal_overlay { | position: fixed; | font-family: arial, sans-serif;

**"@wiris/mathtype-ckeditor5": "^8.11.0",
Angular 15 Version** 
Error While compiling

Thanks

asadakkhan avatar Oct 02 '24 07:10 asadakkhan

Hi @xjiang-at-wiris

asadakkhan avatar Oct 02 '24 08:10 asadakkhan

Hello @asadakkhan, could you please provide a minimal repository where we can reproduce the problem? The info you include in your message isn´t enough for us to figure out the real origin of the error. Thank you!

jgonzalez-at-wiris avatar Oct 04 '24 14:10 jgonzalez-at-wiris

import { ChangeDetectorRef, Component } from '@angular/core'; import { ClassicEditor, AccessibilityHelp, Autoformat, AutoImage, Autosave, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Essentials, Heading, ImageBlock, ImageCaption, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, SelectAll, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, TodoList, Underline, Undo, type EditorConfig } from 'ckeditor5'; // import MathType from '@wiris/mathtype-ckeditor5/dist/index';

// import MathType from '@wiris/mathtype-ckeditor5'; // import { SlashCommand } from 'ckeditor5-premium-features';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { constructor(private changeDetector: ChangeDetectorRef) {}

public isLayoutReady = false;
public Editor = ClassicEditor;
public config: EditorConfig = {}; // CKEditor needs the DOM tree before calculating the configuration.
public ngAfterViewInit(): void {
	this.Editor.create('#ele',{
		toolbar: {
			items: [
				'undo',
				'redo',
				'|',
				'heading',
				'|',
				'bold',
				'italic',
				'underline',
				'|',
				'link',
				'insertImage',
				'mediaEmbed',
				'insertTable',
				'blockQuote',
				'|',
				'bulletedList',
				'numberedList',
				'todoList',
				'outdent',
				'indent',
			],
			shouldNotGroupWhenFull: false
		},
		plugins: [
			AccessibilityHelp,
			Autoformat,
			AutoImage,
			Autosave,
			Base64UploadAdapter,
			BlockQuote,
			Bold,
			CloudServices,
			Essentials,
			Heading,
			ImageBlock,
			ImageCaption,
			ImageInline,
			ImageInsert,
			ImageInsertViaUrl,
			ImageResize,
			ImageStyle,
			ImageTextAlternative,
			ImageToolbar,
			ImageUpload,
			Indent,
			IndentBlock,
			Italic,
			Link,
			LinkImage,
			List,
			ListProperties,
			MediaEmbed,
			Paragraph,
			PasteFromOffice,
			SelectAll,
			Table,
			TableCaption,
			TableCellProperties,
			TableColumnResize,
			TableProperties,
			TableToolbar,
			TextTransformation,
			TodoList,
			Underline,
			Undo
		],
	
	}

) this.config = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', 'underline', '|', 'link', 'insertImage', 'mediaEmbed', 'insertTable', 'blockQuote', '|', 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent', ], shouldNotGroupWhenFull: false }, plugins: [ AccessibilityHelp, Autoformat, AutoImage, Autosave, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Essentials, Heading, ImageBlock, ImageCaption, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, SelectAll, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, TodoList, Underline, Undo ], heading: { options: [ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' }, { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }, { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }, { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }, { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' }, { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' } ] }, image: { toolbar: [ 'toggleImageCaption', 'imageTextAlternative', '|', 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|', 'resizeImage' ] }, initialData: '

Congratulations on setting up CKEditor 5! 🎉

\n

\n You've successfully created a CKEditor 5 project. This powerful text editor will enhance your application, enabling rich text editing\n capabilities that are customizable and easy to use.\n

\n

What's next?

\n
    \n
  1. \n Integrate into your app: time to bring the editing into your application. Take the code you created and add to your\n application.\n
    2. \n
  2. \n Explore features: Experiment with different plugins and toolbar options to discover what works best for your needs.\n
    3. \n
  3. \n Customize your editor: Tailor the editor's configuration to match your application's style and requirements. Or even\n write your plugin!\n
    4. \n
\n

\n Keep experimenting, and don't hesitate to push the boundaries of what you can achieve with CKEditor 5. Your feedback is invaluable to us\n as we strive to improve and evolve. Happy editing!\n

\n

Helpful resources

\n\n

Need help?

\n

\n See this text, but the editor is not starting up? Check the browser's console for clues and guidance. It may be related to an incorrect\n license key if you use premium features or another feature-related requirement. If you cannot make it work, file a GitHub issue, and we\n will help as soon as possible!\n

\n', link: { addTargetToExternalLinks: true, defaultProtocol: 'https://', decorators: { toggleDownloadable: { mode: 'manual', label: 'Downloadable', attributes: { download: 'file' } } } }, list: { properties: { styles: true, startIndex: true, reversed: true } }, placeholder: 'Type or paste your content here!', table: { contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties'] } }; 
	this.isLayoutReady = true;
	this.changeDetector.detectChanges();
}

} While adding wiris in app.component.ts it give error in angular 15 @jgonzalez-at-wiris

asadakkhan avatar Oct 07 '24 05:10 asadakkhan

Hi @asadakkhan,

We tried to reproduce your issue with the code snippet provided, and MathType is working as expected in an Angular18 + CKEditor5 demo. Here you can see the example we tried:

ckeditor5-46.1.1-angular-18.zip

We hope this helps you solve your issue. If you need further assistance, please feel free to open a new issue or contact us at [email protected].

carla-at-wiris avatar Sep 16 '25 11:09 carla-at-wiris