clarity-angular not found (404 error) - node.js

Question

json:
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"#angular/common": "~4.0.0",
"#angular/compiler": "~4.0.0",
"#angular/core": "~4.0.0",
"#angular/forms": "~4.0.0",
"#angular/http": "~4.0.0",
"#angular/platform-browser": "~4.0.0",
"#angular/platform-browser-dynamic": "~4.0.0",
"#angular/router": "~4.0.0",
"#webcomponents/custom-elements": "^1.0.0-alpha.3",
"angular-in-memory-web-api": "~0.3.0",
"clarity-angular": "^0.8.12",
"clarity-icons": "^0.8.12",
"clarity-ui": "^0.8.12",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.8.4"
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "~2.1.0",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"#types/node": "^6.0.46",
"#types/jasmine": "2.5.36"
},
"repository": {}
}
I was integrating clarity package with my angular 2 app. I have folloowed each steps and installed the clasrity-angular with npm install clarity-angular --save command, which is the last step. My 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.forRoot(),
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
But whenever I add the line ClarityModule.forRoot(), am getting an error saying,
Failed to load resource: the server responded with a status of 404 (Not Found)
Any idea guys? Thanks in advance

Answer 1

As you are using Systemjs you should configure systemjs config properly:
System.config({
...
map: {
...
'clarity-angular': 'node_modules/clarity-angular/clarity-angular.umd.js',
},
...
});