Question

我正在尝试创建一个名为my-checklist的组件，但我在运行它时遇到了问题。

我已在<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files" staticCompressionEnableCpuUsage="0" staticCompressionDisableCpuUsage="100" staticCompressionIgnoreHitFrequency="true"> <clear/> <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" staticCompressionLevel="10" dynamicCompressionLevel="3" /> <scheme name="deflate" dll="%Windir%\system32\inetsrv\gzip.dll" staticCompressionLevel="10" dynamicCompressionLevel="3" /> <staticTypes> <clear/> <add mimeType="text/*" enabled="true" /> <add mimeType="message/*" enabled="true" /> <add mimeType="application/x-javascript" enabled="true" /> <add mimeType="application/javascript" enabled="true" /> <add mimeType="*/*" enabled="false" /> </staticTypes> </httpCompression> <urlCompression doStaticCompression="true" doDynamicCompression="false" dynamicCompressionBeforeCache="false" />中声明了新模块以及导入它，但它似乎无法找到我的html文件。

我得到的错误是：

app.ts

Microsoft documentation

Answer 1

尝试加载checklist.component.html时，网址与您的index.html相关，这就是失败的原因。只需将其更改为

即可

@Component({
  selector: 'my-checklist',
  templateUrl: 'src/checklist.component.html'
})

这将使它工作。但是，我建议您找到一种方法来转换变量中的模板并避免相对路径问题。我不知道typescript，但我知道Babel这样做，也许这会有效。

import template from './checklist.component.html';

@Component({
  template: template,
  selector: 'my-checklist'
})

例如，如果使用Babel，则在transpiled之后，import将如下所示

var template = '<p>Test</p>';

太棒了，嗯？

检查其他问题，可能会有所帮助

Is it possible to import an HTML file as a string with TypeScript?
How to import external HTML files into a TypeScript class

Answer 2

问题在于您的app.ts。

您尝试打开组件但链接到您的模块无法找到您的HTML的应用程序，因为您将其链接到您的app.ts而不是您的component.ts。

在你的app.ts中你说

library(tidyverse) mtcars %>% tbl_df() %>% rownames_to_column("car") %>% mutate(top_speed = ifelse("top_speed" %in% names(.), top_speed, NA), mpg = ifelse("mpg" %in% names(.), mpg, NA)) %>% select(car, top_speed, mpg, everything()) # # A tibble: 32 x 13 # car top_speed mpg cyl disp hp drat wt qsec vs am gear carb # <chr> <lgl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> # 1 Mazda RX4 NA 21 6 160.0 110 3.90 2.620 16.46 0 1 4 4 # 2 Mazda RX4 Wag NA 21 6 160.0 110 3.90 2.875 17.02 0 1 4 4 # 3 Datsun 710 NA 21 4 108.0 93 3.85 2.320 18.61 1 1 4 1 # 4 Hornet 4 Drive NA 21 6 258.0 110 3.08 3.215 19.44 1 0 3 1 # 5 Hornet Sportabout NA 21 8 360.0 175 3.15 3.440 17.02 0 0 3 2 # 6 Valiant NA 21 6 225.0 105 2.76 3.460 20.22 1 0 3 1 # 7 Duster 360 NA 21 8 360.0 245 3.21 3.570 15.84 0 0 3 4 # 8 Merc 240D NA 21 4 146.7 62 3.69 3.190 20.00 1 0 4 2 # 9 Merc 230 NA 21 4 140.8 95 3.92 3.150 22.90 1 0 4 2 # 10 Merc 280 NA 21 6 167.6 123 3.92 3.440 18.30 1 0 4 4

应该是

bootstrap: [ App ]

尝试并关注https://angular.io/tutorial，如果没有那么你可以结帐的演示。

有一段时间做了一个傻瓜：https://plnkr.co/edit/1v0cd9y8BZ0KTQUDlhik?p=preview还注意到plunker出于某种原因需要src / * .html。正常你使用./为此。

Angular2，尝试添加新模块时出错

2 个答案: