TS2307: не удается найти модуль 'angular2/core' при импорте Angular2 на TypeScript

Привет, у меня есть lil бит фона Angular 1, я изучаю Angular 2.

для запуска с Angular 1, только зависимость заключается в том, чтобы добавить источники Angular либо angular.js, либо angular.min.js,

при попытке использовать тег Angular 2 через script,

<script src="angular2.js"></script>

Я получаю ошибки, например,

  • Uncaught ReferenceError: System is not defined
  • Uncaught ReferenceError: define is not defined

поэтому я искал SE и нашел, что system.js и require.js должны быть добавлены перед загрузкой angular2.

любым способом мне удалось загрузить обе библиотеки,

Мне нравится компилировать TypeScript и обслуживать файл js, чем отправлять все script клиенту и компилировать/транслировать всю клиентскую сторону.

Моя IDE - это WebStorm, и когда я пытаюсь написать простой компонент,

import {Component} from 'angular2/core';

@Component
class Hello{
    name:string;

    constructor() {
        this.name = "HelloWorld";
    }
}

Я получаю эту ошибку в компиляторе TypeScript на main.ts, который компилируется в main.js,

Error:(1, 25) TS2307: Cannot find module 'angular2/core'.

TypeScript компилирует все, но не импортирует из angular.

мой простой index.html показан ниже,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>

</head>
<body>

    <script src="system.js"></script>
    <script src="require.js"></script>
    <script src="angular2.js"></script>
    <script src="main.js"></script>
</body>
</html>

Что вызывает TypeScript не импортировать модули из angualr2?, следует ли мне настроить TypeScript на Angular2?

Я совершенно не знаком с TypeScript,

Большое вам спасибо за любую помощь

Обновление

вывод tsc main.ts --watch:

main.ts(1,25): error TS2307: Cannot find module 'angular2/core'.
main.ts(4,7): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
11:43:39 PM - Compilation complete. Watching for file changes.

Ответы

Ответ 1

Как вы новичок в TypeScript. Я все еще предлагаю вам следовать документации angular.io в течение 5 минут при запуске. Это имеет конкретные инструкции и довольно хорошо объяснил, чтобы начать с ним.

Angular2 5-минутная страница быстрого запуска @angular.io.

Что для начала нужно иметь:

  1. Node.js с менеджером пакетов npm.
  2. Машинопись с компилятором.
  3. Текстовый редактор или любая IDE, VS Code.
  4. Любой браузер, как Chrome.

Установите узел js и он также установит npm (менеджер пакетов узла). Теперь отсюда вам нужно выполнить следующие шаги, чтобы начать:

  1. Создайте имя корневой папки по вашему выбору, например, ng2Playground.
  2. Теперь вам нужно создать еще одну папку внутри нее, которая на самом деле содержит все файлы .ts/Component. Вы можете назвать это имя app же, как в документации.
  3. Теперь на корневом уровне вы должны поместить 4 файла.
    3.1. tsconfig.json
    3.2 typings.json
    3.3 package.json
    3.4 index.html
  4. Когда вы его настроите, поскольку мы еще не закончили, но вы можете npm start когда мы закончили загружать все зависимости, запустите эту команду, чтобы запустить компиляцию и наблюдать за приложением, пока вы разрабатываете другие компоненты.

Теперь, что должно быть в этих файлах согласно пункту 3.

3.1: tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

3.2: typings.json

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
  }
}

3.3: package.json

{
  "name": "ng2-test",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",    
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install" 
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

Едем очень хорошо, поздравляю! Еще нам нужен самый важный файл index.html.

3.4: index.html

<!doctype html>
<html>
<head>
  <title>Angular 2 QuickStart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.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>

  <!-- 2. Configure SystemJS -->
  <script>
    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });
    System.import('app/main')
      .then(null, console.error.bind(console));
  </script>

</head>

<!-- 3. Display the application -->

<body>
  <my-app>Loading...</my-app>
</body>

</html>

Хорошо!

У нас есть базовая настройка, но нам нужно установить все зависимости и зависимости, что абсолютно необходимо. Вам нужно запустить npm install. Это установит все зависимости, которые у нас есть в package.json.

Когда установка пакета node_modules вы можете найти одну папку с именем node_modules которой есть все файлы в соответствии с зависимостями в package.json.

Если во время npm install возникает какая-либо ошибка, вам просто нужно обновить dev/dependencies.

Итак, я предполагаю, что у вас установлены все зависимости и просто начните:

Теперь, согласно пункту 2, у нас есть папка с именем app теперь мы будем помещать в нее наши файлы .ts.

Создайте файл с именем app.component.ts, см. Соглашение об именах .component.ts которое обозначает, что это файл компонента. Вставьте в него этот код:

import {Component} from 'angular2/core'; // <-- importing Component from core

@Component({
    selector: 'my-app', //<----the element defined in the index.html
    template: '<h1>My First Angular 2 App</h1>' // <---this is the template to put in the component.
})
export class AppComponent { } // <--- we need to export the class AppComponent.

Теперь создайте другой файл с именем main.ts Почему main.ts? Это из-за index.html, мы определили наш Systemjs модуля Systemjs, смотрите это в index.html

System.import( 'приложение/главный')

Это содержание main.ts:

import {bootstrap}    from 'angular2/platform/browser' // import bootstrap
import {AppComponent} from './app.component' // import the component we just created

bootstrap(AppComponent); // finally bootstrap it.

Теперь мы сделали.

Ура!!!

Тем не менее, нам нужно запустить его, для этого мы должны cd ng2Playgroud в него. нам нужно запустить эту команду из командной строки или, если у вас установлен git bash, запустите:

npm start

и нажмите ввод. Теперь он скомпилирует и запустит lite-server установленный как зависимость. Если все пойдет хорошо, вы увидите шаблон My First Angular 2 App созданный в браузере.

Ответ 2

Мне удалось решить эту проблему, добавив "moduleResolution": "node" в файл tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main.d.ts",
    "typings/main"
  ]
}

Ответ 3

прежде всего, отвечая на вопрос, Что вызывает TypeScript не импортировать модули из angualr2? следует ли настроить TypeScript с помощью Angular2?. Вы импортировали загрузчик модулей, но не настроили его. Вам не нужно настраивать TypeScript с помощью Angular2, но загрузчик модуля.

Поскольку принятый ответ устарел (нацелен на бета-версию Angular2),

Изменилось много вещей, включая загрузчик модулей в текущем Release Candidate Angular 2 (RC2). Это то, что работает для меня,

Структура каталогов.

.                             # project directory
├── app                       # main app directory
│   ├── app.component.ts
│   └── main.ts
├── bs-config.js             
├── index.html
├── node_modules              # npm package directory
├── package.json
├── styles.css
├── systemjs.config.js
├── tsconfig.json
└── typings.json

Файлы находятся.

приложение: каталог приложений, в котором находятся файлы проекта.
app.component.ts: файл компонента приложения
main.ts: точка входа и бутстрап
bs-config.js: сервер Lite (сервер dev на основе браузера)


index.html: страница индекса приложения
node_modules: где установлены пакеты npm
package.json: файл конфигурации npm
systemjs.config.js: Конфигурация SystemJS
tsconfig.json: TypeScript Конфигурация компилятора
typings.json: определения типов

Содержимое каждого файла.

  • index.html файл

    <html>
  <head>
    <title>Hello Angular 2</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

  • package.json

    {
    "name": "hello-angular-2",
    "version": "1.0.0",
    "scripts": {
      "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
      "lite": "lite-server",
      "postinstall": "typings install",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "typings": "typings"
    },
    "license": "ISC",
    "dependencies": {
      "@angular/common":  "2.0.0-rc.2",
      "@angular/compiler":  "2.0.0-rc.2",
      "@angular/core":  "2.0.0-rc.2",
      "@angular/http":  "2.0.0-rc.2",
      "@angular/platform-browser":  "2.0.0-rc.2",
      "@angular/platform-browser-dynamic":  "2.0.0-rc.2",
      "@angular/router":  "2.0.0-rc.2",
      "@angular/router-deprecated":  "2.0.0-rc.2",
      "@angular/upgrade":  "2.0.0-rc.2",
      "systemjs": "0.19.27",
      "core-js": "^2.4.0",
      "reflect-metadata": "^0.1.3",
      "rxjs": "5.0.0-beta.6",
      "zone.js": "^0.6.12",
      "angular2-in-memory-web-api": "0.0.12",
      "bootstrap": "^3.3.6"
    },
    "devDependencies": {
      "concurrently": "^2.0.0",
      "lite-server": "^2.2.0",
      "typescript": "^1.8.10",
      "typings":"^1.0.4"
    }
  }

  • systemjs.config.js

    /**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

  • tsconfig.json

    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

  • typings.json

    {
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

  • main.ts

    import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

  • app.component.ts

    import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>Hello World from Angular 2</h1>'
})
export class AppComponent { }


Установка зависимостей

После сохранения всех вышеуказанных файлов запустите npm install в окне терминала в месте расположения проекта, это установит все зависимости в директорию node_modules, которая может занять некоторое время в зависимости от вашего подключения скорость.

Запуск сервера разработки

После установки всех зависимостей запустите npm start на терминале в месте расположения проекта. Это будет запускать компилятор typescript и lite-server одновременно, это поможет скомпилировать/передать код и перезагрузить веб-страницу всякий раз, когда вы меняете исходный код.

Теперь можно открыть новое окно браузера. Если нет, укажите ваш любимый браузер на **http://127.0.0.1:3000/** или http://localhost:3000/, если все будет хорошо, вы увидите страницу с сообщением

Hello World from Angular 2

Вот и все!

Если вы не хотите, чтобы Lite-сервер автоматически открывал браузер при каждом запуске npm start, добавьте следующее в свой bs-config.js.

module.exports = {
    "open": false
};

примеры кода из angular.io

Ответ 4

Используйте '@angular/core' вместо 'angular2/core'

Ответ 5

Сделайте это в index.html:

<html>

<head>
    <base href="/"></base>
</head>

<body>
    <app>Loading....</app>
</body>

<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
            });

</script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>    
<script>
    System.import('App');
</script>

</html>

попробуйте использовать этот первый компонент:

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

@Component({
    selector: 'app',
    template: "Hello"
})
export class App{  
    constructor(){ }    
}

bootstrap(App);

ваш файл Index.html отсутствует. например импортировать основной компонент с помощью system.js. я System.import('App');

tsconfig.json:

{
  "version": "1.5.3",
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false
  }
}

Ответ 6

Вы должны импортировать эти файлы:

<!-- ZonesJS and Reflect-metadata -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- RxJS (observables) -->
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<!-- Main Angular2 bundle -->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

И используйте эту конфигурацию для SystemJS:

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

Я предполагаю, что ваши файлы TypeScript находятся в подпапке app, а app/boot.ts - это тот, который содержит вызов функции bootstrap.

Ответ 7

Убедитесь, что папка "node_modules" (щелкните "Показать скрытые файлы" ) находится в нужном месте (в корне проекта, в ролике с wwwroot). Также проверьте в папке "Зависимости": @angular:

[Proj. имя]/Зависимости/НМП/@ angular...

Я перемещал файлы, когда я интегрировал руководство быстрого запуска в новый проект ASP.NET Core, а папка node_modules была неуместна.

надеюсь, что это поможет