标签: angular2-upgrade

我目前使用angular-cli的Hybrid Angular应用程序(2.4.9和1.5.0).目前,在运行我们的应用程序时,我们能够正确引导1.5应用程序:

// main.ts
import ...

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  angular.element(document).ready(() => { 
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['myApp'], {strictDi: true});
  });
});

但是,在我们的test.ts文件中:

// test.ts
// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import ...;

declare var __karma__: any;
declare var require: any;

__karma__.loaded = function () {};

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  // I'm assuming that I need to call 'boostrapModule()' somehow here...
  platformBrowserDynamicTesting() 
);

const context = require.context('./', true, …

我想升级我的传统Angular JS应用程序,我一直在关注angular.io的文档来设置混合应用程序.

现在我在app.ts中的bootstrapping过程看起来像:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);

我的新app.module.ts看起来像:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
  imports: [
  BrowserModule,
  UpgradeModule
]})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['myApp'], { strictDi: true });
  }
}

但是,当我运行该应用程序时,我收到以下错误:

compiler.es5.js:1503 Uncaught Error: Can't resolve all parameters for AppModule: (?).
at syntaxError (compiler.es5.js:1503)
at CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:14780)
at …

既然Angular 正在进行语义版本控制,并且Angular2.4.3已经发布了,那么在我升级到现有项目中的下一个Angular版本时,我有点困惑.

我和Angular-cli有一个项目@angular/core: 2.2.0.这是我的package.json:

"dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@types/jasmine": "^2.5.40",
    "angular2-click-outside": "^0.1.0",
    "angular2-modal": "^2.0.2",
    "bootstrap": "4.0.0-alpha.4",
    "bootstrap-loader": "^2.0.0-beta.15",
    "core-js": "^2.4.1",
    "karma-remap-istanbul": "^0.2.2",
    "material-design-icons": "^3.0.1",
    "ng2-bootstrap": "^1.1.16",
    "ng2-charts": "^1.4.4",
    "postcss-loader": "^1.1.1",
    "rxjs": "5.0.0-rc.4",
    "screenfull": "^3.0.2",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.19-3",
    "codelyzer": "1.0.0-beta.3",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.7.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0", …

升级到之后RC6,会发生以下错误:

zone.js:101 GET http://localhost/traceur 404 (Not Found)
zone.js:484 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost/traceur
            at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost/vendor/zone.js/dist/zone.js:794:30)
            at ZoneDelegate.invokeTask (http://localhost/vendor/zone.js/dist/zone.js:365:38)
            at Zone.runTask (http://localhost/vendor/zone.js/dist/zone.js:265:48)
            at XMLHttpRequest.ZoneTask.invoke (http://localhost/vendor/zone.js/dist/zone.js:433:34)
        Error loading http://localhost/traceur
        Error loading http://localhost/vendor/@angular/platform-browser-dynamic/index.js as "@angular/platform-browser-dynamic" from http://localhost/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost/traceur(…) null
zone.js:486 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost/traceur(…)
system.src.js:371 Assertion failed: …

我有我的角度应用程序版本1所以我可以使用角度版本2 升级它

我们开始设计一个新项目,指定使用Angular作为我们之前的每个项目,这个项目的重要性非常高,并且它将至少存活和维持几年.

Angular 2.0已进入beta模式,看起来一切都将要改变,$ scope已经出局,指令已经完成,整个DI概念即将发生变化.

1. 是否有未来几个月需要考虑的迁移路径/策略？
2. 如果我们使用1.x构建项目,那么在开发过程中我们需要采取什么行动来确保干净的迁移？这2个版本是否可以被视为2个不同的框架？

请帮我整理一下.

更新我的项目后RC6发生以下错误:

Error: Typescript found the following errors:
  app.component.ts (12, 3): Argument of type '{ moduleId: string; selector: string; templateUrl: string; styleUrls: string[]; directives: (type...' is not assignable to parameter of type 'ComponentMetadataType'.
  Object literal may only specify known properties, and 'directives' does not exist in type 'ComponentMetadataType'.

app.component.ts

import {Component, OnInit} from '@angular/core';
import {NavbarComponent} from "./shared/navbar/navbar.component";
import {ROUTER_DIRECTIVES} from "@angular/router";
import {SidebarComponent} from "./shared/sidebar/sidebar.component";
import {FooterComponent} from "./shared/footer/footer.component";

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'], …

我们有一个角度1 + 2混合应用程序(因此使用角度1基础应用程序).

在使用适配器引导应用程序之前,我们使用升级适配器降级我们的angular2组件.这按预期工作.

但是,我们预计会有大量的angular2组件(150+),因此在引导之前加载所有组件意味着初始负载非常慢.我试图找到延迟加载angular2组件的方法,以便我们可以根据需要加载它们.有没有办法实现这一目标？

这是我的代码的一部分.

main.ts

import baseRouter from './lib/routing/baseRouter';
import router from './lib/routing/router'
import futureRoutes from './futureRoutes'

import { Adapter } from './lib/framework/upgradeAdapter';
import { Http, Headers, Response } from '@angular/http';
import { DashboardComponent } from './2x/Dashboard/dashboard.component';

var app = angular.module('myApp', [
    'ui.router',
    'ngStorage'
]);

app.config(router(app, futureRoutes))
    .config(baseRouter)
    .directive('dashboard', Adapter.downgradeNg2Component(DashboardComponent));

Adapter.bootstrap(document.body, ['myApp'], { strictDi: true });
export default app;

module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DashboardComponent } from '../../2x/Dashboard/dashboard.component'; …

我正在使用ngUpgrade在我的angular2应用程序中使用angular1指令.我按照angular2 升级指南中提到的步骤进行操作

请参阅此插件以获取代码.这让我陷入了这个错误 -

EXCEPTION: No provider for $scope! (function (scope, elementRef) { -> $scope)

有什么线索我可能会失踪？

我最近从RC4升级到RC5,并没有更改任何代码,但应用程序已损坏.这是错误消息:

加载index.html文件时似乎出现错误消息:

<html>
<head>
    <script>
        var pjson = require('./package.json');
        document.title = pjson.name;
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/global.css">

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app/main/bootstrap.js').catch(function(err){ console.error(err); });
    </script>
    <script>
        var electron = require('electron');
    </script>
</head>

<body>
<app-cmp>Loading...</app-cmp>
</body>
</html>

Update:现在使用Angular-CLI,不再有问题了.

我使用以下升级/降级桥https://angular.io/docs/ts/latest/guide/upgrade.html在一个应用程序中并排使用Angular1和Angular2.

我的问题是,是否有可能从Angular2服务访问Angular1 .需要明确的是,我不是问什么是等价的Angular2.$rootScope$rootScope