none
Problems with rxjs including Angular/Material

    Question

  • Hello,

    I am trying to do implement the material design into a newly created Asp.net core  2 MVC / Angular 5 App using the corresponding template. Of course I got a runable application. Thereafter I had been updating the package.json to the current versions of the libs as following:

    {
      "name": "SSCDv2",
      "private": true,
      "version": "0.0.0",
      "scripts": {
        "test": "karma start ClientApp/test/karma.conf.js"
      },
      "devDependencies": {
        "@angular/animations": "5.2.9",
        "@angular/common": "5.2.9",
        "@angular/compiler": "5.2.9",
        "@angular/compiler-cli": "5.2.9",
        "@angular/core": "5.2.9",
        "@angular/forms": "5.2.9",
        "@angular/http": "5.2.9",
        "@angular/platform-browser": "5.2.9",
        "@angular/platform-browser-dynamic": "5.2.9",
        "@angular/platform-server": "5.2.9",
        "@angular/router": "5.2.9",
        "@ngtools/webpack": "^6.0.0",
        "@types/chai": "4.1.2",
        "@types/jasmine": "2.8.6",
        "@types/webpack-env": "1.13.6",
        "angular2-router-loader": "0.3.5",
        "angular2-template-loader": "0.6.2",
        "aspnet-prerendering": "^3.0.1",
        "aspnet-webpack": "^2.0.3",
        "awesome-typescript-loader": "5.0.0",
        "bootstrap": "4.1.0",
        "chai": "4.1.2",
        "css": "2.2.1",
        "css-loader": "0.28.11",
        "es6-shim": "0.35.3",
        "event-source-polyfill": "0.0.12",
        "expose-loader": "0.7.5",
        "extract-text-webpack-plugin": "3.0.2",
        "file-loader": "1.1.11",
        "html-loader": "0.5.5",
        "isomorphic-fetch": "2.2.1",
        "jasmine-core": "3.1.0",
        "jquery": "3.3.1",
        "json-loader": "0.5.7",
        "karma": "2.0.0",
        "karma-chai": "0.1.0",
        "karma-chrome-launcher": "2.2.0",
        "karma-cli": "1.0.1",
        "karma-jasmine": "1.1.1",
        "karma-webpack": "3.0.0",
        "preboot": "^6.0.0",
        "raw-loader": "0.5.1",
        "reflect-metadata": "0.1.13",
        "rxjs": "^5.5.10",
        "style-loader": "0.20.3",
        "to-string-loader": "1.1.5",
        "typescript": "2.8.1",
        "url-loader": "1.0.1",
        "webpack": "4.5.0",
        "webpack-hot-middleware": "2.21.2",
        "webpack-merge": "4.1.2",
        "zone.js": "0.8.26",
        "@angular/material": "^5.2.4",
        "@angular/cdk": "^5.2.4"
      }
    }

    Therafter, I added a "ngmaterial.module.ts" into to the ClientApp/app folder as follows:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    // all the material components
    import { MatButtonModule } from '@angular/material';
    
    @NgModule({
        imports: [MatButtonModule],
        exports: [MatButtonModule]
    })
    export class MaterialAppModule { }

    And I also added the newly created / loaded file and module to the "ClientApp/app/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 { NavMenuComponent } from './components/navmenu/navmenu.component';
    import { HomeComponent } from './components/home/home.component';
    import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
    import { CounterComponent } from './components/counter/counter.component';
    import { MaterialAppModule } from './ngmaterial.module';
    
    @NgModule({
        declarations: [
            AppComponent,
            NavMenuComponent,
            CounterComponent,
            FetchDataComponent,
            HomeComponent
        ],
        imports: [
            CommonModule,
            HttpModule,
            FormsModule,
            MaterialAppModule,
            RouterModule.forRoot([
                { path: '', redirectTo: 'home', pathMatch: 'full' },
                { path: 'home', component: HomeComponent },
                { path: 'counter', component: CounterComponent },
                { path: 'fetch-data', component: FetchDataComponent },
                { path: '**', redirectTo: 'home' }
            ])
        ]
    })
    export class AppModuleShared {
    }
    

    After compiling / running the application... I get lot's of errors:

    Can't resolve rxjs/operators/tap in .....\node_modules\@angular\material\esm5

    and another 93 error messages concerning components in rxjs/*

    I have searched the internet and tried to debug my mistake for at least 36 hourse and couldn't find any solution / help.

    Could anyone help me?
    Thanks for your help in advance

    Stefan



    Sunday, April 15, 2018 12:37 AM

All replies

  • I gave my project another try... Starting from scratch with a new .NET Core project with Angular SPA theme. I used the tutorial delivered here: https://www.youtube.com/watch?v=rQ94v7ahwNM

    The result is pretty much the same... I get lots of errors of the type: "Can't resolve rxjs/operators/tap" or "Can't resolve rxjs/operators/takeUntil"...

    Is there any (working) possibility getting Material design working?

    Sunday, April 15, 2018 10:18 AM
  • Have u made any progress with this? I am starting a new project with Angular 5 & .Net Core but now am stuck!
    Wednesday, July 11, 2018 10:00 AM