Понизьте версию компонента angular2, написанного с помощью Typescript. Как импортировать его в проект angular 1, написанный с помощью es5?

Я понизил версию компонента, написанного на Angular2 + Typescript. Теперь я хочу использовать его в простом приложении angular 1, но файл js, скомпилированный из Typescript, использует «импорт», и я получаю из браузера, что он не поддерживается. Что я пропустил?

Это простой компонент 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
  );

Это простое приложение angular1, использующее этот компонент angular 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>

Ошибка браузера: Uncaught SyntaxError: Неожиданный импорт токена в строке:

import { Component } from '@angular/core';

typescript angular components angularjs downgrade
person AngularOne    schedule 26.01.2017    source источник
comment
после добавления require.js в html теперь я получаю еще одну ошибку: имя модуля @angular/core еще не загружено для контекста: _. Используйте требование ([])   -  person AngularOne    schedule 27.01.2017
comment
Не уверен, что еще мне нужно добавить в мое приложение angular 1. файлу компонента angualr2 нужно больше? кто-нибудь делал это, и это сработало для него?   -  person AngularOne    schedule 27.01.2017

Ответы (1)


arrow_upward
1
arrow_downward

Убедитесь, что вы скомпилировали свой компонент Typescript в ES5. Ваш код выглядит как ES6/Typescript.

Проверьте свой tsconfig.json и убедитесь, что цель: «es5».

person vincic    schedule 26.01.2017
comment
нашел файл в es5. но теперь есть ошибка о том, что «требовать» не определено - person AngularOne; 27.01.2017
comment
добавил «require.js», и это помогло. но что это значит сейчас: имя модуля @angular/core еще не загружено для контекста: _. Используйте require([]) Откуда он это взял? - person AngularOne; 27.01.2017