क्लियरिटी डिज़ाइन सिस्टम

के साथ एक कोणीय 2 ऐप का निर्माण करना मुझे अपने आधिकारिक tutorial से क्लियरिटी डिज़ाइन सिस्टम को कोणीय 2 5min quickstart पर जोड़ने के बाद यह त्रुटि मिल रही है। ब्राउज़र के कंसोल में त्रुटि बहुत मदद नहीं करती है, कृपया कोई सलाह दें?क्लियरिटी डिज़ाइन सिस्टम

zone.js:1382 GET http://localhost:3000/clarity-angular 404 (Not Found) 
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/clarity-angular(…)

app.module.ts

import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {ClarityModule} from 'clarity-angular'; 
import {AppComponent} from './app.component'; 

@NgModule({ 
    imports: [BrowserModule, 
      ClarityModule], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
}

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Angular QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 

    <link rel="stylesheet" href="node_modules/clarity-icons/clarity-icons.min.css"> 
    <script src="node_modules/mutationobserver-shim/dist/mutationobserver.min.js"></script> 
    <script src="node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script> 
    <script src="node_modules/clarity-icons/clarity-icons.min.js"></script> 
    <link rel="stylesheet" href="node_modules/clarity-ui/clarity-ui.min.css"> 

    <!-- 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> 
    </head> 

    <body> 
    <my-app>Loading AppComponent content here ...</my-app> 
    </body> 
</html>

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/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);

स्रोत

2016-11-29 Igor D.

अपडेट के लिए systemjs.config में डी एस अलावा map और package वर्गों के लिए clarity-angular जोड़ें। नीचे उदाहरण देखें।

(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/', 
     'build:': 'build', 
     'src:': '' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     //app: 'build:', 
     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/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.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', 
     //'angular2-mdl': 'npm:angular2-mdl/bundle/angular2-mdl.js' 
     //'angular2-mdl': 'npm:angular2-mdl', 
     'clarity-angular': 'npm:clarity-angular' 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: 'main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     main: 'Rx.js', 
     defaultExtension: 'js' 
     }, 
     'clarity-angular': { 
     main: 'index.js', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this);

आप सीधे स्पष्टता निर्देशों का उपयोग कर रहे हैं, तो आपका मुख्य app.component.html में आप import { ClarityModule } from 'clarity-angular'; करने की जरूरत है और यह भी @NgModule imports को ClarityModule जोड़ें। आप एक रूटर के तहत स्पष्टता निर्देशों का उपयोग करने की जरूरत है तो आप अपने द्वारा आवेदन रूटर मॉड्यूल में ClarityModule आयात करना चाहिए

import { NgModule }    from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 

import { ClarityModule } from 'clarity-angular'; 

import { SearchFormComponent } from './components/search-form/search-form.component'; 

const routes: Routes = [ 
    { path: 'search', component: SearchFormComponent } 
]; 
@NgModule({ 
    imports: [ 
     FormsModule, 
     ReactiveFormsModule, 
     ClarityModule, 
     RouterModule.forRoot(routes) 
    ], 
    declarations: [ 
     SearchFormComponent 
    ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {}

स्रोत

2016-11-29 14:39:42

काम नहीं करता है यह 'system.config' ने मेरी समस्या हल की है। और क्लेरिटी प्रोजेक्ट से 'क्ल्र-डाटाग्रिड' उदाहरण भी आपके कोड के साथ मेरे लिए ठीक काम करता है। –

ग्रेट। जब आप अपने आवेदन में राउटर एनजी मॉड्यूल पेश करने का निर्णय लेते हैं तो आयात पर भी ध्यान दें। आपको राउटर मॉड्यूल में क्लारिटी मॉड्यूल आयात करने की भी आवश्यकता होगी। –

import {ClarityModule} from 'clarity-angular';

nee कोणीय 2 नवीनतम संस्करण

स्रोत

2016-11-29 12:58:54 anshuVersatile

आप मुझे बता सकते हैं वास्तव में क्या मैं systemjs.config.js में जोड़ने के लिए है? मैंने कॉन्फ़िगरेशन के अनुभाग को मैप करने के लिए स्पष्टता-angular.min.js पथ जोड़ने का प्रयास किया है, लेकिन यह –

क्लियरिटी डिज़ाइन सिस्टम

उत्तर

संबंधित मुद्दे