降级使用 Typescript 编写的 angular2 组件。如何将其导入用 es5 编写的 angular 1 项目？
Posted
技术标签:
【中文标题】降级使用 Typescript 编写的 angular2 组件。如何将其导入用 es5 编写的 angular 1 项目？【英文标题】：Downgrade angular2 component written with Typescript. How to import it into angular 1 project written with es5? 【发布时间】：2017-06-12 10:13:54 【问题描述】：我已经降级了一个用 Angular2 + Typescript 编写的组件。现在我想在简单的 angular 1 应用程序中使用它，但是从 Typescript 编译的 js 文件正在使用“导入”，我从浏览器中得到它不受支持。我错过了什么？
这是一个简单的 angular 2 组件：
import Component, OnInit from '@angular/core';
@Component(
selector: 'hello-world',
template: `
<p>
hello from angular 2!
</p>
`,
styles: []
)
export class HelloWorldComponent implements OnInit
constructor()
ngOnInit()
import * as angular from 'angular';
import downgradeComponent from '@angular/upgrade/static';
angular.module('dannyApp', [])
.directive(
'helloWorld',
downgradeComponent(component: HelloWorldComponent) as angular.IDirectiveFactory
);
这是使用上述 angular 2 组件的简单 angular1 应用程序字符串：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="dist\out-tsc\app\hello-world\hello-world.component.js"></script>
<script>
angular.module('app', [])
.controller('FrameController', ['$injector', function($injector)
var vm = this;
vm.message = 'Hello from angular 1';
]);
</script>
<title>Title</title>
</head>
<body ng-app="app">
<div id="body">
<div ng-controller="FrameController as vm">
vm.message
</div>
<!-- the angular 2 componenet -->
<hello-world></hello-world>
</div>
</body>
</html>
浏览器错误： 未捕获的 SyntaxError：意外的令牌导入 上线：
import Component from '@angular/core';
【问题讨论】：
在将 require.js 添加到 html 后，现在我收到另一个错误：尚未为上下文加载模块名称“@angular/core”：_。使用 require([]) 不确定我还需要向我的 Angular 1 应用程序添加什么。 angualr2 组件的文件还需要更多吗？有人这样做并且对他有用吗？ 【参考方案1】：确保您已将 Typescript 组件编译为 ES5。 你的代码看起来像 ES6/Typescript。
检查您的 tsconfig.json 并确保目标：“es5”。
【讨论】：
在 es5 中找到该文件。但现在有关于“require”未定义的错误 添加了 'require.js' 并有所帮助。但它现在意味着什么：尚未为上下文加载模块名称“@angular/core”：_。使用 require([]) 他从哪里得到的？以上是关于降级使用 Typescript 编写的 angular2 组件。如何将其导入用 es5 编写的 angular 1 项目？的主要内容，如果未能解决你的问题，请参考以下文章
TypeScript - 茉莉花 - Chutzpah - AngularJS
使用Angular与TypeScript构建Electron应用
将 Typescript 2.3 模块发布到 NPM 以供 Angular 4 使用
当我使用 webpack 和 ts-loader 构建项目时，Typescript 环境模块未解析