Обновление Angular с версии 8 до 15. Ошибка «Невозможно использовать оператор импорта вне модуля»
Я пытаюсь обновить угловое приложение с 8 до 15 после обновления всех пакетов, приложение выдает ошибку ниже при запуске
Uncaught SyntaxError: Cannot use import statement outside a module (at scripts.js:1:1)
Я пробовал следующие решения, которые я нашел здесь SyntaxError: невозможно использовать оператор импорта вне модуля , но это не помогло
Добавление type = module в package.js
// package.json
{
"type": "module"
}
изменение модуля на commonjs в tsconfig
"module": "commonjs"
установка ниже пакетов
1. npm i typescript --save-dev
2. npm i ts-node --save-dev
Вот мой package.json
{
"name": "paris-app",
"version": "0.0.0",
"type": "module",
"scripts": {
"ng": "ng",
"start": "node --max-old-space-size=4096 ./node_modules/@angular/cli/bin/ng build --watch",
"build": "node --max-old-space-size=4096 ./node_modules/@angular/cli/bin/ng build",
"test": "ng test",
"test:ci": "ng test --no-watch --no-progress --reporters junit",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^15.0.2",
"@angular/cdk": "15.0.1",
"@angular/common": "~15.0.2",
"@angular/compiler": "~15.0.2",
"@angular/core": "^15.0.2",
"@angular/forms": "~15.0.2",
"@angular/material": "15.0.1",
"@angular/material-moment-adapter": "15.0.1",
"@angular/platform-browser": "~15.0.2",
"@angular/platform-browser-dynamic": "~15.0.2",
"@angular/router": "~15.0.2",
"@datorama/akita": "^7.1.1",
"@datorama/akita-ng-router-store": "^7.0.0",
"@fortawesome/angular-fontawesome": "^0.12.0",
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"chart.js": "^4.0.1",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"moment": "^2.24.0",
"ngx-currency": "^2.0.0",
"ngx-mat-select-search": "^6.0.0",
"ngx-spinner": "^14.0.0",
"ngx-toastr": "^16.0.1",
"normalizr": "^3.3.0",
"primeicons": "^6.0.1",
"primeng": "^15.0.0-rc.1",
"rxjs": "~7.5.7",
"tslib": "^1.9.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "15.0.2",
"@angular/cli": "~15.0.2",
"@angular/compiler-cli": "~15.0.2",
"@angular/language-service": "~15.0.2",
"@datorama/akita-ngdevtools": "^1.0.4",
"@types/jasmine": "~3.3.5",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.12.18",
"codelyzer": "~5.1.0",
"cpx": "^1.5.0",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~6.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"karma-junit-reporter": "^1.2.0",
"node-sass": "^4.12.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~5.12.0",
"tslint-config-prettier": "^1.18.0",
"tslint-plugin-prettier": "^2.0.1",
"typescript": "~4.8.4"
},
"akitaCli": {
"customFolderName": "true",
"isAngular": true,
"basePath": "./src/app"
}
}
и цконфиг
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"typeRoots": ["node_modules/@types"],
"lib": ["es2018", "dom"],
"paths": {
"@admin": ["./src/app/admin"],
"@admin/*": ["./src/app/admin/*"],
...
}
}
}
Старая версия (Angular 8) отлично работает только в обновленной версии. Буду признателен за любую оказанную помощь.
Большое спасибо.
2 ответа
Не уверен, почему мой предыдущий ответ был удален.
Вы используете chartjs 4.0.1, в начале указан Chart.js 3.3.2+, переход на 3.x. Это решило эту проблему для меня.
Помещатьtype="module"внутри тега скрипта:
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>