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.
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
{
"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
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
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
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:
- 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
