我找到了描述如何将Angular（2）组件集成到AngularJS中的资源，但所有这些都涉及像Angular项目一样设置AngularJS项目，需要来自TypeScript的转换器，需要ES6，需要import语句。我想在我的AngularJS应用程序中简单地使用Angular组件，而不会破坏我现有的工作流程。这是可能的，如果是这样，我该如何实现它？我认为这是升级模块的目的，但我看到的所有教程都需要AngularJS应用程序中的import语句，这需要一个转换器。如果Angular应用程序需要提前编译，那没关系，但AngularJS应用程序无法转换，因为它在django服务器上运行，而且我不想运行带有转换器的另一台服务器。
要清楚，我目前的AngularJS应用程序由django提供服务。我想要包含一些Angular组件。这些在开发过程中不会被触及，因此可以提前编译它们而不影响工作流程。有没有办法将这些组件添加到AngularJS应用程序而不向AngularJS应用程序添加转换器？
答案 0 :(得分：15)
成功升级的关键之一是通过在同一个应用程序中并排运行两个框架来逐步进行，并逐个将AngularJS组件移植到Angular。这样就可以在不中断其他业务的情况下升级大型复杂应用程序，因为这项工作可以协同完成并在一段时间内完成。 Angular中的upgrade模块旨在实现无缝增量升级。
有关详细信息，请参阅Angular 2 Guide - Upgrading from AngularJS to Angular
另见，
我不想使用转换器运行另一台服务器。
转换器可以在客户端运行。这是有可能的，但不推荐。
<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
// Copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs@5.0.1',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts',
meta: {
'./*.ts': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
有关详细信息，请参阅Angular 2 TypeScript QuickStart
你可以在 TypeScript 中使用Angular做任何事情，你也可以用JavaScript做。从一种语言转换到另一种语言主要是改变组织代码和访问Angular API的方式。
有关详细信息，请参阅Angular 2 Developer Cookbook - TypeScript to JavaScript