blocks|key|4496804|text|index.html|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|4496805|请确保添加以下内容。|4496806|<script+src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>


<script+src="https://code.angularjs.org/tools/system.js"></script>
//+error+reason+can+be+missing+of+this+reference.


<script+src="https://code.angularjs.org/tools/typescript.js"></script>
<script+src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script+src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"></script>
<script+src="https://code.angularjs.org/2.0.0-beta.7/http.min.js"></script>
<script+src="https://code.angularjs.org/2.0.0-beta.7/router.dev.js"></script>|code-block|syntax|javascript|4496807|entityMap^0|0|A|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p><strong><em>index.html</em></strong></p>

<p>make sure to add following.</p>

<pre><code>&lt;script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"&gt;&lt;/script&gt;


&lt;script src="https://code.angularjs.org/tools/system.js"&gt;&lt;/script&gt;
// error reason can be missing of this reference.


&lt;script src="https://code.angularjs.org/tools/typescript.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/2.0.0-beta.7/http.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/2.0.0-beta.7/router.dev.js"&gt;&lt;/script&gt;
</code></pre>


blocks|key|1135410|text|您需要将SystemJS包含到您的HTML页面中。要使您的Angular2应用程序从node_modules文件夹中运行，至少需要：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1135411|<script+src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script+src="node_modules/systemjs/dist/system.src.js"></script>+<!---
<script+src="node_modules/rxjs/bundles/Rx.js"></script>
<script+src="node_modules/angular2/bundles/angular2.dev.js"></script>|code-block|syntax|javascript|1135412|并配置SystemJS以加载已编译的TypeScript+(实际上是具有js扩展的JavaScript+js)。就像这样：|1135413|<script>
++System.config({
++++map:+{
++++++app:+'assets/js/app'
++++},
++++packages:+{++++++++
++++++app:+{
++++++++format:+'register',
++++++++defaultExtension:+'js'
++++++}
++++}
++});
</script>|1135414|这种配置意味着，当您尝试从app/开始导入某些模块时，SystemJS将加载相应的JS文件(从TypeScript+one编译)。例如：System.import('app/main');将加载app/main.js文件。|1135415|这意味着您之前需要编译TypeScript文件。启动npm+run+start命令时，tsc编译器将在后台自动启动，并在检测到更改时将TypeScript文件编译成JS文件。您可以检查编译器是否已实际启动，并创建了JS文件.|1135416|entityMap^0|16|C|0|0|10|2|1G|2|0|0|D|4|1W|Q|2P|B|0|Q|D|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|T|$]]

<p>You need to have SystemJS included into your HTML page. To make work your Angular2 application from your <code>node_modules</code> folder, you need at least:</p>

<pre><code>&lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
&lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt; &lt;!---
&lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
&lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
</code></pre>

<p>And configure SystemJS to load your compiled TypeScript (actually JavaScript one with a <code>js</code> extension). Something like that:</p>

<pre><code>&lt;script&gt;
  System.config({
    map: {
      app: 'assets/js/app'
    },
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
&lt;/script&gt;
</code></pre>

<p>This configuration means that when you try to import some modules starting with <code>app/</code>, SystemJS will load corresponding JS file (compiled from TypeScript one). For example: <code>System.import('app/main');</code> will load the <code>app/main.js</code> file.</p>

<p>This means that you need to have compiled your TypeScript files before. When launching the <code>npm run start</code> command, the tsc compiler is automatically started in background and will compile TypeScript files into JS ones when changes will be detected. You can check that the compiler is actually started and you have the JS files created...</p>


blocks|key|4584680|text|这是angular2js:+Uncaught+Reference+Error:+System+is+not+defined的副本|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4584681|如果Angular2+Seed已经实现了injections和必需的libs+loading机制，那么您应该只使用这些方法。|style|CODE|4584682|如果您正在从scratch创建应用程序，您可以像上面所描述的那样包括您想要的lib。|4584683|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/33728887/angular2js-uncaught-reference-error-system-is-not-defined/42532134#42532134^0|2|1N|0|0|K|A|13|7|0|6|7|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@$A|W|B|X|F|G]|$A|Y|B|Z|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|10|8|@$A|11|B|12|F|G]]|9|@]|C|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

<p>This is a duplicate for <a href="https://stackoverflow.com/questions/33728887/angular2js-uncaught-reference-error-system-is-not-defined/42532134#42532134">angular2js: Uncaught Reference Error: System is not defined</a></p>

<p>In case of Angular2 Seed already implemented <code>injections</code> and required libs <code>loading</code> mechanism you should just use those methods.</p>

<p>In case of you are creating app from <code>scratch</code> you can include libs as you want as described above.</p>


<p>I tried to install Angular 2 for TypeScript according to this tutorial: <a href="https://angular.io/guide/quickstart" rel="nofollow noreferrer">https://angular.io/guide/quickstart</a></p>

<p>And I am getting this error:</p>

<blockquote>
  <p>ReferenceError: System is not defined System.config</p>
</blockquote>

<p>I don't know how this happens.</p>

<p>the folder structure:</p>

<pre><code>project
|-index.hml
|-assets
    |-js
    |- jquery
    |-app
       |-app.component.js
       |-app.component.ts
       |-app.component.js.map
       |-main.js
       |-main.ts
       |-main.js.map
</code></pre>


Angular with TypeScript: ReferenceError: System is not defined System.config

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

问使用TypeScript: ReferenceError: System未定义System.config
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用TypeScript: ReferenceError: System未定义System.configEN