javascript - Angular 2 : importing router bundle-6ren

javascript - Angular 2 : importing router bundle

转载作者：行者123 更新时间：2023-12-02 15:08:54

25

4

我很困惑为什么我无法将路由器作为依赖项导入。在控制台中我收到错误:

system.js:4 GET http://127.0.0.1:8000/angular2/src/platform/dom/dom_adapter.js 404 (Not Found)

看看谷歌的例子，他们使用几乎相同的设置，所以我不太确定我哪里出了问题。如果我注释掉路由器的导入，一切都会按预期工作。

index.html:

<body>
    <main>Loading...</main>

    <script src="lib/traceur-runtime.js"></script>
    <script src="lib/system.js"></script>
    <script src="lib/Reflect.js"></script>

    <script>
        System.config({defaultJSExtensions: true});
    </script>

    <script src="lib/angular2.js"></script>
    <script src="lib/router.js"></script>

    <script>
        System.import('index').catch(console.log.bind(console));
    </script>
</body>

index.js:

import {Component, View, bootstrap} from 'angular2/angular2';
import {routerInjectables} from 'angular2/router';
import {stepOne} from 'step-one/step-one';

@Component({
    selector: 'main'
})

/*@RouteConfig([
    {path: '/', name: 'StepOne', component: stepOne, useAsDefault: true}
])*/

@View({
    template: `
    <h1>INIT</h1>
    <router-outlet></router-outlet>
    `
})

class Main {
    constructor(){}
}

bootstrap(Main, [routerInjectables]);

最佳答案

看来您的代码中有很多错误，但这里很少......

使用下面给出的内容更正您的导入，因为 angular2 现在处于测试阶段......

import {bootstrap} from 'angular2/platform/browser';
import {Component, View} from 'angular2/core';

您还没有提供路由器指令，请从此处导入该指令并将其添加到指令列表中。

import {ROUTER_DIRECTIVES, RouteParams, ROUTER_PROVIDERS} from 'angular2/router';

在index.ts中使用它的更好方法

    @Component({
        selector: 'main',
        template: `
        <h1>INIT</h1>
        <router-outlet></router-outlet>`, 
        directives: [ROUTER_DIRECTIVES],
    })
@RouteConfig([
    {path: '/', component: stepOne, name: 'StepOne', useAsDefault: true}
])

class Main {
    constructor(){}
}

bootstrap(Main, [ROUTER_PROVIDERS]);

你的index.html应该是这样的。

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
    System.config({
                defaultJSExtensions: true,
                 map: {
                    rxjs: 'node_modules/rxjs'
                },
                packages: {
                    rxjs: {
                    defaultExtension: 'js'
                }
                }
            });

</script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>

<script>
    System.import('Main');

</script>

关于javascript - Angular 2 : importing router bundle，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34918604/

25

4

0

文章推荐： javascript - 使用原型(prototype)添加无限的输入字段

文章推荐： javascript - AJAX 不再在页面上显示任何修改

文章推荐： javascript - insideHTML 无法在事件处理函数内工作(Javascript)

import - ES2015 `import * as` 与普通 `import` 之间的区别
我刚刚通过更改 import * as CodeMirror 修复了一个错误简单明了import CodeMirror . 我复制了this code . (从 TypeScript 移植) impo
python : "de-import"， "re-import"， "reset import"？
我调试(在 PyCharm 中)一个脚本。我在断点处停止，然后转到调试控制台窗口，然后从那里调用导入行，如下所示: import my_util1 from my_utils 然后我调用 my_uti
import - `import` 语句的用法
谁能给我解释一下 import 语句是如何工作的？例如，我在 myapp/app/models 包中有一个类型 User: package models type User struct {
import - Idris2 中的 `import using` 或 `import hiding`
我想导入 Control.App进入一个引用 PrimIO.PrimIO 的模块通过不合格的名称 PrimIO在很多地方。当然，问题在于 Control.App还导出一个名为 PrimIO 的定义.我
python - from ... import OR import ... 对于模块
我应该使用 from foo import bar 或者 import foo.bar as bar 当导入模块还有无需/希望更改名称 (bar)？有什么不同吗？有关系吗？最佳答案假设 bar
import - "import theano"运行需要多长时间？
我正在 Windows 上使用 Theano 进行深度学习实验的第一步，我很惊讶仅仅加载库需要多少时间。这是小测试程序: from time import time t0 = time() impo
import - TypeScript import * 不创建别名
在 TypeScript 中，如何在不创建任何别名的情况下从文件“导入 *”？例如我有一个包含顶级导出函数的文件“utils”，我想导入所有这些函数而不为每个函数重新创建别名。像这样: impor
python - from ... import OR import ... 对于模块
我应该使用 from foo import bar 或 import foo.bar as bar 当导入模块并且不需要/希望更改名称(bar)？有什么不同吗？有关系吗？最佳答案假设bar是fo
python - `from ... import` 与 `import .`
这个问题在这里已经有了答案: Use 'import module' or 'from module import'? (23 个回答) 关闭8年前。我想知道代码片段之间是否有任何区别 from u
python - 'import x' vs "' from x import y' and 'import x.y' "
我试过了 from urllib import request mine = request.Request() 和 import urllib.request mine = urllib.reque
python - 为什么是: Python 'Import x' then Re- 'import x as y' clobbers import of x?
所以，我有一个关于 Python 导入的小谜团。我确信出于某种原因事情应该是这样的，因为 Guido 很少出错。但是，为什么会这样呢？ $ cat myModule.py #!/usr/bin/pyt
import - Rails4 : @import "my_folder" (with index. css.sass 在里面)不再工作，只有 @import "my_folder/index"可以
我们正在将 Rails 3.2 应用程序升级到 Rails 4.0。我们有一个 assets/stylesheets/application/index.css.sass加载一些其他 sass 文件
import - typescript 中的 `from foo import *`
我正在开发一个相当小的 Typescript 代码库，该代码库已经足够大，可以拆分到多个文件中。这是一个二十一点游戏。我目前有一堆代码，看起来像: var player = new Player();
import - Perl6 : implicit and explicit import
是否可以以当模块为 use 时的方式编写模块？ d 没有显式导入所有子例程都被导入，当它是 use d 显式导入只有这些显式导入的子程序可用？ #!/usr/bin/env perl6 use v6;
import - Sass 不观察@import 文件中的变化
这个问题在这里已经有了答案: how to watch changes in whole directory/folder containing many sass files (9 个回答) 5年前
import - xcode4 工作区中的两个项目(#import 失败)
我真的很难让它在 xcode 4 中工作。我有一个项目将在许多应用程序(网络)中重用，因此我创建一个工作区并添加我的两个项目。到目前为止，一切都很好....这就是失败的地方.. #import "J
import.io - import.io 中的经典提取器和新提取器有什么区别？
经典提取器和新提取器之间的主要区别是什么，哪个最好用？最佳答案经典提取器使用原始工作流程，与爬虫和连接器相同。新的提取器更加精简，通常看起来和感觉都更好，并且经典提取器中的许多小错误已在新提取器
import - 动态构建 less @import url
在处理 google webfont import mixin 时，我注意到无法动态构建 @import URL。 .gFontImport (@name, @weights, @subsets) {
python - "from . import views": Unresolved import
我正在关注Django 1.8 tutorial 。在我的项目中mysite ，有一个源文件夹polls 。文件夹中有views.py模块其中 index函数已定义。还有一个urls.py文件: fr
import - 第三方库上的 Rust `unresolved import`
我想使用名为 warp 的第三方库编译一个简单的 Rust 程序: [package] name = "hello-world-warp" version = "0.1.0" [dependencie

首页

博学

6Ren·AI

商城

javascript - Angular 2 : importing router bundle