1
我正在從angular 1移植到angular 2。我想從angular 2運行angular 1。我試圖應用調試器ngDoBootstrap()。但它從來沒有過。這意味着angular 1代碼沒有執行。我想我錯過了一些東西。我是否需要手動撥打ngDoBootstrap()方法？角度混合應用程序不起作用
我沒有收到任何控制檯錯誤。我是否需要創建angular 2 component以運行混合應用程序。
的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/[email protected]'+angularVersion,
'@angular/compiler': 'unpkg:@angular/[email protected]'+angularVersion,
'@angular/common': 'unpkg:@angular/[email protected]'+angularVersion,
'@angular/platform-browser': 'unpkg:@angular/[email protected]'+angularVersion,
'@angular/platform-browser-dynamic': 'unpkg:@angular/[email protected]'+angularVersion,
'@angular/upgrade/static': 'unpkg:@angular/upgrade/bundles/upgrade-static.umd.js',
'rxjs': 'unpkg:[email protected]',
'zone.js': 'unpkg:[email protected]',
'reflect-metadata': 'unpkg:[email protected]'
}
});
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']);
}
}