Мы находимся в процессе обновления приложения AngularJS до Angular с помощью поэтапного подхода: мы хотели бы иметь возможность создавать новые компоненты в Angular и обновлять существующие компоненты AngularJS один за другим, все это еще с функциональным приложением во времяprocess.
Мы используем официальную документацию , а также несколько статей о гибридных приложениях Angular / AngularJS для реальных приложений.
Вот наши попытки и ошибки, которые мы получаем.
Контекст
- AngularJS 1.7.3
- Угловой 6.1.7
- Машинопись 2.7.2
- angular-cli
Первые шаги
- обновление до AngularJS 1.7
- удалить Grunt и использовать angular-cli
- использовать ngUpgrade (app.module.ts и app.module.ajs.ts)
Переход к Typscript: работа с ошибками
Это официальный процесс: переименуйте файлы .js в .ts.
Затем мы перешли с узла require () на загрузку модуля TypeScript (var ... = require -> import ... = require)
В идеале, мы должны исправить все ошибки ввода, связанные с использованиемКомпилятор TypeScript.
Но TypeScript doc заявляет, что можно выполнить пошаговую миграцию: будучи терпимым к ошибкам TypeScript в начале, чтобы скомпилировать код jsбез изменений (и позже, после исправления кода).
Для этого мы использовали awesome-typescript-loader вместо tsc, чтобы получить следующие параметры: transpileOnly , errorsAsWarnings (для этого необходимо использовать angular-builders / custom-webpack ).
Опции позволяют пропустить компиляцию, но, похоже, что компиляция выполняется дважды : сначала без ошибок (предупреждения или нет), а затем с ошибками ... сборка завершается неудачно.Как мы можем запустить только первую компиляцию?
Альтернативная попытка: сохранение файлов .js, ошибки при импорте и загрузке
Мы пробовали также неофициальный и необычныйспособ постепенной миграции кода js, то есть сохранение исходных файлов .js вместе с новыми файлами .ts.
При компиляции или загрузке приложения возникли некоторые ошибки, связанные с импортом AngularJS и управлением модулями.Действительно, в документации к модулю TypsScript указано, что:
Some libraries are designed to be used in many module loaders, or with no module loading (global variables). These are known as UMD modules. These libraries can be accessed through either an import or a global variable. ... can be used as a global variable, but only inside of a script. (A script is a file with no imports or exports.)
Что мы заметили:
в файлах .js: доступ к AngularJS global angular (если мы удалим require ("angular") ) - режим сценария
в .ts файлах: мы не можем использовать импорт из угловых , в противном случае мы получаем ошибку angular.module is undefined - mode mode
Имея это в виду, мы заставили приложение скомпилировать и загрузить в браузер без ошибок, но в конце:
this.upgrade.bootstrap (document.body, [App])
генерирует ошибку при загрузке AngularJS:
Angular 1.x not loaded !
Как это исправить?Это может быть из-за того, что мы не импортировали AngularJS в модуле TypeScript, чтобы избежать предыдущей ошибки?
В официальной документации упоминается angular.IAngularStatic (все еще появляется ошибка)?
Мы можем попробовать также setAngularJSGlobal () ?Used when AngularJS is loaded lazily, and not available on window
Кстати, в чем разница между использованием [App] или ["App"] при вызове bootstrap ()?
... Так как мы новички в этом процессе обновленияМы можем делать совершенно неправильные вещи.Спасибо, что поделились своим опытом!
Файлы конфигурации
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "acd-banner-multicanal",
"projects": {
"acd-banner-multicanal": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "target",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "./tsconfig.json",
"assets": [
"src/i18n",
"src/conf/conf.txt",
"src/conf/conf_DEFAULT.txt",
"src/systemjs.config.js",
{ "glob": "font-banner*", "input": "./node_modules/elq-font-icon/build/", "output": "/assets/fonts" },
"src/assets/images",
{ "glob": "system.js*", "input": "./node_modules/systemjs/dist/", "output": "/assets" },
"src/assets/images",
{ "glob": "**/*", "input": "./node_modules/tinymce/plugins", "output": "/assets/tinymce/plugins" },
{ "glob": "**/*", "input": "./node_modules/tinymce/skins", "output": "/assets/tinymce/skins" }
],
"styles": [
"src/assets/styles/style.less"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/jquery-ui-dist/jquery-ui.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"aot": true,
"buildOptimizer": true
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "./karma.conf.js",
"scripts": [],
"styles": [
"src/assets/main.less"
],
"assets": [
"src/i18n",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"acd-ihm-angular-e2e": {
"root": "e2e/",
"sourceRoot": "e2e",
"projectType": "application",
}
},
"defaultProject": "acd-banner-multicanal",
"schematics": {
"@schematics/angular:component": {
"styleext": "less",
"lintFix": true
}
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"outDir": "./target",
"sourceMap": true,
"experimentalDecorators": true,
"allowJs": true,
"baseUrl": "./",
"lib": [
"es2017",
"dom"
],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"paths": {
"angular": ["node_modules/angular/angular"]
}
},
"include": [
"src/**/*"
],
"exclude": [
"src/**/*.spec.ts"
]
}