title: How to use external typescript libraries on client side?
body: <p>I've followed this guide: <a href="https://westerndevs.com/TypeScript-with-AMD-and-Gulp/" rel="nofollow noreferrer">How to compile Typescript into a single file with amd modules with gulp</a>.</p>
  
  <p>App.ts</p>
  
  <pre><code>import { CreateModel } from "./Models/CreateModel";
  import { CreateView } from "./Views/CreateView";
  import { CreateController } from "./Controllers/CreateController";
  
  export class App {
      public init() {
          const model = new CreateModel();
          const view = new CreateView(model);
          const controller = new CreateController(model, view);
      }
  }
  </code></pre>
  
  <p>CreateController.ts</p>
  
  <pre><code>export class CreateController {
      private model: CreateModel;
      private view: CreateView;
  
      constructor(model: CreateModel, view: CreateView) {
          this.model = model;
          this.view = view;
  
          this.init();
      }    
  
      more code...
  }
  </code></pre>
  
  <p>CreateView.ts</p>
  
  <pre><code>import { CreateModel } from "../Models/CreateModel";
  
  export class CreateView {
      private model: CreateModel;
  
      constructor(model: CreateModel) {
          this.model = model;
  
          this.init();
      }    
  
      more code...
  }
  </code></pre>
  
  <p>CreateModel.ts</p>
  
  <pre><code>export class CreateModel {
      more code...
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;script src="~/Scripts/config.js"&gt;&lt;/script&gt;
  &lt;script data-main="main" src="~/Scripts/require.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>config.js</p>
  
  <pre><code>var require = {
      baseUrl: "../../Scripts/",
      paths: {
          'App': 'app'
      }
  };
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>requirejs(['App'], function (MyApp) {
      var app = new MyApp.App();
      app.init();
  });
  </code></pre>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
    "compileOnSave": true,
    "compilerOptions": {
      "lib": [ "es2017", "dom" ],
      "moduleResolution": "node",
      "module": "amd",
      "noImplicitAny": true,
      "noEmitOnError": true,
      "noUnusedLocals": false,
      "noUnusedParameters": false,
      "outFile": "./Scripts/app.js",
      "removeComments": false,
      "sourceMap": true,
      "target": "es5"
    },
    "files": [
      "Scripts/Typescripts/App.ts"
    ],
    "exclude": [
      "node_modules"
    ],
    "include": [
      "./Scripts/Typescripts/**/*"
    ]
  }
  </code></pre>
  
  <p>This works fine and everything compiles into ~/Scripts/app.js. Now I want to add an external library to this. It's <a href="https://www.npmjs.com/package/ts.validator.fluent" rel="nofollow noreferrer">ts.validator.fluent</a> and it's on npm. How can I use this on the client side?</p>
  
  <p>I've tried to download the files from Github, put it in a separate folder and then import:</p>
  
  <p>CreateController.ts</p>
  
  <pre><code>import { IValidator, Validator, ValidationResult } from './Plugins/ts.validator.fluent';
  export class CreateController {
      ...
      private checkEmail(validateVm: ValidateVm) {
  
          let validationResult = new Validator(validateVm.value).Validate(ValidateRules.email);
  
      ...
      }
  }
  </code></pre>
  
  <p>But when I run this I get the following error:</p>
  
  <pre><code>Failed to load resource: the server responded with a status of 404 (Not Found)
  
  Uncaught Error: Script error for "Plugins/ts.validator.fluent", needed by: Controllers/CreateController
  </code></pre>
  
  <p>What's the best approach here?</p>