我目前正在尝试将 AngularJS 应用程序升级到 Angular。一直在关注 Angular.io 上的教程。该项目和我的项目之间有一些差异。我正在使用 RequireJS、Gulp 和 Webpack。
我的index.html要求requireJS/main.js，main.js启动
我尝试开始工作的第一步是使用 NgUpgrade 引导混合应用程序。
到目前为止，我在谷歌搜索中尝试过的是调整 tsconfig，更改为不同版本的 zone.js，重新配置加载的顺序。
我似乎无法解决或在互联网上找到任何解决方案的错误是：
错误：未捕获（承诺中）：错误：模块 AppModule 已引导，但它没有声明“@NgModule.bootstrap”组件，也没有声明“ngDoBootstrap”方法。请定义其中之一。
这是我的 tsconfig.json
{
"compilerOptions": {
"module": "amd",
"moduleResolution": "node",
"sourceMap": true,
"declaration":false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2017", "dom" ],
"typeRoots":["node_modules/@types"]
},
"include:":["./src/s/**/*"],
"exclude": [
"node_modules","sandbox","gulp-tasks","dist","3rdparty",".settings"
]
}
这是我的 main.js，它只是 requirejs 配置：
require.config({
waitSeconds : 0,
baseUrl: './s/lib',
paths: {
'app': 'app',
'angular': 'angular',
'angular-aria': 'angular-aria.min',
'jquery': 'jquery.min'
"wa-angular": "wa-angular.min",
'ui.router.components': 'routeToComponents',
'reflect-metadata':'Reflect',
'zone.js':'zone.js/dist/zone',
'rxjs':'rxjs',
'@angular/common':'common.umd',
'@angular/compiler':'compiler.umd',
'@angular/core':'core.umd',
'@angular/upgrade':'upgrade/upgrade.umd', …我正在尝试将 AngularJS 指令转换为 Angular。使用ngUpgrade.
我有 AngularJS 指令如下：
angular.directive('countClicks', function($timeout) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
scope.clickCount = 0;
elem.on('click', function() {
// Code
});
}
};
});
转换为角度：
@Directive({
selector: '[count-click]'
})
export class CountClickDirective implements AfterViewInit {
constructor(public elem: ElementRef) { }
clickCount = 0;
ngAfterViewInit() {
this.elem.nativeElement.querySelector('count-click', addEventListener('click', function() {
console.log('test directive');
}));
}
}
ngAfterViewInit单击时不会被调用
将上面迁移的指令降级为 AngularJS，以便它可以在 AngularJS 模板中使用
.directive('countClick', <any>downgradeComponent({
component: CountClickDirective,
}))
AngularJS 模板：
<span countClick ng-click="test()"></span>
组件.ts： …
我是 Angular 新手，尝试从 9.0.0 升级到 9.1.11，以将我的打字稿升级为3.7.5 to 3.8在我的应用程序中使用国家/地区地图插件。
当我运行命令时ng update @angular/cli@9.1 @angular/core@9.1我得到了
Using package manager: 'npm' Collecting installed dependencies... Found 68 dependencies. Fetching dependency metadata from registry...\n Package "yamapng" has an incompatible peer dependency to "@angular/common" (requires "^7.1.0" (extended), would install "9.1.12").\n Package "yamapng" has an incompatible peer dependency to "@angular/core" (requires "^7.1.0" (extended), would install "9.1.12").\n Package "angular-svg-round-progressbar" has an incompatible peer dependency to "zone.js" (requires "^0.9.0", would install "0.10.3"). \xc3\x97 Migration failed: …我正在努力将我的AngularJS(1.6)应用程序迁移到Angular(4),现在有一个混合应用程序,用NgUpgrade引导.
然而,这似乎完全破坏了我的量角器测试.
失败:超时等待异步Angular任务在11秒后完成.这可能是因为当前页面不是Angular应用程序.有关详细信息,请参阅常见问题解答:https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
在等待带定位器的元素时 - Locator:By(css selector,.toggle-summary-button)
混合应用更改
应用程序似乎运行正常,AngularJS和Angular组件都按预期工作.我在引导过程中所做的更改是:
1 ng-app从html标签中删除:
<html lang="en" *ng-app="myapp">
2添加了AppModules(@NgModule)等.
3使用NgUpgrade引导应用程序:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['myapp'], {strictDi: true});
});
量角器测试
基于上面的错误,问题似乎与Protractor在等待Angular时所做的事情有关.我有一个beforeEach块加载登录页面,填写详细信息并登录.奇怪的是它仍然打开页面并在用户名字段中输入文本,但随后它无法继续下去.
我无法理解为什么这有任何不同,并且没有多少变化的东西似乎有帮助,所以任何指导都是最受欢迎的!
我试过了,没有成功:
allScriptsTimeout设置从11000增加到60000并且仍然超时.waitForAngularEnabled设置.这解决了登录字段的问题,但是我的http模拟没有工作,测试失败.目前，我正在使用 webpack 将我的 Angular project4 升级到 Angular7。
我卡在了一步
从
HttpModule和Http服务切换到HttpClientModule和HttpClient服务。HttpClient简化了默认的人体工程学（您不再需要映射到 json）并且现在支持类型化的返回值和拦截器。
关于这一步我需要更换
HttpModule => HttpClientModule Http=>
对于从=>更新，是否有任何脚本可以帮助喜欢或我们需要手动编辑？HttpClient HttpHttpClient$rxjs-5-to-6-migrate -p src/tsconfig.app.json用于将cli版本从v7项目更新到v8的ng upgrade命令失败。
首先手动尝试升级cli也会失败。
ng update @angular/cli
您的全局Angular CLI版本（8.0.1）大于本地版本（7.3.9）。使用本地Angular CLI版本。
程序包"@angular/compiler-cli"与“ typescript” 具有不兼容的对等依赖性(requires ">=3.1.1 <3.3", would install "3.4.5")。发现不兼容的对等项依赖关系。往上看。
ng-upgrade ×6
angular ×5
angularjs ×3
angular-cli ×1
angular7 ×1
angular9 ×1
javascript ×1
npm ×1
protractor ×1
requirejs ×1
typescript ×1