找不到模块@ angular/core [英] Cannot find module @angular/core

问题描述

因此，我试图学习一些有关如何使用Angular的信息，并设置Visual Studio用于制作网站的基本配置.我正在尝试弄清为什么我不断收到一条消息，指出没有HTTP提供程序，然后在启动时开始出现错误，提示它如何找不到@ angular/core模块.我回滚了尝试解决HTTP提供程序消息的更改，但仍然收到有关@ angular/core的错误.我敏锐地意识到使用的Angular版本已经过时了，但是由于我只是想对此有所了解，而且这不是供公众使用，所以我并不担心.

So I'm trying to learn a bit on how to use Angular and set up the basic configuration that Visual Studio has for making a site. I was in the process of trying to figure out why I kept getting a message that there was no provider for HTTP and then I started getting an error at startup about how it couldn't find the @angular/core module. I rolled back the changes I made trying to resolve the HTTP provider message and am still getting the error about @angular/core. I am keenly aware that the version of Angular used is way out of date, but since I'm just trying to get a feel for it and this isn't for public use, I'm not all that concerned.

如果有人有想法，将不胜感激.如果有人知道如何解决该HTTP Provider问题，也将不胜感激.

If anyone has ideas, it would be appreciated. If anyone knows how to address that HTTP Provider thing, that would also be appreciated.

这是我收到的全部例外:

Here is the full exception that I receive:

Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: 'Prerendering failed because of error: Error: Cannot find module "../../../node_modules/@angular/core"
    at Object.<anonymous> (C:\Users\MyName\source\Angular2Test\Angular2Test\ClientApp\dist\main-server.js:19316:7)
    at __webpack_require__ (C:\Users\MyName\source\Angular2Test\Angular2Test\ClientApp\dist\main-server.js:20:30)
    at Object.<anonymous> (C:\Users\MyName\source\Angular2Test\Angular2Test\ClientApp\dist\main-server.js:19199:87)
    at __webpack_require__ (C:\Users\MyName\source\Angular2Test\Angular2Test\ClientApp\dist\main-server.js:20:30)
    at Object.<anonymous> (C:\Users\MyName\source\Angular2Test\Angular2Test\ClientApp\dist\main-server.js:19141:92)
    at __webpack_require__ (C:\Users\MyName\source\Angular2Test\Angular2Test\ClientApp\dist\main-server.js:20:30)
    at Object.hasOwn (C:\Users\MyName\source\Angular2Test\Angular2Test\ClientApp\dist\main-server.js:17218:77)
    at __webpack_require__ (C:\Users\MyName\source\Angular2Test\Angular2Test\ClientApp\dist\main-server.js:20:30)
    at Object.<anonymous> (C:\Users\MyName\source\Angular2Test\Angular2Test\ClientApp\dist\main-server.js:19432:81)
    at __webpack_require__ (C:\Users\MyName\source\Angular2Test\Angular2Test\ClientApp\dist\main-server.js:20:30)
Current directory is: C:\Users\MyName\source\Angular2Test\Angular2Test
'

由于我不确定问题的根源，因此我在这里列出了我认为最有可能的候选文件:

Since I'm not sure what file is the source of my problem, I'm listing what I think would be the most likely candidates here:

package.json

package.json

{
  "name": "Angular2Test",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "4.2.5",
    "@angular/common": "4.2.5",
    "@angular/compiler": "4.2.5",
    "@angular/compiler-cli": "4.2.5",
    "@angular/core": "4.2.5",
    "@angular/forms": "4.2.5",
    "@angular/http": "4.2.5",
    "@angular/platform-browser": "4.2.5",
    "@angular/platform-browser-dynamic": "4.2.5",
    "@angular/platform-server": "4.2.5",
    "@angular/router": "4.2.5",
    "@ngtools/webpack": "1.5.0",
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "@types/webpack-env": "1.13.0",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "chai": "4.0.2",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.6.4",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12"
  },
  "dependencies": {}
}

app.component.ts

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
}

app.server.module.ts

app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModuleShared } from './app.shared.module';
import { AppComponent } from './components/app/app.component';
import { HttpModule } from '@angular/http';

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        ServerModule,
        AppModuleShared
    ]
})
export class AppModule {
}

app.shared.module.ts

app.shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/Shared/Header/header.component';
import { FooterComponent } from './components/Shared/Footer/footer.component';
import { LoginComponent } from './components/Login/login.component';

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        HeaderComponent,
        FooterComponent,
        LoginComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            { path: 'login', component: LoginComponent },
            { path: '', redirectTo: 'login', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: '**', redirectTo: 'login' }
        ])
    ]
})
export class AppModuleShared {
}

以下是我尝试解决的一些问题的列表:

Here is a list of some of things I've looked at to try and resolve this:

• 错误:找不到模块'@ angular/core'
• 错误TS2307:找不到模块'@ angular/core'
• 找不到模块"@ angular/core"错误
• angular2:找不到模块'@ angular/core'
• 找不到模块@ angular/core + angular2
• 找不到模块'@ angular/core'
• 在新项目中找不到模块'@ angular/core'
• https://angular.io/guide/quickstart

• Error: Cannot find module '@angular/core'
• error TS2307: Cannot find module '@angular/core'
• Can not find module '@angular/core' error
• angular2: Cannot find module '@angular/core'
• Cannot find module @angular/core + angular2
• cannot find module '@angular/core'
• Cannot find module '@angular/core' in new project
• https://angular.io/guide/quickstart

推荐答案

运行

npm安装

在Angular项目中

inside your Angular project

这篇关于找不到模块@ angular/core的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！