All geek questions in one place

Creating an Angular 2 Definition Application

I get this error after adding the Clarity Design System from the official tutorial to angular 2 5min quickstart . Error in browser console doesn’t help too much, please advice?

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);
+5
source share
2 answers

UPDATED Add clarity-angular sections to map and package . See the example below.

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

If you use the Clarity directives directly in the main app.component.html , you need to import { ClarityModule } from 'clarity-angular'; as well as add ClarityModule to @NgModule imports . If you need to use the Clarity directives under the router, you must also import the ClarityModule into your application router module.

 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 {}
+6
source 
 import {ClarityModule} from 'clarity-angular';

required to add to latest systemjs.config for angular 2 latest version

0
source

Source: https://habr.com/ru/post/1260519/

More articles:


All Articles