Création d'une application Angular 2 avec Clarity Design System

Je reçois cette erreur après avoir ajouté Clarity Design System de tutorial à 2 5min quickstart. L'erreur dans la console du navigateur n'aide pas trop, aucun conseil s'il vous plaît?Création d'une application Angular 2 avec Clarity Design System

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

Source

2016-11-29 Igor D.

MISE À JOUR Ajouter clarity-angular à map et package sections. Voir l'exemple ci-dessous.

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

Si vous utilisez les directives de Clarity directement dans votre principale, vous devez app.component.htmlimport { ClarityModule } from 'clarity-angular'; et également ajouter à ClarityModule@NgModule imports. Si vous devez utiliser des directives de clarté dans un routeur, vous devez également importer ClarityModule en vous module de routeur d'application

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 {}

Source

2016-11-29 14:39:42

Ce 'system.config' a résolu mon problème. Et l'exemple 'clr-datagrid' de Clarity Project fonctionne aussi bien pour moi avec le code vôtre. –

Génial. Faites également attention aux importations lorsque vous décidez d'introduire un routeur NgModule dans votre application. Vous devrez également importer ClarityModule dans le module Routeur. –

import {ClarityModule} from 'clarity-angular';

nee ds plus en systemjs.config pour angulaire 2 dernière version

Source

2016-11-29 12:58:54 anshuVersatile

pourriez-vous me dire exactement ce que je dois ajouter systemjs.config.js? J'ai essayé d'ajouter le chemin de clarté-angular.min.js pour mapper la section de config, mais cela n'a pas fonctionné –

Création d'une application Angular 2 avec Clarity Design System

Répondre

Questions connexes