使用Typescript编写降级angular2组件。如何将它导入到用es5编写的angular 1项目中？

问题描述：

我已经降级了用Angular2 + Typescript编写的组件。现在我想在简单的角度1应用程序中使用它，但从Typescript编译的js文件使用的是'导入'，我从浏览器中获得它不受支持。我错过了什么？使用Typescript编写降级angular2组件。如何将它导入到用es5编写的angular 1项目中？

这是一个简单的角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 
);

这在简单angular1应用特林使用此角度2成分以上：

<!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';

在向html添加require.js之后，现在我得到另一个错误：模块名称“@ angular/core”尚未加载上下文：_。使用require（[]） – AngularOne

不知道还有什么我需要添加到我的角1应用程序。 angualr2组件的文件需要更多的？任何人做到了这一点，并为他工作？ – AngularOne

答

确保您已将您的Typescript组件编译为ES5。你的代码看起来像ES6/Typescript。

检查您的tsconfig.json并确保目标：“es5”。

在es5中找到该文件。但现在有关于的错误'require'未定义 – AngularOne

添加'require.js'并且它有帮助。但现在意味着什么：模块名称“@ angular/core”尚未加载上下文：_。使用require（[]）从哪里得到？ – AngularOne

使用Typescript编写降级angular2组件。如何将它导入到用es5编写的angular 1项目中？

相关推荐