Question

我正在从angular 1迁移到angular 2。我想从angular 1运行angular 2。我尝试应用调试器ngDoBootstrap()。但它永远不会到来。这意味着angular 1代码没有得到执行。我想我错过了一些东西。我需要手动调用ngDoBootstrap()方法吗？

我没有收到任何控制台错误。我是否需要创建angular 2 component来运行混合应用程序。

我指的是Upgrading from AngularJS

的index.html

<!DOCTYPE html>
<HTML>
    <head>
        <title>Activate My Account</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimal-ui">

        <link rel="shorcut icon" href="/thinkshop/icons/thinkshopfavicon.png" />

        <link media=all rel="stylesheet" type="text/css" href="/thinkshop/fonts/font.css" >
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.5/angular-material.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.3.0/css/ngDialog.min.css"/>

        <!-- @StartCSS:IdeolveSignupcss-->
        <link rel="stylesheet" type="text/css" href="/thinkshop/css/material_icons.css"/>
        <link rel="stylesheet" type="text/css" href="/thinkshop/widgets2/thinkshopapplication/css/thinkshop.css"/>
        <link rel="stylesheet" type="text/css" href="/thinkshop/css/commoncss.css"/>
        <link rel="stylesheet" type="text/css" href="/thinkshop/widgets2/thinkshopapplication/signup/css/ideolvesignup.css"/>
        <link rel="stylesheet" type="text/css" href="/thinkshop/angularplugins/ngDialog/css/ngDialog-theme-custom.css"/>
        <!-- @EndCSS:IdeolveSignupcss-->


        <SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></SCRIPT>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>

    <!-- Agular 2 -->
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.min.js"></script>    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.5/angular-material.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
    </head>
    <body resize layout="column" class="IdeolveSignupBody" id="IdeolveSignupBody">
        <ideolveformcomponent showideolvelink="true" layout="column" flex></ideolveformcomponent>
    <script>                
    var angularVersion = '2.4.4';

            System.config({
                paths: {
                    'unpkg:*': 'https://unpkg.com/*'
                },
                transpiler: 'typescript',
                typescriptOptions: { emitDecoratorMetadata: true },

                /* meta: {
                    '*': {
                        deps: [ 'zone.js', 'reflect-metadata' ]
                    }
                }, */
                packageConfigPaths: [
                    "unpkg:@*/*/package.json"
                ],

                'app': '/thinkshop/widgets2/thinkshopapplication/activateaccount/',

                map: {
                    '@angular/core': 'unpkg:@angular/core@'+angularVersion,
                    '@angular/compiler': 'unpkg:@angular/compiler@'+angularVersion,
                    '@angular/common': 'unpkg:@angular/common@'+angularVersion,
                    '@angular/platform-browser': 'unpkg:@angular/platform-browser@'+angularVersion,
                    '@angular/platform-browser-dynamic': 'unpkg:@angular/platform-browser-dynamic@'+angularVersion,                     
                    '@angular/upgrade/static': 'unpkg:@angular/upgrade/bundles/upgrade-static.umd.js',
                    'rxjs': 'unpkg:rxjs@5.0.0-beta.6',
                    'zone.js': 'unpkg:zone.js@0.6.23',
                    'reflect-metadata': 'unpkg:reflect-metadata@0.1.3'
                }                   
            });

            System.import('/thinkshop/widgets2/thinkshopapplication/activateaccount/main.js').catch(function(err){ console.error(err); });
        }
    </script>           
    </body>
</html>

main.js

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from '/thinkshop/widgets2/thinkshopapplication/activateaccount/activateaccount.module.js';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.js

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() {

            var app= angular.module('IdeolveActivateAccount', ['ngMaterial', 'jlareau.bowser', 'validation.match', 'ngDialog', 'ngMessages']);

            app.config(['$httpProvider', function ($httpProvider) {
                   $httpProvider.interceptors.push('httpRequestInterceptor');
            }]);

            app.config(['$locationProvider', function($locationProvider) {
                 // remove ! hash prefix
                 $locationProvider.hashPrefix('');
            }]);

            app.value("CLIENT_ID", {clientId : ""});
            app.constant("APP_NAME", 'web-ideolve');
            app.constant("AUTH_TOKEN", "");
            app.constant("CAN_EDIT",false);

            app.directive('resize', loadResize);
            app.service("SupportedDeviceService", loadSupportedDeviceService);
            app.service("ActivateAccountService", loadActivateAccountService);

            app.factory('httpRequestInterceptor', loadPlainHttpRequestInterceptorfactory);

            app.controller("ActivateAccountApp", loadActivateAccountApp)
            app.controller('ActivateAccountController', loadActivateAccountController);

            app.component("ideolveformcomponent",{
                bindings:{
                    showideolvelink: '<'
                },
                controller: 'ActivateAccountApp',
                templateUrl: '/thinkshop/widgets2/thinkshopapplication/login/template/landingdisplay.html'
            });

            this.upgrade.bootstrap(document.body, ['IdeolveActivateAccount']);
    }
}

Answer 1

我在代码中进行了一些清理，我的代码开始工作。

这是一个解决方案，

这些文件是从 index.html 重新发送的。

<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js">
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js">

未评论来自 System.config

的一些配置

meta: {
      '*': {
                deps: [ 'zone.js', 'reflect-metadata' ]
            }
       }

reflect-metadata需要加密 lib。在 System.config

中添加了加密

map: {
        '@angular/core': 'unpkg:@angular/core@'+angularVersion,
        '@angular/compiler': 'unpkg:@angular/compiler@'+angularVersion,
        '@angular/common': 'unpkg:@angular/common@'+angularVersion,
        '@angular/platform-browser': 'unpkg:@angular/platform-browser@'+angularVersion,
        '@angular/platform-browser-dynamic': 'unpkg:@angular/platform-browser-dynamic@'+angularVersion,                     
         '@angular/upgrade/static': 'unpkg:@angular/upgrade/bundles/upgrade-static.umd.js',
         'rxjs': 'unpkg:rxjs@5.0.0-beta.6',
         'zone.js': 'unpkg:zone.js@0.6.23',
         'reflect-metadata': 'unpkg:reflect-metadata@0.1.3',
         'crypto' : '@empty'
  }

角混合应用程序无法正常工作

1 个答案: