WebService mit Angular

Hallo,

ich bin gerade dabei ein kleines Projekt

1. WebService mit MS-SQL Datenbank
2. eine Web-Oberfläche (Angular)

umzusetzen.

Ich habe versucht einen ersten Testprojekt anzulegen und erstmal zu prüfen ob das was ich vorhabe auch mit Angular geht (bzw. ob ich damit klar komme).

Ich wollte das packege @angular/material einbinden, bekomme aber irgw. immer einen Fehler.....

Meine Vermutung ist, dass evtl. die Versionen nicht stimmen.... kenne mich aber zuwenig damit aus....

Vielleicht kann mir ja jemand helfen?

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MatNativeDateModule } from '@angular/material';

import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent
  ],
  imports: [
    FormsModule,
    HttpModule,
    MatNativeDateModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

packege.json

{
  "name": "hello-world-app",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "github:angular/animations-builds",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^2.4.10",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.4.10",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "^6.1.2",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "angular-material-source": "github:angular/material",
    "core-js": "^2.4.1",
    "ng-material-multilevel-menu": "^4.0.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.28.3",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

Fehlermeldung

fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
\** NG Live Development Server is running on http://localhost:4200. **
Hash: 69049d128ab0d229cd8a
Time: 6585ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 234 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.map (main) 6.13 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.map (styles) 9.71 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.56 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

WARNING in ./~/@angular/http/src/backends/xhr_backend.js
206:41-69 "export '__platform_browser_private__' was not found in '@angular/platform-browser'

WARNING in ./~/@angular/platform-browser-dynamic/src/private_import_platform-browser.js
9:49-50 "export '__platform_browser_private__' (imported as '_') was not found in '@angular/platform-browser'

WARNING in ./~/@angular/platform-browser-dynamic/src/private_import_platform-browser.js
10:20-21 "export '__platform_browser_private__' (imported as '_') was not found in '@angular/platform-browser'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
172:4-11 "export 'uglobal' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
173:19-26 "export 'uglobal' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
496:69-86 "export 'uparseCookieValue' was not found in '@angular/common'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
540:17-25 "export 'DOCUMENT' was not found in '@angular/common'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
641:24-38 "export 'InjectionToken' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
675:8-15 "export 'uglobal' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
683:8-15 "export 'uglobal' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
684:8-15 "export 'uglobal' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
686:32-39 "export 'uglobal' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
700:13-20 "export 'uglobal' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
701:12-19 "export 'uglobal' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
703:8-15 "export 'uglobal' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
744:17-24 "export 'uglobal' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
744:33-40 "export 'uglobal' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
802:32-46 "export 'InjectionToken' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1118:20-39 "export 'RendererStyleFlags2' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1119:58-77 "export 'RendererStyleFlags2' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1126:20-39 "export 'RendererStyleFlags2' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1301:28-44 "export 'isPlatformServer' was not found in '@angular/common'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1413:83-94 "export 'PLATFORM_ID' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1471:32-46 "export 'InjectionToken' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1473:24-38 "export 'InjectionToken' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1599:16-24 "export 'uConsole' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1800:23-37 "export 'u_sanitizeHtml' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1805:23-38 "export 'u_sanitizeStyle' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1817:23-36 "export 'u_sanitizeUrl' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1910:15-26 "export 'PLATFORM_ID' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1910:38-58 "export 'uPLATFORM_BROWSER_ID' was not found in '@angular/common'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1938:15-24 "export 'uAPP_ROOT' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1944:35-46 "export 'PLATFORM_ID' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1951:50-58 "export 'uConsole' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
1959:15-31 "export 'RendererFactory2' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
2015:20-26 "export 'inject' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
2109:27-43 "export 'defineInjectable' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
2124:21-27 "export 'inject' was not found in '@angular/core'

WARNING in ./~/@angular/platform-browser/fesm5/platform-browser.js
2156:28-44 "export 'defineInjectable' was not found in '@angular/core'

ERROR in C:/Users/Documents/Projekte Visual Studio/VS Code/hello-world-app/src/app/app.module.ts (4,37): Cannot find module '@angular/material'.

ERROR in C:/Users/Documents/Projekte Visual Studio/VS Code/hello-world-app/src/main.ts (5,33): Cannot find module '@angular/material'.

ERROR in TypeError: Cannot read property 'split' of null
    at Function.RouteDef.fromString (C:\Users\Documents\Projekte Visual Studio\VS Code\hello-world-app\node_modules\@angular\compiler-cli\src\ngtools_impl.js:33:27)
    at Object.listLazyRoutesOfModule (C:\Users\Documents\Projekte Visual Studio\VS Code\hello-world-app\node_modules\@angular\compiler-cli\src\ngtools_impl.js:45:34)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Users\Documents\Projekte Visual Studio\VS Code\hello-world-app\node_modules\@angular\compiler-cli\src\ngtools_api.js:78:39)
    at AotPlugin._getLazyRoutesFromNgtools (C:\Users\Documents\Projekte Visual Studio\VS Code\hello-world-app\node_modules\@ngtools\webpack\src\plugin.js:240:66)
    at _donePromise.Promise.resolve.then.then.then.then.then (C:\Users\Documents\Projekte Visual Studio\VS Code\hello-world-app\node_modules\@ngtools\webpack\src\plugin.js:493:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

ERROR in C:/Users/Documents/Projekte Visual Studio/VS Code/hello-world-app/src/main.ts (5,33): Cannot find module '@angular/material'.

ERROR in C:/Users/Documents/Projekte Visual Studio/VS Code/hello-world-app/src/app/app.module.ts (4,37): Cannot find module '@angular/material'.

ERROR in ./src/main.ts
Module not found: Error: Can't resolve '@angular/material' in 'C:\Users\Documents\Projekte Visual Studio\VS Code\hello-world-app\src'
 @ ./src/main.ts 5:0-52
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@angular/material' in 'C:\Users\Documents\Projekte Visual Studio\VS Code\hello-world-app\src\app'
 @ ./src/app/app.module.ts 13:0-56
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts
webpack: Failed to compile.

Vielen Dank

Prinzipiell mir ein Rätsel, wieso Du github-Links als Projektverweise hinterlegst und wieso Du nicht einfach die in NPM hinterlegten Versionen nimmst.
Woher hast Du das?

Ansonsten sieht es eben so aus, dass Deine Imports nicht stimmen.
Klassische Grundlagen Dinge (von TypeScript), wie ein using in C#.

Ich lege Dir daher ein Tutorial nahe, denn Angular hat eine relativ hohe Einstiegshürde.
Ohne das, wirst Du ständig irgendwo gegen die Wand laufen und auf externe Hilfe angewiesen sein; das ist nicht zufriedenstellend und sehr langsam.

Also nimm ein Tutorial zur Hand.

Ich verweise bei Starter Kits bei Angular gerne auf https://github.com/tomastrajan/angular-ngrx-material-starter
Dieses hat aber direkt NGRX an Board; das macht die Hürde eher höher als kleiner. Aber NGRX ist im Bereich von Angular für die meisten Projekte eigentlich auch ein Muss.
Ein Starter Project ohne NGRX; wüsste da jetzt keines, das ich mit gutem Gewissen empfehlen könnte.

Vielen Dank.

Ich werde mir das Tutorial auf jeden Fall ansehen...

Das der Einstieg ins Angular schwer sein wird hab ich mir schon gedacht, aber so irgw. auch nicht. Aber dann weiß ich jetzt, dass es normal ist.

Hallo Mary81,

du kannst die AngularCLI (nicht 1.0.0-beta.28.3) als Grundlage nehmen. Das vereinfacht das Ganze ungemein. Wie man dort Material einbindet: Da gibts massig Tutorials für.

Gruss

Coffeebean