2015-12-23 1 views
0

В настоящее время я просматриваю Angular2, исходя из фона AngularJS. В этом отношении я также изучаю SystemJS и TypScript.
 
Однако у меня возникла проблема с запуском Angular2 с использованием машинописных меток и SystemJS. Использование машинописного текста без каких-либо типировок работает так, как ожидалось, но как только я попытаюсь загрузить любые модули из набора Angular2, SystemJS, похоже, не может его решить.
Из того, что я читал, типовые данные отправляются с angular2.dev.js, так что, пока я импортирую это, я должен быть в порядке?
 
Ошибка имеет некоторое сходство с https://github.com/systemjs/systemjs/issues/610, но, к сожалению, его решения не сработали для меня.SystemJS Typcript, набирающий конфликт

К сожалению, мой опыт работы с SystemJS и машинописным текстом является нулевым, и я просто пытаюсь создать систему для обучения. Все библиотеки обновлены и только что были установлены с номером npm. Результирующая сборка размещается с помощью экспресс-сервера NodeJS, в то время как файлы машинописного текста, а также их типизация - нет.

Ошибка я получаю:

GET http://localhost:8000/angular2/angular2 404 (Not Found) 

Вот голова экстракт мой 'index.html':

<head> 
    <script src="assets/js/lib/traceur.js"></script> 
    <script src="assets/js/lib/system.src.js"></script> 
    <script src="assets/js/lib/Rx.js"></script> 
    <script src="assets/js/lib/angular2.dev.js"></script> 

    <script> 
     System.config({ 
      packages: { 
       assets: { 
        format: 'register', 
        defaultExtension: 'js' 
       }, 
      } 
     }); 
     System.import('assets/js/boot') 
      .then(null, console.error.bind(console)); 
    </script> 
</head> 

 

В boot.ts Typescript- файл (я только добавил bootstrap(), так что angular2 фактически включается в компиляцию):

import { bootstrap } from 'angular2/angular2'; 
bootstrap(); 
console.log('test'); 

и результирующий boot.js после TSC компиляции:

System.register(['angular2/angular2'], function(exports_1) { 
    var angular2_1; 
    return { 
     setters:[ 
      function (angular2_1_1) { 
       angular2_1 = angular2_1_1; 
      }], 
     execute: function() { 
      angular2_1.bootstrap(); 
      console.log('test'); 
     } 
    } 
}); 

//# sourceMappingURL=boot.js.map 

tsdconfig.json:

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": true, 
    "noImplicitAny": false 
    }, 
    "exclude": [ 
    "node_modules" 
    ] 
} 

Любой помощи оценила много, у себя несколько хороших праздников! :)

+1

использовать 'import {bootstrap} из 'angular2/platform/browser';' –

ответ

4

Согласно мне, вы должны настроить свой index.html в определенном порядке, я нашел, что наилучшая настройка для запуска - https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html.

вы можете обратиться к моему репо тоже для проекта установки/структуры здесь

https://github.com/MrPardeep/Angular2-DatePicker

моего index.html является

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <script> 
     System.config({ 
        defaultJSExtensions: true, 
        map: { 
         rxjs: 'node_modules/rxjs' 
        }, 
        packages: { 
         rxjs: { 
         defaultExtension: 'js' 
         } 
        } 
       }); 
    </script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/router.dev.js"></script> 
    <script src="node_modules/angular2/bundles/http.dev.js"></script> 

<script> 
    System.import('dist/bootstrap'); 
</script> 

далее для получения дополнительной информации я просто записываю этот список для кого-то еще, это может кому-то помочь

import {Component, View, Directive, Input, Output, Inject, Injectable, provide} from 'angular2/core'; 

import {bootstrap} from 'angular2/platform/browser'; 

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf NgForm, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common'; 

import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router, LocationStrategy, HashLocationStrategy} from 'angular2/router'; 

import {Http, HTTP_PROVIDERS, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http' 
+0

Большое спасибо. Хотя я не смог решить проблему с моей проблемой, я просто использую этот шаблон для учебных целей сейчас и вернусь к созданию своего собственного шаблона, когда у меня будет более глубокое понимание общих рабочих процессов SystemJS и Typcript –

+0

Спасибо за список импорта.Я считаю, что директивы, перечисленные в [CORE_DIRECTIVES] (https://github.com/angular/angular/blob/2.0.0-beta.0/modules/angular2/src/common/directives/core_directives.ts), не необходимо импортировать (они импортируются автоматически). Интересно, являются ли они единственными, которые автоматически импортируются. –