1
Angular2 + Typescript로 작성된 구성 요소를 다운 그레이드했습니다. 이제 간단한 앵글 1 응용 프로그램에서 사용하고 싶습니다. 그러나 Typescript에서 컴파일 된 js 파일은 '가져 오기'를 사용하고 있으며 브라우저에서는 지원되지 않습니다. 나는 무엇을 놓쳤는가?Typescript로 작성된 다운 그레이드 angular2 구성 요소. es5로 작성된 각도 1 프로젝트로 가져 오는 방법은 무엇입니까?
이 간단한 각 2 componenet입니다 : 이것은 간단한 angular1의 응용 프로그램은 위의이 각 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
);
:
<!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>
브라우저 오류 : catch되지 않은 구문 에러 : 예기치 않은 토큰 가져 오기 줄에 :
import { Component } from '@angular/core';
html에 require.js를 추가 한 후 이제 다른 오류가 발생합니다. 모듈 이름 "@ angular/core"이 (가) 컨텍스트에 대해 아직로드되지 않았습니다. require ([])를 사용하십시오. – AngularOne
각도 1 앱에 추가해야 할 항목이 있는지 잘 모릅니다. angualr2 구성 요소의 파일에 그 이상이 필요합니까? 어느 누구도이 일을했고 그 일은 그를 위해 일했던가? – AngularOne