用于将Angular2应用程序连接到HTML页面的<script>标记

Question

这是我尝试制作最小的Angular2应用程序。

＆＃xA;＆＃xA;

我希望＆lt; h1＆gt; Hello Angular＆lt; / h1＆gt; 出现而不是＆lt; my-app＆gt;正在加载？＆lt; / my-app＆gt; 。

＆＃xA;＆＃xA;

app.html：

＆＃xA;＆＃xA;

 ＆lt;！ DOCTYPE html＆gt;＆＃xA;＆lt; html lang =“en”＆gt;＆＃xA;＆lt; head＆gt;＆＃xA; ＆lt; meta charset =“UTF-8”＆gt;＆＃xA; ＆lt; script src =“app.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; title＆gt;测试页＆lt; / title＆gt;＆＃xA;＆lt; / head＆gt;＆＃xA;＆lt; body＆gt;＆＃xA;＆lt; my-app＆gt;正在加载？＆lt; / my-app＆gt;＆＃xA; ＆LT; / BODY＆GT;＆＃XA;＆LT; / HTML＆GT;＆＃XA;  

＆＃XA;＆＃XA;

app.ts：

＆＃XA;＆ #xA;

 从{@ angular / core'导入{Component};＆＃xA;＆＃xA; @Component（{＆＃xA; selector：' my-app'，＆＃xA;模板：`＆lt; h1＆gt; Hello {{name}}＆lt; / h1＆gt;`＆＃xA;}）＆＃xA;导出类AppComponent {＆＃xA; name ='Angular';＆＃xA;}＆＃xA;＆＃xA;从'@ angular / platform-b​​rowser-dynamic'导入{platformBrowserDynamic};＆＃xA;从'@ angular / core'导入{NgModule} ;＆＃xA;从'@ angular / platform-b​​rowser'导入{BrowserModule};＆＃xA;＆＃xA; @NgModule（{＆＃xA; imports：[BrowserModule]，＆＃xA;声明：[AppComponent] ，＆＃xA; bootstrap：[AppComponent]＆＃xA;}）＆＃xA;导出类AppModule {}＆＃xA;＆＃xA;＆＃xA; platformBrowserDynamic（）。bootstrapModule（AppModule）;＆＃xA;  

＆＃xA;＆＃xA;

tsconfig.json

＆＃xA;＆＃xA;

  {＆＃XA; “compilerOptions”：{＆＃xA; “目标”：“es5”，＆＃xA; “module”：“commonjs”，＆＃xA; “moduleResolution”：“node”，＆＃xA; “sourceMap”：true，＆＃xA; “emitDecoratorMetadata”：true，＆＃xA; “experimentalDecorators”：true，＆＃xA; “lib”：[“es2015”，“dom”]，＆＃xA; “noImplicitAny”：是的，＆＃xA; “suppressImplicitAnyIndexErrors”：true＆＃xA; }，＆＃XA; “排除”：[＆＃xA; “node_modules”，＆＃XA; “jspm_packages” ＆＃XA; ]＆＃xA;}＆＃xA;  

＆＃xA;＆＃xA;

目前，我正在

＆＃xA;＆＃xA;

  app.ts：1 Uncaught ReferenceError：require未定义＆＃xA;在app.ts：1＆＃xA;  

＆＃xA;＆＃xA;

我怀疑我应该使用 require 功能。或者，也许，我必须启用一些打字稿设置，以便将所有内容转换为单个js文件。

＆＃xA;＆＃xA;

作为一个额外的问题，我想尽可能减少此代码尽可能。我是否真的需要该模块和引导工作来使组件工作？我真的需要 tsconfig.json 吗？

＆＃xA;＆＃xA;

更新

＆＃xA;＆＃xA;

我给了up，使用 https://github.com/angular/quickstart 。

＆ #xA;＆＃xA;

我不喜欢的是我必须加载几个脚本，目的是我不明白：为什么垫片，区域是由脚本标签加载的，为什么我无法加载 main.js 这样等等......

＆＃xA;＆＃xA;

到现在为止。我会用它作为起点。

＆＃XA;