Typescript-filer visas inte i Angular 2 CLI-projekt när man använder Chrome webbutvecklarverktyg

Jag har genererat ett TypeScript-projekt med Angular2 CLI (ember CLI). Jag använder Chromium Web Developer-verktyg för att felsöka. Jag har valt "aktivera JavaScript-källkartor" i inställningarna för Developer Tools. Jag ser .js-filer och .ts-filer listade i källvyn. Däremot visas .ts (TypeScript) filer som tomma när jag väljer dem, alltså som om de inte går att hitta.

Skärmutskrift som visar situationen:

Jag kan se texten i .js-filerna om jag väljer dem.

.ts-filerna kopieras inte till dist-katalogen, och detta verkar vara ett problem för mig, men jag har sett exempel någon annanstans som visar typiska Angular2 CLI dist-strukturer och de har inte .ts-filer heller.

Relevant del av min "tsconfig.json" som visar att jag har källkartläggning aktiverad:

 1   "compileOnSave": false,                                                                            
  2   "compilerOptions": {                                                                               
  3     "declaration": false,                                                                            
  4     "emitDecoratorMetadata": true,                                                                   
  5     "experimentalDecorators": true,                                                                  
  6     "mapRoot": "",                                                                                   
  7     "module": "system",                                                                              
  8     "moduleResolution": "node",                                                                      
  9     "noEmitOnError": true,                                                                           
 10     "noImplicitAny": false,                                                                          
 11     "outDir": "../dist/",                                                                            
 12     "rootDir": ".",                                                                                  
 13     "sourceMap": true,                                                                               
 14     "sourceRoot": "/",                                                                               
 15     "target": "es5"                                                                                  
 16   },

js.map-filer skapas och ligger i dist-mappen bredvid .js-filerna.

Exempel på mappningsfil (del):

{"version":3,"file":"app.js","sourceRoot":"/","sources":["app.ts"],"names":[],"mappings":";;;;;;;;;;;;;YAGA,mB

Jag har försökt:
1) kopiera .ts-filerna från src till dist.
2) olika försök att redigera app.js.map-filen manuellt, t.ex. sourceRoot och sources.

Det är inte helt klart vad "/" hänvisar till i js.map-filen: projektets src-katalog eller dist-katalogen? Om jag redigerar en .js.map-fil, måste jag uppdatera min webbläsare för att plocka upp ändringen?

Jag tror att det grundläggande problemet är att det letar efter ts-filerna i src-katalogen, och detta är utanför webbläsarens räckvidd (eftersom det är placerat på "../src").

Chromium visar sökvägen för ts-filen som "http://localhost:4202/app/cpp-scenes.ts". Men när jag lägger .ts-filen där händer ingenting.

Jag vet inte om detta är ett js-kartläggningsproblem, ett Angular 2-problem, ett Angular2 CLI-problem eller ett typescript-problem.

Det är bara riktigt jobbigt när konsolen säger "fel på rad 52 i blah.ts", men jag kan inte hoppa dit och sätta en brytpunkt osv.

Har någon annan haft någon tur med att få källmappning att fungera i ett Angular2 CLI-projekt?

Svar #1

Jag kunde få detta att fungera. Du måste lägga till Angular CLI src-mappen till ditt arbetsutrymme, och sedan har du "map to network resource" på en av dina .ts-filer.

Obs: detta exempel antar fallet där klienten och servern körs på samma maskin. Om du har situationen där klienten är på en Windows-maskin, men servern körs på Linux till exempel, då måste du på klientmaskinen montera Linux-serverns källkatalog som en Windows-share och sedan specificera något i stil med

\\192.168.1.134\myShare\myProject\src\client

som din arbetsmapp.

Jag var tvungen att göra detta nyligen, och även om det är lite mer komplicerat, fungerar det i grunden på samma sätt som det lokala fallet

Jag tog skärmdumpar av hela processen, så det är förmodligen enklast att bara visa dessa.

  1. Välj en av ts-filerna som finns under din dist-katalog (som motsvarar katalogen som ng serve serverar från) och välj "Lägg till mapp i arbetsytan":

  1. Välj din src/client-mapp:

  2. Säg "Tillåt" till nästa prompt för att tillåta utvecklingsverktyg att komma åt src-katalogen:

  3. Observera att mappen src nu listas under Dev Tools-källor. Du kan nu bläddra bland alla ts-filer (inte bara den du lade till), men eventuella brytpunkter du ställer in kommer inte att träda i kraft förrän du "upprättar en mappning":

  4. Du kan aktivera mappningen som visas i de två nästa skärmavbilderna:

Välj lämplig mappning och klicka på den för att aktivera

Nu kan jag sätta en brytpunkt i .ts-filen och undersöka felmeddelanden i .ts-koden.

Den grundläggande knepet är att du måste lägga till käll-ts-filens katalog i Chrome manuellt, eftersom filerna inte ligger under serverkatalogen. Mappningen förblir i kraft tills du antingen manuellt tar bort den (genom att högerklicka på en .ts-fil och välja "ta bort nätverksmappning") eller tills du stänger webbläsaren (den behåller dock mappningen vid uppdateringar).

Svar #2

Introduktion:

Jag är den ursprungliga upphovsposten och leverantören av svaret som publicerades den 2016-06-04.

Jag har nyligen upptäckt ett enklare sätt att få detta att fungera. Jag postar detta som ett andra svar eftersom mitt ursprungliga svar fortfarande fungerar, och vissa kanske föredrar det. Men jag tror att det nya sättet jag är på väg att beskriva är lite lättare.

Lösningsöversikt:

I princip kan du ställa in allt under DeveloperTools->Settings->Workspace-menyn, istället för att högerklicka på allt. Högerklickandet i mitt ursprungliga svar är i princip bara ett annat sätt att fylla i detta arbetsutrymmesformulär.

  1. Du vill gå in i DeveloperTools->Inställningar-dialogen på följande sätt:

  1. Gå sedan till avsnittet Workspace och fortsätt med antingen Local Server Solution eller Remote Server Solution som beskrivs härnäst.

Lokal serverlösning:

Här är några skärmavtryck för när din server och webbläsare körs på samma maskin:

  1. Från arbetsytans dialog, lägg till katalogen 'src/client' i ditt projekt, och en mappning till '/'. Här är ett exempel på hur det bör se ut när servern ('ng serve') och webbläsaren är på samma maskin:

Fjärrserverlösning:

Här är några skärmdumpar för när din server och webbläsare körs på olika maskiner:

  1. Om din server körs på Linux, men din webbläsare körs på en annan dator, till exempel Windows, kan du skapa en Samba-delning på din Linux och montera den som en enhet på din Windows.

Från ett Windows-kommandofönster (faktiskt git bash-skal):

>$ net view  
Server Name            Remark
-------------------------------------------------------------------------------  
\\VT-VIRTUAL      vt-virtual-machine server (Samba, Linux Min  
The command completed successfully.

>$ net use l: '\\vt-virtual\vtstuff'

  1. Ställ sedan in ditt arbetsutrymme så att det ser ut ungefär så här:

Slutsats:

Att göra det på detta sätt behåller informationen över webbläsarcykler, så du bör bara behöva göra det en gång. Kanske hade personen som skrev den 2016-07-30, där han sa att det fungerade för honom "direkt ur lådan", på något sätt redan detta arbetsutrymmesform uppsatt.

Jag förstår nu att detta är ett Chrome Developer Tools konfigurationsproblem och har ingenting att göra med Angular2 eller Angular2 CLI. Det är bara det att personer som använder Angular2 CLI behöver göra denna arbetsytetaktningsmappning eftersom källfilerna (.ts) inte är direkt tillgängliga i körmiljön (dist)-katalogen.

Relaterade artiklar