Мобильная версияThis is the error I get:
**
Failed to load module script: Expected a JavaScript module script but
the server responded with a MIME type of «Приложение /октет-потоки».
строгая проверка типа MIME обеспечивается для сценариев модуля на HTML
Spec.
< /blockquote>
Не удалось загрузить модуль Script: Ожидаемый javascript module
script, но сервер ответил с помощью Mime. /> Строгая проверка типа MIME осуществляется для сценариев модулей на HTML
Spec.
< /blockquote>
** < /p>
Вещи, которые я пробовал:
, поэтому первое, что я думал, что путь, с тех пор я импортировал все, возможно, все, возможно, все, возможно, я не знаю, и его зависит, и его зависимости и его зависимости, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его зависит, и его. Плагин page.js, но ничего не изменилось.
Затем я думал, что WebServer не настроен должным образом, в конце концов, я использую Express.js, что идеально подходит для моего сценария для его простоты. Сражаясь с этой полдня, это не привело к решению, поэтому пошел в Nginx. Сообщения об ошибках ничего не изменили. Hovewer SomeTimes это давало мне ошибки импорта, но я думаю, что это из -за беспорядка, который я создал в проекте. < /P>
Что еще я попробовал? в разных браузерах (Mozilla/Chrome). Однако в почтальоне I
был в состоянии визуализировать календарь.
Код: Выделить всё
import express from 'express';
import { join, dirname } from 'path';
import path from 'path';
import history from 'connect-history-api-fallback';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const app = express();
const port = 8888;
app.use(express.static(join(__dirname, 'public'), {
setHeaders: (res, filePath) => {
if (filePath.endsWith('.js') || filePath.endsWith('.mjs')) {
res.setHeader('Content-Type', 'application/javascript');
}
if (filePath.endsWith('.html')) {
res.setHeader('Content-Type', 'text/html');
}
}
}));
app.use(history({index: 'index.html'}));
app.use(express.static(join(__dirname, 'src')));
app.use(express.static(join(__dirname, 'src/views')));
app.use(express.static(join(__dirname, 'src/views/make_appointment')));
app.use(express.static(join(__dirname, 'src/views/appointments')));
app.use(express.static(join(__dirname, 'src/views/users')));
app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
< /code>
И от этого я пошел в Nginx: < /p>
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8888;
server_name localhost;
root I:/pet-appointment/Project-fe/src/;
index index.html;
location / {
try_files $uri /index.html;
}
# Serve HTML views
location /calendar {
try_files /views/calendar.html /index.html;
}
types { application/javascript js mjs; }
# Serve .js files with the correct MIME type
location ~* \.js$ {
default_type application/javascript;
add_header Content-Type application/javascript;
}
location /node_modules/ {
root I:/pet-appointment/Project-fe;
add_header Content-Type application/javascript;
autoindex on;
}
location ~* \.(js|css|json|ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot|otf|mp4|webm|ogv|ogg)$ {
add_header Access-Control-Allow-Origin *;
}
}
}
< /code>
Структура проекта только с необходимыми файлами: < /p>
project /src /speeds: < /p>
[*] calendar.html
[*] calendar.js < /li>
/> project /src: < /p>
[*]-index.html
navigation_bar.mjs (это используется на каждой странице в качестве компонента, однако я не пробовал без этого, но я не думал, что это корень
раз. />
[b] calendar.html:[/b]
FullCalendar Test
Код: Выделить всё
import { Calendar } from '/node_modules/@fullcalendar/core';
import interactionPlugin from '/node_modules/@fullcalendar/interaction';
import dayGridPlugin from '/node_modules/@fullcalendar/daygrid';
import timeGridPlugin from '/node_modules/@fullcalendar/timegrid';
import listPlugin from '/node_modules/@fullcalendar/list';
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin ],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
initialDate: '2018-01-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2018-01-01',
},
{
title: 'Long Event',
start: '2018-01-07',
end: '2018-01-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2018-01-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2018-01-16T16:00:00'
},
{
title: 'Conference',
start: '2018-01-11',
end: '2018-01-13'
},
{
title: 'Meeting',
start: '2018-01-12T10:30:00',
end: '2018-01-12T12:30:00'
},
{
title: 'Lunch',
start: '2018-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2018-01-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2018-01-12T17:30:00'
},
{
title: 'Dinner',
start: '2018-01-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2018-01-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2018-01-28'
}
]
});
calendar.render();
});
Код: Выделить всё
Appointments
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.pt-8 {
padding-top: 8px;
}
.center {
text-align: center;
}
.container {
width: fit-content;
margin: auto;
}
.border {
border: 1px solid black;
}
.success {
color: green;
}
.error {
color: red;
}
{"name": "pet-frontend",
"version": "1.0.0",
"description": "A JavaScript project",
"type": "module",
"main": "./dist/index.js",
"scripts": {
"start": "node server.mjs",
"build": "node ./node_modules/parcel-bundler/bin/cli build ./src/index.html --out-dir ./dist/",
"lint": "node ./node_modules/eslint/bin/eslint . --ext .js --fix"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"eslint": "^8.57.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.29.1",
"parcel": "^2.13.3"
},
"dependencies": {
"@fullcalendar/core": "^6.1.15",
"@fullcalendar/daygrid": "^6.1.15",
"@fullcalendar/list": "^6.1.15",
"@fullcalendar/timegrid": "^6.1.15",
"bootstrap": "^5.3.3",
"connect-history-api-fallback": "^2.0.0",
"express": "^4.21.2",
"fullcalendar": "^6.1.15",
"page": "^1.11.6"
}
}
< /code>
Если какой -либо другой файл необходим, не стесняйтесь спросить.
Спасибо за вашу помощь. < /p>
Подробнее здесь: https://stackoverflow.com/questions/795 ... ng-project
