升级到AngularJS/AngularJS混合应用程序：获取typescript错误/AngularJS导入错误_Angularjs_Angular_Typescript_Upgrade_Angular Hybrid

升级到AngularJS/AngularJS混合应用程序：获取typescript错误/AngularJS导入错误

angularjs angular typescript

升级到AngularJS/AngularJS混合应用程序：获取typescript错误/AngularJS导入错误,angularjs,angular,typescript,upgrade,angular-hybrid,Angularjs,Angular,Typescript,Upgrade,Angular Hybrid,我们正在使用增量方法将AngularJS应用程序升级为Angular：我们希望能够在AngularJS中创建新组件，并逐个升级现有AngularJS组件，在升级过程中仍然使用功能性应用程序我们使用了以及一些关于混合Angle/AngularJS应用程序在实际应用程序中的文章这里是我们的尝试和我们得到的错误上下文 AngularJS 1.7.3 角度6.1.7 打字稿2.7.2 角型cli 第一步升级至AngularJS 1.7 删除Grunt并使用angular cli 使用ngU

我们正在使用增量方法将AngularJS应用程序升级为Angular：我们希望能够在AngularJS中创建新组件，并逐个升级现有AngularJS组件，在升级过程中仍然使用功能性应用程序

我们使用了以及一些关于混合Angle/AngularJS应用程序在实际应用程序中的文章

这里是我们的尝试和我们得到的错误

上下文

AngularJS 1.7.3
角度6.1.7
打字稿2.7.2
角型cli

第一步

升级至AngularJS 1.7
删除Grunt并使用angular cli
使用ngUpgrade（app.module.ts和app.module.ajs.ts）

移动到脚本：处理错误

这是正式的过程：将.js文件重命名为.ts

然后我们从Node require（）移动到TypeScript模块加载（

var…=require

-->

import…=require

）

理想情况下，我们应该更正由于使用TypeScript编译器而导致的所有类型错误

但是声明说，可以进行增量迁移：在开始时容忍TypeScript错误，以便在不修改的情况下编译js代码（并且在修复代码之后更严格）

为了实现这一点，我们使用awesome typescript加载程序而不是tsc来获取这些选项：transpileOnly、errorsAsWarnings（这需要使用angular Builder/自定义网页包）

选项允许通过编译，但编译似乎完成了两次：第一次没有错误（警告或没有），第二次有错误。。。所以构建失败了。如何只运行第一次编译

替代尝试：保留.js文件，导入和引导时出错

我们还尝试了一种非官方的、不同寻常的方式来增量迁移js代码，即将原始的.js文件与新的.ts文件一起保留

我们在编译或应用程序加载时遇到一些错误，这些错误与导入AngularJS和模块管理有关。事实上，缔约国指出：

一些库设计用于许多模块加载器中，或者不加载模块（全局变量）。这些被称为UMD模块。可以通过导入或全局变量访问这些库。

可以用作全局变量，但只能在脚本内部使用。（脚本是一个没有导入或导出的文件。）

我们注意到：

在.js文件中：访问AngularJS全局角度模式（如果我们删除require（“角度”）-脚本模式

在.ts文件中：我们不能使用从angular导入，否则会出现错误
angular.module未定义
-模块模式

考虑到这一点，我们在浏览器中编译并加载应用程序时没有出现错误，但最终：
this.upgrade.bootstrap（document.body，[App]）
在AngularJS引导时生成错误：

角度1.x未加载
如何解决这个问题？这可能是因为我们没有以TypeScript模块的方式导入AngularJS以避免前面的错误官方文档提到angular.IAngularStatic（仍然会出错）我们也可以尝试setAngularJSGlobal（）<代码>在延迟加载AngularJS时使用，在窗口上不可用
顺便问一下，调用bootstrap（）时使用[App]或[“App”]有什么区别
。。。由于我们是新的升级过程，我们可能做了完全错误的事情。感谢您分享您的经验

配置文件
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 } } }

{ "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" ] }
tsconfig.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 } } }

{ "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" ] }

至于角度1.x未加载
错误；您是否在新应用程序中安装了angularJS

$ npm install --save angular@1.7.3 \ @types/angular
在
angular.json
文件中，您需要包含以下脚本：

"scripts": [ "../node_modules/angular/angular.js", //etc... ],
这是一个升级应用程序的示例，它看起来与您的应用程序相似
或者，您可以通过在
main.ts
中导入angular将其引入导入链

import * as angular from 'angular';

这可能是一个更好的选择，因为它使angular cli/webpack了解angularJS，并且可以防止在某些其他组件（例如混合路由器导入angularJS）时可能出现的错误，例如“
警告：尝试多次加载angular”
”。
我确认答案有效，我们已经能够在混合模式下运行我们的应用程序。事实上，在AngularJs中，我们使用了grunt和browserify，并使用
package.json浏览器
字段打包了一些库。为此，我们必须在
angular.js/build.options.scripts中声明要加载到浏览器中的库： "scripts": [ "./node_modules/jquery/dist/jquery.js", "./node_modules/jquery-ui-dist/jquery-ui.js", "./node_modules/moment/moment.js", "./node_modules/bootstrap/dist/js/bootstrap.js", "./node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap- datetimepicker.js", "./node_modules/bootstrap-tour/build/js/bootstrap-tour.js", "./node_modules/angular/angular.js", "./node_modules/ng-table/bundles/ng-table.js"` ] 非常感谢在角度文档中添加哪些内容可能有用？事实上，中给出的示例基于SystemJS，而我们只使用Webpack（Angular已经使用）实际上，存在一个问题，angular cli的迁移文档尚未更新（这就是为什么它是关于SystemJS的）。事实上，将angular.js 添加到angular.json 可以纠正angular未定义的和angular 1.x未加载的错误。我将继续这个过程，谢谢。