Не удается найти модуль '@angular/core' '@angular/core' @angular/platform-browser @angular/platform-browser-dynamic
Я пытаюсь использовать 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>
2 ответа
Убедитесь, что папка "node_modules" (нажмите "Показать скрытые файлы") находится в нужном месте (в корне проекта, брат с wwwroot). Также проверьте, что @angular показывается в папке Зависимости проекта:
([имя проекта]/ Зависимости / npm / @ angular...).
Я перемещал файлы, когда интегрировал руководство по быстрому запуску в новый проект ASP.NET Core (я знаю, что это не Core, но на всякий случай), и папка node_modules была не на своем месте.
надеюсь это поможет
Для использования 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"
]
}