标签: angular2-cli

我使用Angular 2 CLI创建了一个Angular 2项目并使用了ng build --prod命令并且没有错误.

当我将dist文件夹上传到我的网站时,我在应用加载时收到以下错误:

Uncaught TypeError: this._input.charCodeAt is not a function_Tokenizer._advance @ main .688167 c….bundle.js: 1716 _Tokenizer @ main .688167 c….bundle.js: 1716 tokenize @ main .688167 c….bundle.js: 1709 Parser.parse @ main .688167 c….bundle.js: 219 HtmlParser.parse @ main .688167 c….bundle.js: 380 DirectiveNormalizer.normalizeLoadedTemplate @ main .688167 c….bundle.js: 598 DirectiveNormalizer.normalizeTemplateSync @ main .688167 c….bundle.js: 598 DirectiveNormalizer.normalizeDirective @ main .688167 c….bundle.js: 598 RuntimeCompiler._createCompiledTemplate @ main .688167 c….bundle.js: 1090(anonymous
function) @ main .688167 c….bundle.js: 1090(anonymous
function) @ main …

我正在尝试使用angular2 cli设置在visual studio 2015中创建角度2应用程序.

我已完成以下步骤来设置项目

1. 执行以下安装cli的命令

   npm i -g angular-cli

2. 执行以下用于创建文件和文件夹结构的命令

   ng new projectname

3. 执行以下用于构建项目的命令

   ng serve

默认情况下,角度2应用程序在端口4200上提供.因此,当我执行http:// localhost:4200时,我可以看到index.html页面在浏览器上提供.我知道它是通过ng服务器而不是IIS提供的.如果我错了,请纠正我.如果我复制文件夹和文件结构并包含在我的visual studio解决方案中并运行它,我看到visual studio使用自己的端口.即使我在项目属性中将端口设置为4200并尝试执行http:// localhost:4200,它也能完成工作.我相信这是因为它现在由IIS托管,IIS不知道这个应用程序.有人可以告诉我如何在实时场景中进行设置

我基本上试图在html中进行更改并使用visual studio 2015编辑器执行代码.我没有反映任何变化

我正在使用Angular2构建一个Web应用程序,以创建我正在使用Angular2 CLI webpack的项目.Angular2应用程序也使用其他外部程序包(例如:Firebase).除此之外,我还需要创建一个在node.js上运行的REST API

如何使用node.js服务器同时提供Angular2应用程序和REST API

我是新来的Protractor.我开发了几个测试用例来完成端到端测试.这些测试案例工程,我们有所有3个不同的环境罚款:dev,testing和production.

但是我需要在测试用例中更改Angular应用程序URL,以确定需要进行测试的环境(因为URL因环境而异).

我正在使用Angular CLI命令ng e2e来运行测试.现在我的问题是

1)是否可以传递参数ng e2e,以便基于参数,可以在测试用例内动态设置URL？

2)是否有必要protractor全局安装,因为Angular CLI使用protractorunder node_modules？创建角度应用程序？

在我的项目设置中,Protractor版本是5.1.2,Angular CLI版本是1.2.0.

以下是Protract配置

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
     './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  useAllAngular2AppRoots: true,
  beforeLaunch: function() {
    require('ts-node').register({
        project: 'e2e'
    });
  },
  onPrepare: function() {
    jasmine.getEnv().addReporter(new …

如何在Angular 2 CLI项目中为开发和生产环境声明2个不同的代理URL？例如,在开发模式下,我想使用

{
    "/api/*": {
        "target": "http://localhost:3000",
        "secure": false
    }
}

但在生产模式下,我会用

{
    "/api/*": {
        "target": "http://api.exampledomain.com",
        "secure": false
    }
}

我使用angular-cli生成一个新项目.现在我想将socketJs添加到项目中,但在浏览器控制台中不断出现错误:

GET http://localhost:4200/url-parse 404 (Not Found)
GET http://localhost:4200/inherits 404 (Not Found)
Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/url-parse
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)
        at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
        at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
    Error loading http://localhost:4200/url-parse as "url-parse" from http://localhost:4200/vendor/sockjs-client/lib/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/url-parse(…)
Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/url-parse(…)
GET http://localhost:4200/json3 404 (Not Found)
GET http://localhost:4200/debug …

我有一个Angular2 Angular-CLI应用程序,它使用通过NPM(node_modules文件夹)安装的自定义库.我的Angular2应用程序可以在设计时找到自定义库组件.但是,当通过ng服务提供应用程序时,应用程序错误在运行时出现404错误的HTML,通过NPM安装的自定义库中存在的CSS文件:

http:// localhost:4200/cdf-media-slider.component.html 404(未找到)

cdf-video.component是一个自定义的Angular2库,我正试图在我的应用程序中工作.如何让我的应用程序从node_modules中的库中提供组件和相应的HTML,CSS文件？

以下是Angular-CLI的详细信息:

angular-cli:1.0.0-beta.18
节点:6.6.0
os:win32 x64

以下是自定义组件加载HTML文件的方式:

import { ... }      from '@angular/core';

@Component({
    selector: 'cdf-media-slider',
    templateUrl: './cdf-media-slider.component.html',
    styleUrls: [ './cdf-media-slider.component.less' ]
})
export class CdfMediaGridComponent implements OnInit, AfterViewInit 
{
    //IMPLEMENTATION CODE HERE...
    ...
}

cdf-media-slider.component.html和cdf-media-slider.component.less与此组件位于同一文件夹中.此代码最终驻留在node_modules中.我正在使用桶方法来表示代码,其中每个文件夹都有一个index.ts文件,用于导出它的内容.每个父文件夹都有一个index.ts,用于导出它的子索引等.

在我的客户端应用程序中使用此自定义组件,我正在导入组件,如下所示:

import { CdfMediaGridComponent }  from 'ng2cdf/index';

VisualStudio代码可以找到此文件,因为我有智能感知,并且它不会抱怨它丢失.但是,在运行时,找不到HTML和CSS文件(404),应用程序正在应用程序的根目录中查找它们(http:// localhost:4200/cdf-media-slider.component.html).

如何获得HTML和CSS文件的相应路径？

谢谢你的帮助.

是否可以在网站上的iframe中启动angular2 cli 4.0,以便预览angular2组件？我很感激这个问题的答案.

我正在研究Angular2-Typescript应用程序.我用angular-cli生成了如下项目:

ng new myApp

但是当我创建一个新组件时,@ Component标签上会出现一个警告.

我试着在这篇文章后解决:

Visual Studio Code中的实验装饰器警告

但对我不起作用.

我附上我的tsconfig.json:

{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es6",
"typeRoots": [
  "../node_modules/@types"
  ]
 }
}

打字稿版本是:"打字稿":"2.0.2"

我的Angular 2应用程序使用默认的HTML 5 history.pushState 位置策略.如何使用history.pushState浏览器刷新配置服务器并且浏览器URL不生成404s？

例如,Tour of Heroes应用程序有一些不同的应用程序路径,例如:

http://localhost:8080/dashboard
http://localhost:8080/heroes
http://localhost:8080/detail/13

如果你打刷新在这些航线上的一个,或键入一个URL,你会得到404,因为/detail/13是一个应用程序的路线,而不是服务器资源.我已将位置策略配置head在我的顶部index.html:

<!doctype html>
<html>
<head>
  <base href="/">
  <meta charset="utf-8">
  <title>Tour of Heroes</title>

但是如何配置服务器以便将所有URL发送到我的应用程序而不是生成404？

注意:这个问题是问题的补充当我通过浏览器刷新Angular 2:404错误时,Angular 2.0路由器无法重新加载浏览器,询问如何解决此问题.对于Firebase,有这样的:当我刷新我的网站时,我得到一个404.这是使用Angular2和firebase,对于Apache,这就是:Angular路由的htaccess重定向.