mrsan22
mrsan22

Reputation: 747

Error: (SystemJS) XHR error (404 Not Found) for angular2-tag-input (External library)

enter image description here

I am getting this 404 Error when I am importing one of the modules from angular2-tag-input as shown below:

import {RlTagInputModule} from 'angular2-tag-input';

Earlier I was having version issues while doing an NPM install for angular2-tag-input as it requires a specific version of core angular2 lib. I made changes in my package.json and installed the required dependencies and then installed angular2-tag-input. It installed it correctly (no warning or errors). Here is my package.json:

    {
  "name": "Bioshoppe",
  "version": "1.0.0",
  "author": "Sanjiv Kumar",
  "description": "Bioshoppe Application",
  "scripts": {
    "clean": "rimraf app/**/*.js app/**/*.js.map",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "prestart": "npm run clean",
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" "
  },
  "peerDependencies": {
    "@angular/common": "2.2.4",
    "@angular/core": "2.2.4",
    "@angular/forms": "2.2.4"
  },
  "dependencies": {
    "@angular/common": "2.2.4",
    "@angular/compiler": "2.2.4",
    "@angular/compiler-cli": "2.2.4",
    "@angular/core": "2.2.4",
    "@angular/forms": "2.2.4",
    "@angular/http": "2.2.4",
    "@angular/platform-browser": "2.2.4",
    "@angular/platform-browser-dynamic": "2.2.4",
    "@angular/router": "3.0.0",
    "angular2-tag-input": "^1.2.3",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "^0.19.27",
    "zone.js": "0.6.23"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.41",
    "concurrently": "2.2.0",
    "lite-server": "2.2.2",
    "@angular/platform-server": "2.2.4",
    "awesome-typescript-loader": "^2.2.3",
    "codelyzer": "~0.0.26",
    "node-sass": "^3.10.1",
    "postcss-loader": "^0.13.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.4",
    "sass-loader": "^4.0.2",
    "source-map-loader": "^0.1.5",
    "tslint": "3.13.0",
    "typescript": "2.0.10",
    "webpack": "^2.1.0-beta.21",
    "webpack-dev-server": "^2.1.0-beta.0"
  }
}

When I included below import in my app.module and used that library under imports in NgModule, I started getting an error (see snapshot).

    import {RlTagInputModule} from 'angular2-tag-input';
    .
    .

@NgModule({
    imports: [
        BrowserModule,
        routing,
        HttpModule,
        FormsModule,
        **RlTagInputModule**
    ],
    .
    .

Please let me know what mistake I am making.

Thanks!

Upvotes: 0

Views: 156

Answers (0)

Related Questions