Paketering av AngularJs TypeScript-app från Visual Studio

Jag skapar en webbapp med TypeScript, AngularJS och Bootstrap.

För detta ändamål använder jag Visual Studio Project Template HTML Application With TypeScript.

Projektsstruktur är:

  • app

    • modulA

      • kontrollmapp

        • controller.ts

        • kontrollerMapp
        • controller.ts

        • modulA
        • kontrollerMapp
        • kontroller.ts

        • view.html
      • moduleA.ts
    • modulB
    • modulC
    • app.ts
  • manus
  • css

App-mappen innehåller många *.ts-filer, därför kombinerar jag dessa filer till en enda fil my-app.js i Visual Studio med TypeScript Build > Combine Js output file to one.

Och inkludera denna skriptfil i index.html.

Självklart, om jag kör appen fungerar den inte.

Modulen 'app' är inte tillgänglig! Du har antingen stavat modulnamnet fel eller glömt att ladda den. Om du registrerar en modul, se till att du anger beroenden som det andra argumentet.

Jag använder inte RequireJs, AMD, Browserify eller en annan.

Jag vet inte om det är god praxis att kombinera Angular 'app' *.js-filer till en.

Så mina frågor är:

  • Vad är god praxis för detta scenario?
  • Kan jag slå ihop alla 'app' *.ts/*.js-filer till en enda fil?
  • Kan jag skapa en fungerande enda *.js-fil med Visual Studio utan att använda RequireJs, AMD, Browserify.
  • Om jag inte kan skapa en fungerande enskild fil med Visual Studio, kan jag uppnå detta till exempel med Gulp?

Svar #1

Du kan definitivt få alla dina *.ts-filer att transpileras till en enda JS-fil. Jag är inte säker på hur Visual Studio uppnår detta - jag gör detta med gulp-tsc-modulen och gulp (som jag kör med Task Runner Explorer-tillägget för VS2013).

Det kan finnas ett fel under transpileringsprocessen i ditt fall som förhindrar att den enda utdatafilen genereras korrekt... vilket du kanske kan se om du slår på detaljerad byggloggning i VS.

Alternativt kan du köra tsc själv från kommandoraden (med utdata till en enda fil) och se om du får några fel.

Det kan hända att du måste lägga till några fler referensvägsledtrådar så att tsc vet hur det ska transpilera det korrekt. Jag stötte på detta problem när klass A utökade B och källan för KlassA transpilerades/incluerades innan källan för KlassB. Det visar sig att tsc inte är tillräckligt smart för att känna igen sådana situationer, så jag var tvungen att uttryckligen lägga till följande i källan för KlassA:

/// <reference path="../foo/bar/ClassB.ts"/>