{"id":16199667,"url":"https://github.com/or13/waltg","last_synced_at":"2025-04-07T17:45:21.888Z","repository":{"id":95128055,"uuid":"51597424","full_name":"OR13/WALTG","owner":"OR13","description":"Webpack Angular Less TypeScript Gulp","archived":false,"fork":false,"pushed_at":"2016-02-12T23:58:28.000Z","size":154,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-13T19:49:06.253Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OR13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-12T15:35:19.000Z","updated_at":"2016-05-12T22:27:52.000Z","dependencies_parsed_at":"2023-05-01T10:02:22.064Z","dependency_job_id":null,"html_url":"https://github.com/OR13/WALTG","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OR13%2FWALTG","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OR13%2FWALTG/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OR13%2FWALTG/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OR13%2FWALTG/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OR13","download_url":"https://codeload.github.com/OR13/WALTG/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247703366,"owners_count":20982281,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T09:27:03.898Z","updated_at":"2025-04-07T17:45:21.863Z","avatar_url":"https://github.com/OR13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack Angular Less TypeScript Gulp\n\nThis repo is for understanding TypeScript Angular Gulp Module Namespace toxic stews you may encounter in the wild.\n\nIf you've been working with TypeScript for a while, you might have a nasty mix of Internal Modules (now called Namespaces), Ambient Type References, External Modules, and ES6 imports...\n\nWith large projects its often not possible to get \"there\" from \"here\".\n\nWhere \"there\" is the the new hotness, and \"here\" is a pile of code written by a younger, stupider version of yourself.\n\nIts not reasonable to break a production system, but some upgrades take a long time.\n\nYou need a plan! But first, read up:\n\nhttp://stackoverflow.com/questions/30357634/how-do-i-use-namespaces-with-typescript-external-modules\n\nhttps://github.com/Microsoft/TypeScript/issues/2242\n\nGoogle TypeScript Internal Modules Namespaces ES6 Import, reference, etc...\n\nCool, so depending on your gulp / grunt / webpack setup, some things will work, others will not.\n\nIf you want to use ES6 imports, you will need to compile typescript with --module flag.\n\nthat looks like this:\n\n```\n{\n  \"buildOnSave\": false,\n  \"compileOnSave\": false,\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"module\": \"commonjs\"\n  }\n}\n```\n\nLets say you didn't read the first link where it clearly says:\n\n```\nDo not use \"namespaces\" in external modules. Don't do this. Seriously. Stop.\n```\n\nLets say you were like:\n\nfuck that, I don't know what external modules are, I like being able to compile my typescript files, and bind all my controllers with one line:\n\n```\n\nangular.module('waltg', [\n  'ngAnimate',\n  'ngCookies',\n  'ngTouch',\n  'ngSanitize',\n  'ngMessages',\n  'ngAria',\n  'ngResource',\n  'ngRoute',\n  'ui.bootstrap',\n  'toastr'\n])\n\n  .config(config)\n  .config(routerConfig)\n  .run(runBlock)\n\n  .service(waltg)\n  .controller(waltg)\n\n  // .directive(waltg.Directives) will never work, don't even try.\n\n\n```\n\nIn your pitfull pre external modules world, you probably have shit like this:\n\n\n```\n\nnamespace waltg {\n\n/** @ngInject */\nexport function testOtherDirective2 ($log: angular.ILogService, $timeout: angular.ITimeoutService, $rootScope: angular.IRootScopeService) : angular.IDirective  {\n  return {\n    template: `\u003ch2\u003etestOtherDirective2\u003c/h2\u003e`,\n    restrict: 'A',\n    link: function (scope:any, $el:any, attrs:any) {\n\n      $log.log('testOtherDirective....')\n    }\n  };\n};\n\n}\n\n\n```\n\nMaybe you are compiling typescript with gulp like :\n\n```\ngulp.task('typescripts-scripts', ['tsd:install'], function () {\n  mkdirp.sync(options.tmp);\n\n  return gulp.src(options.src + '/app/**/*.ts')\n      .pipe($.sourcemaps.init())\n      .pipe($.tslint())\n      .pipe($.tslint.report('prose', { emitError: false }))\n      .pipe($.typescript({sortOutput: true})).on('error', options.errorHandler('TypeScript'))\n      .pipe($.sourcemaps.write())\n      .pipe($.ngAnnotate())\n      .pipe($.toJson({filename: options.tmp + '/sortOutputTypeScripts.json', relative:true}))\n      .pipe(gulp.dest(options.tmp + '/serve/app'))\n      .pipe(browserSync.reload({ stream: true }))\n      .pipe($.size());\n});\n\ngulp.task('scripts', ['typescripts-scripts'], function () {\n\n```\n\nThats all fine and dandy, but you haven't read the first link yet, it clearly says:\n\n```\nDo not use \"namespaces\" in external modules. Don't do this. Seriously. Stop.\n```\n\nNow what?\n\nGood news! You can indeed upgrade incrementally, in a project with a million files in it.\n\nFirst, put an export in front of you namespace so it can be an external module!\n\n```\n\nexport namespace waltg {\n\n/** @ngInject */\nexport function testOtherDirective2 ($log: angular.ILogService, $timeout: angular.ITimeoutService, $rootScope: angular.IRootScopeService) : angular.IDirective  {\n  return {\n    template: `\u003ch2\u003etestOtherDirective2\u003c/h2\u003e`,\n    restrict: 'A',\n    link: function (scope:any, $el:any, attrs:any) {\n\n      $log.log('testOtherDirective....')\n    }\n  };\n};\n\n}\n\n```\n\nGreat, now everything is broken.\n\nYou need to start compiling with --module, which means you are gonna need a module loader...\n\nUse Webpack.\n\nLots of things will change, I'm not saying this is easy. Use this repo as a reference for the \"their\" part.\n\nYour new angular module will look like this:\n\n```\nangular.module('waltg', [\n  'ngAnimate',\n  'ngCookies',\n  'ngTouch',\n  'ngSanitize',\n  'ngMessages',\n  'ngAria',\n  'ngResource',\n  'ngRoute',\n  'ui.bootstrap',\n  'toastr'\n])\n  .constant('malarkey', malarkey)\n  .constant('moment', moment)\n  .config(config)\n  .config(routerConfig)\n  .run(runBlock)\n\n  // This shit is ugly, but it works, and its close to what you had before, the import has to go at the top obivously.\n  // import * as testOtherDirective2 from '../app/patterns/testOtherDirective2';\n  .directive('testOtherDirective2', testOtherDirective2.waltg.testOtherDirective2)\n\n  // This is what you want, the import goes at the top\n  // import { testDirective } from '../app/patterns/testDirective';\n  .directive('testDirective', testDirective);\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2For13%2Fwaltg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2For13%2Fwaltg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2For13%2Fwaltg/lists"}