angular - Sökväg till extern komponentmall eller css vid kompilering av TypeScript till outDir

När jag kodar Angular 2-appar innehåller min tsconfig.json-fil följande parameter:

"outDir": "dist"

vilket innebär att TypeScript-till-JavaScript-kompileringen kommer att lagra genererade filer i dist-mappen.

Mitt problem är när jag försöker använda komponenter som har en extern mall- eller CSS-fil och som använder komponentrelativa sökvägar, så här:

@Component({
  moduleId: module.id,
  selector: 'my-cmp',
  templateUrl: 'my.component.html',
  styleUrls:  ['my.component.css']
})
export class MyComponent { }

Webbläsaren försöker ladda .html och .css filer från samma mapp där den transpilerade JavaScript-filen finns — under dist. Men dessa filer finns endast i den ursprungliga mappen (där den ursprungliga TypeScript-filen är placerad).

Hur löser man detta?

Obs: Koden fungerar om jag tar bort moduleId: module.id och använder absoluta sökvägar, t.ex. app/my-cmp/my.component.html, men det är inte vad jag vill. ;-)

Svar #1

Eftersom du vill att ditt JavaScript ska skickas ut till dist-mappen, förmodligen för distribution, kan du skapa ett skript som kopierar HTML och CSS till dist-mappen också. Vanligtvis kan du köra någon form av minifiering på dessa filer som gör det mer meningsfullt att göra det.

Ett annat alternativ är att referera till dessa sökvägar relativt genom root-katalogen. Så till exempel, om du har en fil /someDir/myfile.ts och /someDir/my.component.html, kan du referera till my.component.html genom att göra ../someDir/my.component.html. Det fungerar om /someDir/myfile.ts går till /dist/myfile.js. Nackdelen med detta är att det förmodligen blir irriterande att göra när ditt projekt växer, så jag skulle inte rekommendera det.

Svar #2

module.id är bara sökvägen till den genererade JavaScript-filen (t.ex. http://localhost:8080/dist/app/my.component.js). Du kan utelämna dist med module.id.replace('dist', '') för att uppnå det du vill:

@Component({
  moduleId: module.id.replace('dist', ''),
  selector: 'my-cmp',
  templateUrl: 'my.component.html',
  styleUrls:  ['my.component.css']
})

Relaterade artiklar