Подтвердить что ты не робот

Проблемы с импортирующими классами из Angular 2 модулей с Typescript 1.7

У меня возникли проблемы с пониманием того, как импортировать классы из модулей в TypeScript, особенно для Angular 2 в Visual Studio 2015 (обновление 1) с помощью TypeScript 1.7.

Всюду в документации Angular 2 я вижу операции импорта, такие как: import {Component} from 'angular2/core';. Эти файлы находятся в node_modules/angular2/*. Что делает только angular2/* работать?

Я могу только избавиться от ошибок в Visual Studio, когда у меня есть относительный путь из каталога приложения, например: ./../node_modules/angular2/platform/browser';. Это исправляет ошибки сборки Visual Studio, но когда я пытаюсь запустить приложение с помощью System.import('app/boot'), я получаю кучу таких ошибок:

system.src.js: 1049 GET http://localhost:8080/node_modules/angular2/platform/browser 404 (не найдено)

Другая проблема заключается в том, что в Visual Studio можно использовать такие выражения, как: import {SearchComponent} from './Components/Search/search.component';, но затем, когда я запускаю ее, существует много ошибок GET в system.src.js:2476.

Я думал, что установка defaultExtension: 'js' для System.config должна была позаботиться об этой проблеме.

UPDATE Вот все файлы, которые я считаю релевантными:

вид/дома/index.html

<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<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>
System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
System.import('app/app')
    .then(null, console.error.bind(console));

test.csproj

<TypeScriptToolsVersion>1.7</TypeScriptToolsVersion>
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptModuleResolution>Node</TypeScriptModuleResolution>
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>None</TypeScriptJSXEmit>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
<TypeScriptRemoveComments>False</TypeScriptRemoveComments>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptSourceMap>True</TypeScriptSourceMap>
<TypeScriptMapRoot />
<TypeScriptSourceRoot />

типизации /tsd.d.ts

export * from './../node_modules/angular2/core';
export * from './../node_modules/angular2/common';
export * from './../node_modules/angular2/http';
export * from './../node_modules/angular2/router';
export * from './../node_modules/angular2/platform/browser';

Структура файла:

app/
    app.ts
    components/
    models/
    services/
node_modules/ (npm install using Angular 2 quickstart package.json)
    angular2/ (not all the files listed)
        bundles/ (not all the files listed)
            angular2.dev.js
        platform/
        src/
        ts/
        typings/
        common.d.ts
        core.d.ts
        http.d.ts
        router.d.ts
    es6-module-loader/
    es6-promise/
    es6-shim/
    rxjs/
    systemjs/
    zone.js/
    typescript/ (not sure if this needs to be here)

Я не знаком с TypeScript, может быть ошибка, вызванная различными модульными системами TypeScript? Angular 2 рекомендуется установить System.config с помощью format: 'register', но https://www.npmjs.com/package/angular2 говорит, что файлы могут быть использованы с использованием CommonJs.

С этими файлами я получаю эти две ошибки консоли:

app.ts:1 Uncaught ReferenceError: require is not defined(anonymous function) @ app.ts:1
angular2-polyfills.js:143 Uncaught TypeError: Cannot read property 'split' of undefined
4b9b3361

ОТВЕТЫ

Ответ 1

Мне пришлось внести пару изменений в 5-минутный быстрый запуск, чтобы заставить его работать с MAMP.

Вы должны сказать SystemJS, где найти свои настраиваемые модули, но вы не можете установить baseURL для этого. Настройка baseURL, похоже, испортила разрешение модуля для модулей node (например, angular). Добавьте это в конфигурацию systemjs:

map: {
    app: 'path/to/app/folder'
},

Но не изменяйте операторы импорта angular. Это не дорожки, они являются именами модулей, и systemjs должны разрешить их просто отлично, если вы включили angular2.dev.js в тег script, как и у вас.

Вам также может потребоваться включить:

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

вверху вашего app.ts(или там, где вы вызываете бутстрап)

Ответ 2

Как ваш HTML файл загружает библиотеку Angular 2? Он должен быть таким же простым, как

<script src="path/to/my/libs/angular2.dev.js"></script>

Вы заметите, что файл содержит всю встроенную/конкатенированную библиотеку Angular 2. Вы не должны указывать свою веб-страницу в исходных исходных файлах.

SystemJS знает, что означает angular2/core, потому что встроенная библиотека определяет, что это за шаблон. Хотя это, по-видимому, некоторая структура каталогов (которая, вероятно, находится в незастроенной библиотеке), на самом деле это просто какое-то имя для модуля встроенной библиотеки. Найдите этот текст в встроенной библиотеке, и вы увидите, что он определен:

System.register("angular2/core", ...

Ответ 3

Маленькие красные линии squiggly, вероятно, из-за вашего tsconfig.json. По крайней мере, это и послужило причиной для меня проблемы. Проблема была в том, что я использовал оба файла [] и исключал []. Это не работает должным образом и не является допустимой конфигурацией.

Я решил эту проблему, но у меня все еще есть проблема "Неотдача ReferenceError: require not defined".

Ответ 4

"Я решил эту проблему, но у меня все еще есть проблема" Неотдача ReferenceError: require not defined ".

systemjs можно настроить для использования требуемого формата:

System.config({
  packages: {
    app: {   // must be replaced 
      format: 'amd'
    }
  }
});

но если в вашем собственном коде typescript вывод компилятора можно установить в tsconfig:

{
  "compilerOptions": {
    ...
    "module": "system"
    ... 
  }
}

в файле конфигурации вашей визуальной студии это может означать:

<TypeScriptModuleKind>system</TypeScriptModuleKind>

Ответ 5

Следующие работали для меня.

System.config({    
          transpiler: 'typescript', 
          typescriptOptions: { emitDecoratorMetadata: true }, 
          packages: {       
          app: {
              defaultExtension: 'ts'
          }
        }
      });

Я также включил typescript int заголовок

<script src="https://code.angularjs.org/tools/typescript.js"></script>