Angular-Material 2 in Visual Studio Display nicht korrekt

Ich benutze Stater von hier >> [https://www.youtube.com/watch?v=8LxOC89qkHM&t] und i npm alle auf eine neue Version aktualisieren und bereits hammerjs verwenden. Es hat keinen Fehler aber seine Anzeige falsch, Wie kann ich tun? Es spart in Visual Studio 2015 und Visual Studio 2017 zeigen auch falsch.

Quelle

2017-02-20 uopeydel

Haben Sie Konsolenprotokolle in Ihrem Browser – Habeeb

Bitte zeig uns was du geschrieben hast? –

haben nur [Angular läuft im Entwicklungsmodus. Rufen Sie enableProdMode() auf, um den Produktionsmodus zu aktivieren. ] nichts anderes ._. – uopeydel

systemjs.config.js

(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 

     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/material': 'npm:@angular/material/bundles/material.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
     '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', 

     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this);

_layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 
    <!-- Styles.Render("~/Content/css") --> 
    <!-- Scripts.Render("~/bundles/modernizr") --> 
    <!-- Angular2 Code --> 
    <base href="/"> 
    <link rel="stylesheet" href="styles.css"> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="systemjs.config.js"></script> 

    <script> 
     System.import('app').catch(function (err) { console.error(err); }); 
    </script> 
    <!-- Angular2 Code --> 

</head> 
<body> 
    @RenderBody() 

    @Scripts.Render("~/bundles/jquery") 
    <!-- Scripts.Render("~/bundles/bootstrap") --> 
    @RenderSection("scripts", required: false) 
</body> 
</html>

package.json

{ 
    "name": "angularjskwanjai", 
    "version": "1.0.0", 
    "description": "KwanJai - AngularJS2", 
    "scripts": { 
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first", 
    "lint": "tslint ./app/**/*.ts -t verbose", 
    "lite": "lite-server", 
    "pree2e": "webdriver-manager update", 
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", 
    "test-once": "tsc && karma start karma.conf.js --single-run", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "MIT", 
    "dependencies": { 
    "@angular/common": "2.4.8", 
    "@angular/compiler": "2.4.8", 
    "@angular/core": "2.4.8", 
    "@angular/forms": "2.4.8", 
    "@angular/http": "2.4.8", 
    "@angular/material": "2.0.0-beta.2", 
    "@angular/platform-browser": "2.4.8", 
    "@angular/platform-browser-dynamic": "2.4.8", 
    "@angular/platform-server": "2.4.8", 
    "@angular/router": "3.4.8", 
    "@angularclass/conventions-loader": "1.0.13", 
    "@angularclass/hmr": "1.2.2", 
    "@angularclass/hmr-loader": "3.0.2", 

    "angular-in-memory-web-api": "0.2.4", 
    "systemjs": "0.20.9", 
    "core-js": "2.4.1", 
    "hammerjs": "2.0.8", 
    "ie-shim": "0.1.0", 
    "jasmine-core": "2.5.2", 
    "material": "0.1.1", 
    "reflect-metadata": "0.1.9", 
    "rxjs": "5.1.1", 
    "zone.js": "0.7.7" 
    }, 
    "devDependencies": { 
    "concurrently": "3.3.0", 
    "lite-server": "2.2.2", 
    "typescript": "2.1.6", 

    "canonical-path": "0.0.2", 
    "http-server": "0.9.0", 
    "tslint": "4.4.2", 
    "lodash": "4.17.4", 
    "jasmine-core": "2.5.2", 
    "karma": "1.4.1", 
    "karma-chrome-launcher": "2.0.0", 
    "karma-cli": "1.0.1", 
    "karma-htmlfile-reporter": "0.3.5", 
    "karma-jasmine": "1.1.0", 
    "karma-jasmine-html-reporter": "0.2.2", 
    "protractor": "5.1.1", 
    "webdriver-manager": "12.0.2", 
    "rimraf": "2.6.0", 

    "@types/node": "7.0.5", 
    "@types/jasmine": "2.5.43", 
    "@types/selenium-webdriver": "2.53.39" 
    }, 
    "repository": {} 
}

index.cshtml

<my-app>Loading...</my-app>

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { RouterModule, Routes } from '@angular/router'; 
import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule);

app.module

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import '../node_modules/hammerjs/hammer.js'; 
import { MaterialModule } from '@angular/material'; 
import { AppComponent } from './app.component'; 
import { RouterModule, Routes, PreloadAllModules } from '@angular/router'; 
import { AppRoutes } from '../app/app.routes'; 
//<<< ------- Route PAGE ------- >>> 
import { LoginComponent } from '../app/Login/Login.component'; 
import { TestPageComponent } from '../app/TestPage/TestPage.component'; 
import { PageNotFoundComponent } from '../app/PageNotFound/PageNotFound.component'; 
//<<< ------- Route PAGE ListManager------- >>> 

//<<< ------- Route PAGE Management------- >>> 


@NgModule({ 
    imports: [ 
     RouterModule.forRoot(AppRoutes, { useHash: true, preloadingStrategy: PreloadAllModules }), 
     BrowserModule, 
     MaterialModule.forRoot() 
    ], 
    declarations: [ 
     AppComponent, 
     //<<< ------- Route PAGE ------- >>> 
     LoginComponent, 
     TestPageComponent, 
     PageNotFoundComponent 
     //<<< ------- Route PAGE ListManager------- >>> 

     //<<< ------- Route PAGE Management------- >>> 

    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

TestPage.component

import { Component } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { MdDialog } from '@angular/material'; 
import { PageNotFoundComponent } from '../PageNotFound/PageNotFound.component'; 
@Component({ 
    selector: 'TestPage', 
    styles: [``], 
    templateUrl: '../app/TestPage/TestPage.html' 
}) 
export class TestPageComponent { 
    constructor(public dialog: MdDialog) { } 

    openDialog() { 
     this.dialog.open(PageNotFoundComponent); 
    } 
}

testpage.html

<h1> TestPage </h1> 
<div style="background-color:beige"> 
    <button md-button (click)="openDialog()">Open dialog</button> 

</div>

Quelle

2017-02-20 08:59:36 uopeydel

Ich kann das Problem nicht finden. –

Bitte folgen Sie diesem Link zum besseren Verständnis: http://126kr.com/article/86u14ya9lyy –

Angular-Material 2 in Visual Studio Display nicht korrekt

Antwort

Verwandte Themen