Не удается найти модуль '@ угловой/ядро' '@ угловой/ядро' @ угловой/платформенный браузер @ угловой/платформенный браузер-динамик

Question

Я пытаюсь использовать Angular 2.0.0 с JSMP, SystemJS и TS Loader в ASP.NET MVC 5 (не основной) приложение.

Visual Studio жалуется, что находит угловые модули.

Severity Code Description Project File Line Suppression State 
Error TS2307 Cannot find module './components/app.component'.  
Error TS2307 Cannot find module '@angular/core'. 
Error TS2307 Cannot find module '@angular/core'. 
Error TS2307 Cannot find module '@angular/platform-browser'. 
Error TS2307 Cannot find module '@angular/platform-browser-dynamic'. 

Я устанавливаю угловой через JSPM.

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    /* target of the compilation (es5) */ 
    "module": "system", 
    /* System.register([dependencies], function) (in JS)*/ 
    "moduleResolution": "node", 
    /* how module gets resolved (needed for Angular 2)*/ 
    "emitDecoratorMetadata": true, 
    /* needed for decorators */ 
    "experimentalDecorators": true, 
    /* needed for decorators (@Injectable) */ 
    "noImplicitAny": false 
    /* any has to be written explicity*/ 
    }, 
    "exclude": [ 
    /* since compiling these packages could take ages, we want to ignore them*/ 
    "jspm_packages", 
    "node_modules" 
    ], 
    "compileOnSave": false 
    /* on default the compiler will create js files */ 
} 

config.js

System.config({ 
    baseURL: "/", 
    defaultJSExtensions: true, 
    transpiler: "babel", 
    babelOptions: { 
    "optional": [ 
     "runtime", 
     "optimisation.modules.system" 
    ] 
    }, 
    typescriptOptions: { 
    "tsconfig": true 
    }, 
    paths: { 
    "github:*": "jspm_packages/github/*", 
    "npm:*": "jspm_packages/npm/*" 
    }, 

    packages: { 
    "app": { 
     "main": "bootstrap", 
     "format": "system", 
     "defaultExtensions": "ts", 
     "meta": { 
     "*.ts": { 
      "loader": "ts" 
     } 
     } 
    } 
    }, 

    map: { 
    "@angular/common": "npm:@angular/common@2.0.0", 
    "@angular/compiler": "npm:@angular/compiler@2.0.0", 
    "@angular/core": "npm:@angular/core@2.0.0", 
    "@angular/http": "npm:@angular/http@2.0.0", 
    "@angular/platform-browser": "npm:@angular/platform-browser@2.0.0", 
    "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@2.0.0", 
    "@angular/router": "npm:@angular/router@3.0.0", 
    "babel": "npm:babel-core@5.8.38", 
    "babel-runtime": "npm:babel-runtime@5.8.38", 
    "core-js": "npm:core-js@2.4.1", 
    "es6-shim": "github:es-shims/es6-shim@0.35.1", 
    "reflect-metadata": "npm:reflect-metadata@0.1.8", 
    "rxjs": "npm:rxjs@5.0.0-beta.12", 
    "ts": "github:frankwallis/plugin-typescript@5.1.2", 
    "zone.js": "npm:zone.js@0.6.23", 
    "github:frankwallis/plugin-typescript@5.1.2": { 
     "typescript": "npm:typescript@2.0.2" 
    }, 

    } 
}); 

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './components/app.component'; 
@NgModule({ 
    imports: [BrowserModule], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

index.html

<script src="../../jspm_packages/npm/core-js@2.4.1/client/shim.min.js"></script> 
    <script src="../../jspm_packages/npm/zone.js@0.6.23/dist/zone.min.js"></script> 
    <script src="../../jspm_packages/npm/reflect-metadata@0.1.8/Reflect.js"></script> 
    <script src="../../jspm_packages/system.js"></script> 
    <script src="../../config.js"></script> 
    <script> 
      System.config 
      ({ 
       map: { 
        "@@angular/common": "npm:@@angular/common@2.0.0", 
        "@@angular/compiler": "npm:@@angular/compiler@2.0.0", 
        "@@angular/core": "npm:@@angular/core@2.0.0", 
        "@@angular/http": "npm:@@angular/http@2.0.0", 
        "@@angular/platform-browser": "npm:@@angular/platform-browser@2.0.0", 
        "@@angular/platform-browser-dynamic": "npm:@@angular/platform-browser-dynamic@2.0.0", 
        "@@angular/router": "npm:@@angular/router@3.0.0", 
        "reflect-metadata": "npm:reflect-metadata@0.1.8" 
       }, 
       transpiler: "ts", 
       packages: 
       { 
        "app": { 
         "defaultExtension": "ts", 
         "meta": { 
          "*.ts": { 
           "loader": "ts" 
          } 
         } 
        } 
       } 
      }); 

      console.log("System.Config Init OK"); 
    </script> 

Answer 1

Для использования JSPM вам нужно машинопись 2.0, так что вы можете использовать конфигурацию пути и сказать машинопись, где модуль расположен.

tsconfig.json

{ 
 
    "compilerOptions": { 
 
     "target": "es5", 
 
     "module": "system", 
 
     "moduleResolution": "node", 
 
     "sourceMap": true, 
 
     "emitDecoratorMetadata": true, 
 
     "experimentalDecorators": true, 
 
     "removeComments": false, 
 
     "noImplicitAny": false, 
 
     "baseUrl": ".", 
 
     "paths": { 
 
      "@angular/core": [ 
 
       "jspm_packages/npm/@angular/core@2.0.0" 
 
      ], 
 
      "@angular/platform-browser-dynamic": [ 
 
       "jspm_packages/npm/@angular/platform-browser-dynamic@2.0.0" 
 
      ], 
 
      "@angular/common": [ 
 
       "jspm_packages/npm/@angular/common@2.0.0" 
 
      ], 
 
      "@angular/compiler": [ 
 
       "jspm_packages/npm/@angular/compiler@2.0.0" 
 
      ], 
 
      "@angular/forms": [ 
 
       "jspm_packages/npm/@angular/forms@2.0.0" 
 
      ], 
 
      "@angular/http": [ 
 
       "jspm_packages/npm/@angular/http@2.0.0" 
 
      ], 
 
      "@angular/platform-browser": [ 
 
       "jspm_packages/npm/@angular/platform-browser@2.0.0" 
 
      ], 
 
      "@angular/router": [ 
 
       "jspm_packages/npm/@angular/router@3.0.0" 
 
      ], 
 
      "es6-shim": [ 
 
       "jspm_packages/npm/es6-shim@0.35.1" 
 
      ], 
 
      "reflect-metadata": [ 
 
       "jspm_packages/npm/reflect-metadata@0.1.3" 
 
      ], 
 
      "rxjs/*": [ 
 
       "jspm_packages/npm/rxjs@5.0.0-beta.12/*" 
 
      ], 
 
      "systemjs": [ 
 
       "jspm_packages/npm/systemjs@0.19.31" 
 
      ], 
 
      "zone.js": [ 
 
       "jspm_packages/npm/zone.js@0.6.12" 
 
      ] 
 
     } 
 
    }, 
 
    "exclude": [ 
 
     "node_modules", 
 
     "jspm_packages" 
 
    ] 
 
}

Answer 2

Убедитесь, что папка 'node_modules' (нажмите на ссылку показать скрытые файлы) в нужном месте (в корне проекта, братьев и сестер с Wwwroot). Также проверьте @angular показывает в проекте Dependencies папка:

([. Имя проектируемый] /Зависимости/НМП/@ угловой ...).

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

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