标签: angular-hybrid

我找到了描述如何将Angular(2)组件集成到AngularJS中的资源,但所有这些都涉及像Angular项目一样设置AngularJS项目,需要来自TypeScript的转换器,需要ES6,需要import语句.我想在我的AngularJS应用程序中简单地使用Angular组件,而不会破坏我现有的工作流程.这是可能的,如果是这样,我该如何实现它？我认为这是升级模块的目的,但我看到的所有教程都需要AngularJS应用程序中的import语句,这需要一个转换器.如果Angular应用程序需要提前编译,那没关系,但AngularJS应用程序无法转换,因为它在django服务器上运行,我不想运行带有转换器的另一台服务器.

为了清楚起见,我目前的AngularJS应用程序由django提供服务.我想要包含一些Angular组件.这些在开发过程中不会被触及,因此可以提前编译它们而不影响工作流程.有没有办法将这些组件添加到AngularJS应用程序而不向AngularJS应用程序添加转换器？

我正在研究将当前的Angular 1项目迁移到Angular 4的方法.

选项包括ng-forward,ngUpgrade或rewrite.

我正在考虑重写它,但有一点扭曲.

• 我保留当前的申请表
• 开始写新的并行
• 所有新的NG4重写,我想用......所以一点一点地换句话说.

有人试过这个或知道更好的方法吗？

我们正在迁移一个混合的Angular6和AngularJS 1.6项目.在这个过程中,我们还想引入服务器端渲染(SSR).

问题是,SSR在节点环境中运行,因此运行SSR/prerendering会收到以下错误:

npm-run ts-node ./prerender.ts

[..]/node_modules/angular/index.js:2

**module.exports = angular;**

**ReferenceError: angular is not defined**

   at Object.<anonymous> ([..]/node_modules/angular/index.js:2:18)

    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)

    at Object.angular ([..]/dist/server/webpack:/external "angular":1:1)

    at _webpack_require_ 
([..]/dist/server/webpack:/webpack/bootstrap:19:1)

Run Code Online (Sandbox Code Playgroud)

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import {renderModuleFactory} from '@angular/platform-server';
import {writeFileSync} from 'fs';

const globalAny:any = global;
const Window = require('window');
let window = new Window();
globalAny.window = window;
globalAny.document = window.document;

const {AppServerModuleNgFactory} = …

我有一个angularjs 1.6，刚刚配置为带有角度8的混合引导程序。

我在角度8中创建了2个新组件DriverDetail和DriverDetailLine：

@Component({
    selector: 'driver-detail',
    template: require('./driver-detail.component.html')
})
export class DriverDetail {
    @Input('driver') driver: Driver;

    constructor() {}
}

@Component({
    selector: 'driver-detail-line',
    template: require('./driver-detail-line.component.html')
})
export class DriverDetailLine {
    @Input('titleKey') titleKey;
    @Input('icon') icon;

    constructor() {}
}

将DriverDetail降级为可从angularjs使用，如下所示：

app.directive(
    'driverDetail',
    downgradeComponent({ component: DriverDetail, inputs: ['driver'] }) as angular.IDirectiveFactory,
);

当在DriverDetail内部使用DriverDetailLine并传递titleKey输入参数时：

<driver-detail-line [titleKey]="'IN_TRANSIT'" [icon]="'directions_car'">
</driver-detail-line>

产生此错误：

未捕获的错误：模板解析错误：由于它不是'driver-detail-line'的已知属性，因此无法绑定到'title-key'。1.如果“ driver-detail-line”是Angular组件，并且具有“ title-key”输入，则请验证它是否是此模块的一部分。2.如果“ driver-detail-line”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。3.要允许任何属性，请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。（“ test] [title-key] =”'DRIVER_DASHBOARD.IN_TRANSIT'“ [icon] =”'directions_car'“> {{'LABEL”）：ng：///DriverDetailModule/DriverDetail.html@0：51，语法错误（compiler.js：2687）位于TemplateParser.parse（compiler.js：

请注意，如果不使用驼峰案例参数，或者将其名称更改为非驼峰案例名称，则组件可以正常工作。

还尝试了其他格式，例如：

[title-key]="'IN_TRANSIT'"
[titlekey]="'IN_TRANSIT'"

但是也有类似的错误

尝试使用第三方组件时会发生相同的情况，在驼峰情况下使用参数会产生相同的错误。

非常感谢，Miguel

编辑以获取更多信息：

@NgModule({
    imports: …

如何在 Angular 5 组件中使用 AngularJS 服务？

我有 AngularJS 应用程序，我正在尝试制作混合应用程序，但无法使用 AngularJS 服务洞察 Angular 组件：出现错误

ERROR 错误：尝试在设置之前获取 AngularJS 注入器。

我的 main.ts 是

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

应用程序模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, InjectionToken } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
import { AppComponent } from './app.component';
import { SignInComponent } from "./modules/login/components/sign-in/sign-in.component";
import { authServiceProvider } from './shared/angularJS-upgraded-providers';



@NgModule({
    declarations: …

当AngularJS文件是JS和TS时,我正在尝试构建混合应用程序.我似乎无法添加到JS控制器的路由.

我依赖以下示例并执行以下操作:

const statesConfigBlock = ['$stateProvider', $stateProvider => {
  $stateProvider.state('main', {
    url: '/main',
    templateUrl: 'app/components/layout/mainView.html',
    controller: 'mainController as main'
  })
}];
appModuleAngularJS.config(statesConfigBlock);

虽然我有一个mainCtrl.js定义为的文件:

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

(function(app) {
  'use strict';

  app.controller('mainController', [
      function () {
        console.log("blah");

      }]);
})(app);

当我运行应用程序时,我得到:

名称为"mainController"的控制器未注册

但是当我在控制台中运行时,我确实看到了它:

angular.module('myApp')._invokeQueue.filter(function(el){
  return el[0] === "$controllerProvider";
}).map(function(el){
  return el[2]["0"];
});

我使用Webpack 4从Angular.Js 1.6.6到Angular 6进行了Angular升级:

    import 'core-js/es7/reflect';
    import 'zone.js';
    import 'reflect-metadata';
    import 'rxjs';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { Routes, RouterModule } from '@angular/router';
    import { BrowserModule } from '@angular/platform-browser';
    import { UpgradeModule, downgradeComponent, downgradeInjectable, setAngularJSGlobal } from '@angular/upgrade/static';
    import { module } from './app.module.ajs';
    import './config/routes';
    import AppComponent from './components/app/app';
    import Application from './directives/application/application';
    import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
    console.log('NgModule');
    const appRoutes: Routes = [
    ];
    @NgModule({
      declarations: [AppComponent, Application],
      entryComponents: …

我正在使用downgradeModule将AngularJS应用程序迁移到Angular 7（在此进行介绍：性能升级）。该文档的最后一部分指出，当我想使用AOT时，需要导入AppModule的NgModuleFactory。我正在使用angular-cli构建应用程序。是否可以引用在angular-cli构建中创建的ModuleFactory，从而为我的混合应用程序打开AOT？

我有一个Angular 1和Angular 2混合应用程序,它使用以下指南设置,从AngularJS升级和将Angular 1应用程序迁移到Angular 2.我的根组件看起来像这样:

import { NgModule, Component } from '@angular/core';
import { RouterModule, UrlHandlingStrategy } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { RouterUpgradeInitializer } from '@angular/router/upgrade';
import { MyModule } from './Mymodule/my-module';

export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
    shouldProcessUrl(url: any) {
        return url.toString().startsWith("/Mymodule");
    }

    extract(url: any) {
        return url;
    }

    merge(url: any, whole: any) {
        return url;
    }
}

@Component({
    selector: 'root-component',
    template: `
    <router-outlet></router-outlet> …

我在HTML5模式下有一个带有多个入口点的，带有UI-router的大型angularjs 1.7.4应用程序。

（该项目使用babel 7.6来编译typescript和corejs3 polyfills，所以我没有使用angular-cli）。

我正在尝试将入口点之一迁移到混合应用程序（Angular 8.2.13，@ uirouter / angular-hybrid 9.0.0）。

我也跟着迁移指南@ https://angular.io和引导在https://github.com/ui-router/angular-hybrid和一切似乎除了在角状态定义是工作。它们仅在触发带有Angular组件的angularjs状态后才能工作。

在此之前，尝试使用NG2状态时，控制台中没有任何内容（已为ui-router启用了跟踪）。

我已经被这个问题困扰了好几天了，我没有主意...

ng1hello-带有角分量的ng1状态ng2hello-带有角分量的角状态ng1hi-ng1带有角分量的状态ng2hi-ng2带有角分量的状态

情况1：

1. 重新加载“ /”：确定。
2. 单击ui-sref以获取“ ng1hello”。好
3. 单击ui-sref以获取“ ng2hello”。好
4. 单击ui-sref以获取“ ng2hi”。好

情况2：

1. 重新加载“ /”：确定。
2. 单击ui-sref以获取“ ng2hello”。不好
3. 单击ui-sref以获取“ ng2hi”。不好
4. 单击ui-sref以获取“ ng1hello”。好
5. 单击ui-sref以获取“ ng2hello”。好
6. 单击ui-sref以获取“ ng2hi”。好

情况3：

1. 重新加载“ / ng1hello”，确定。

情况4：

1. 在“ / ng2hello”上重新加载不是很好。

编辑：我在这里在Stackblitz中复制了问题：https : //angular-hybrid-issue.stackblitz.io/ https://stackblitz.com/edit/angular-hybrid-issue