Я обновляюсь с ng1 до ng2. Я добавил Angular 2 и успешно импортировал его модули:
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/node_modules/angular2/bundles/router.dev.js"></script>
Я добавил следующий конфиг:
<script>
System.config({
packages: {
app: {
format: 'cjs',
defaultExtension: 'js'
}
}
});
System.import('scripts/bootstrap.js').then(null, console.error.bind(console));
</script>
Теперь я пытаюсь добавить свой первый компонент/модуль ng2 и импортировать его:
Компонент, написанный с использованием TypeScript:
import {Component} from 'angular2/core';
@Component({
selector: 'my-component',
templateUrl: 'app/components/my-component/my-component.html',
styleUrls: ['app/components/my-component/my-component.css'],
providers: [],
directives: [],
pipes: []
})
export default class MyComponent {
constructor() {}
}
импорт моего компонента:
import MyComponent from './components/my-component/my-component';
И скомпилированный код компонента ES5:
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
switch (arguments.length) {
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
}
};
var core_1 = require('angular2/core');
var MyComponent = (function () {
function MyComponent() {
}
MyComponent = __decorate([
core_1.Component({
selector: 'my-component',
templateUrl: 'app/components/my-component/my-component.html',
styleUrls: ['app/components/my-component/my-component.css'],
providers: [],
directives: [],
pipes: []
})
], MyComponent);
return MyComponent;
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = MyComponent;
Результат - ошибка 404 при поиске
http://localhost:9000/scripts/components/my-component/my-component
Теперь я понимаю, что я должен либо:
- Загрузите файл моего компонента, используя тег
script
, аналогично тому, что я делал с пакетами Angular2. Это заканчивается ошибкой JS:required
не определено. Это потому, что мой файлbundled
неправильный. - Настройте SystemJS/Typescript, чтобы он знал, что нужно загружать мой модуль, не добавляя тег скрипта в мой html.
Что мне здесь не хватает?
module
(похоже, он производит вывод nodeJS). См. github. .com/Microsoft/TypeScript/wiki/. Вы должны указать эту опцию вtsconfig.json
или в инструменте сборки. - person billc.cn   schedule 23.12.2015commonjs
, так что это не проблема... - person Yaniv Efraim   schedule 23.12.2015